- Prototyping is the process
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)