of creating a model of a future product.

A prototype needs to be created quickly and changed easily

because it's likely

that several versions of a prototype will be required

before the right version is created.

With each prototype,

a round of user testing is typically performed,

analyzed, and measured,

and changes are made.

To keep costs low and possible interfaces high,

prototyping software is often used.

With prototyping software, no coding is required.

As you might imagine,

coding is a complex and time-involved process.

It's not easy to make changes

and it takes time to develop a quality product.

Eliminating the coding process

is critical to moving quickly and making changes.

Prototyping software

typically features a drag-and-drop interface,

often with several pre-configured interface options

like buttons, search boxes, form elements,

navigation bars, and more.

You can import graphics like logos and photos.

Often, you can add links between prototype screens

and small animations when something is clicked.

Let's take a quick peek at some prototyping software

to see how this type of software looks and functions.

This is Figma.

You can sign up for a free account at figma.com.

I wanted to briefly walk you through the kinds of problems

that Figma happens to solve.

So this is the dashboard.

Once you have created an account and logged in,

you'll see something like this.

You'll see you'll have the ability

to create several kinds of files,

so you can create the type of file

for designs and prototypes.

I'm going to show you one of those in a moment.

You'll have the ability to create a FigJam file,

which, as it says here, is like whiteboards, diagrams,

sticky notes, that kind of thing.

I'll show you that in a moment as well.

Or you can import a file from someplace else.

So maybe you have somebody else's Figma file

or you have a file from some other program, like Sketch.

Using the Figma community,

which is over here on the left-hand side,

I found some examples for us to just briefly take a look at.

So here's an example of a webpage layout

that comes from the community.

Somebody already designed this for you to take a look at

with the intention that you can learn Figma from this

or you can take this in, tweak it a little bit,

and turn it into a different kind of design.

So those of you who are familiar with Photoshop,

you'll notice this might look somewhat familiar.

We have various types of layers

and so forth over here on this side.

So as I click on things,

you can see we are selecting different elements here

on the page.

Okay, there's that tiny emoji up there at the top.

You, of course, can zoom in or zoom out,

zoom to fit, whatever is best for you.

I'll zoom in a little bit.

So for example, here in this box,

I might want to make some changes to this.

I can, of course, double-click on this and change the text,

"I want to work from home every day,"

or whatever changes you wanted to make here.

You could select other elements.

This is a grouping here.

If we group inside of this, there's a vector diagram,

there's some text associated with this,

and then there's this little icon here.

We could turn off the eyeball

that would remove that from view.

We could also select this little guy here,

maybe we get rid of that.

So we can just continue to make changes here.

We can make changes to colors as you see here.

The background for this,

let me zoom back out again so we can see this.

The background for the page overall

is this light gray color.

We could easily change that background color

to something else.

Maybe this dark gray.

And you'll notice that these are in hexadecimal format.

We've talked about that other places in the course.

So those colors that might come to you

from some kind of branding document in hexadecimal format,

you can just type those colors right into Figma

and make use of them.

So this is the kind of thing that you can expect here

within Figma for laying out webpages.

You have the ability to place shapes,

and images, and so forth;

you have some basic drawing tools that are available to you;

you have some text tools that are available;

and you can make comments and share these with your team.

Let's take a brief look over here at a FigJam document.

So this is somewhat the same but also somewhat different.

The FigJam functionality, I think,

would be most used by people

who are working with user experience.

In other words, they are researching

and planning some kind of document

rather than putting together the actual graphic design

or a true interface prototype.

This is from earlier in the process

of developing a website or web application.

In this case, I'm looking at the consumer journey map here,

and as we have done before,

we can zoom in and take a closer look at this.

So we have an introductory graphic

that we have here.

We have the ability to put in information about a persona

that we might be working with

and we could make a graph here.

We have sticky notes

that are spanning across these four boxes.

This is a pretty common sort of technique that UX people use

for organizing a customer journey.

So how are people interacting with your product or service

from when they find it,

all the way through until they purchase it,

and how are they using it

to address problems within their lives?

So here, we have actions, experience, opportunities,

and pain points.

These sticky notes could easily be rearranged.

You just click and drag.

We aren't zoomed in far enough to read what they say.

There actually isn't any text on these.

But as you can expect,

you double-click on this and say, "This is a sticky note."

So there's the sticky note.

If we wanted it to be a different color,

we have a few choices.

We can pick a different color for our sticky note.

Down here in our tray,

we have the ability to click and drag

and add other ones here.

We can also click and drag other shapes,

and, of course, there are many choices of shapes

to choose from.

That would be useful

if you were putting together something like a flow chart,

which is a pretty common type of way

of planning some kind of functionality

inside of a web application.

We have the ability to draw on the page,

so I can

make some kind of drawing here

and it smooths it out for me really nicely.

We have the ability to put in various kinds of stamps.

So if I really love this particular sticky note,

I can put hearts on it.

We also have the ability to add silly things here.

These are just stickers and so forth.

And wow, that's a really great idea.

Let's label it as fresh.

So this is just a very brief overview

to give you an idea of what Figma is and how it works.

There are two sides to Figma.

Side number one that I'm looking at right here

is this whiteboarding, sticky note, planning,

diagramming type of tool, which is called FigJam.

And the other side of it

is more typically used for planning webpages

and prototyping site designs,

where you can put in

all kinds of pretty elements to the interface,

line things up,

and truly draw out what a webpage will look like.

(upbeat music)