Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Prototyping with Figma!
You have completed Prototyping with Figma!
Preview
In Figma, there are several different ways to share designs with other people. You can share static images, but you can also share your interactive prototypes.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Often times you'll need images of
your designs for things like email,
0:00
print, PDFs and so forth.
0:04
We can do this in the inspector by
adding an export under the DESIGN tab.
0:06
So if we switch over to a DESIGN tab,
and then just click anywhere
0:12
in the blank area to select the canvas,
if it's not already selected.
0:17
And then in the Inspector click
the + button next to EXPORT.
0:23
There are several settings here,
you can export this at 1x resolution.
0:29
Or if it's needed at a higher resolution,
or
0:34
even a lower resolution,
there are several additional options here.
0:37
Then, you can add a suffix, which will
be added to the end of the file name,
0:42
and finally, there is a drop down for
the file format.
0:48
This will default to PNG but
it also has options for
0:54
JPEG and SVG depending on
what file format you want.
0:58
If you are not sure what to pick here,
PNG is most likely what you want,
1:03
because it won't apply compression
to the image, like JPEG.
1:07
SVG is a vector format,
which is useful for display on the web.
1:12
Then, just below the EXPORT settings,
there's a Preview drop down,
1:18
so you can see what this is going
to look like once it's exported.
1:26
And, there's also a button just above
that, that says Export Prototype,
1:31
which is actually just
a name of this file.
1:35
So it says Export, and
then whatever the file name is.
1:38
And if we click that it will
ask us what we want to export,
1:42
and we don't need these
smaller icons we just want
1:48
these prototype, and
then we can click Export and
1:53
it will immediately download the image.
1:58
So there is our prototype
saved as an image.
2:05
So we can export the entire canvas,
but we can also export frames.
2:12
We'll select each one of these frames.
2:18
And then, with all three selected,
on the right side, we can add an EXPORT.
2:22
And then if we just select one of these,
it will show us a preview and same thing,
2:32
we can click this button, Export Sharing,
which is the name of this frame.
2:37
And if we click it on a frame,
2:43
it will just immediately download
that image that we've specified.
2:45
However, if we just download images,
2:51
they don't have any of
the interactivity that we created.
2:54
To share that, click the Present
button in the upper right,
2:58
to go back into presentation mode.
3:01
And then once you're in
presentation mode click
3:06
the Share Prototype button
in the upper right.
3:10
And right now, anyone on my
team can access this prototype.
3:13
However, we can change this to public
by clicking Enable public access.
3:17
Now, anyone with the link to
this prototype can access it.
3:26
If you click on the hyperlink
that says the link,
3:32
it will be copied to your clipboard.
3:37
And then you can paste it into
something like an email to a client.
3:40
Now let's go back to the file view
by closing this presentation tab.
3:45
And another way to share files is to click
the Share button at the top of the screen.
3:51
And then invite other people from your
team, you can also set their permissions,
4:00
by default they'll just be
able to view the file, but
4:05
you can also change this to edit.
4:09
So let's say that we have
another person on our team and
4:11
we've invited them to this file.
4:15
Let me show you what it looks like when
two people have the same Figma file open.
4:18
To do that,
I'm going to copy the URL to this file.
4:24
I'm going to open a new browser window and
paste it.
4:29
And then I'm going to move
these two browser windows so
4:37
that they are side by side,
as best as we can here.
4:40
And now, if I'm over in this window,
4:46
You can see on the right side that
I'm also able to see the cursor of
4:53
the person that I'm working with.
4:58
So on the left side in my own
view if I move something around,
5:00
the person I'm sharing it with on
the right side can see those changes,
5:05
so I'm just going to undo those.
5:11
And close this second window.
5:14
This type of real time editing capability
is best paired with a voice chat or
5:18
a video call.
5:24
In addition, once a design or
prototype is shared,
5:25
anyone can make comments on the design.
5:29
So at the top,
let's click the Comment button.
5:32
That looks like a little
cartoon speech bubble.
5:37
And then we can click anywhere on our
designs using this orange cursor.
5:42
So I'll just click on the gallery here,
for example, and when you do this,
5:48
a text box appears allowing to you to
write a comment for everyone to see.
5:54
So lets write a comment and
post it, I'll say,
5:59
let's talk about this gallery view,
and I'll hit Post.
6:05
And so now,
I can exit that comment view, and
6:13
if I'm just editing normally,
I don't see those comments.
6:17
But if you hit Show Comments,
6:22
it will show you where there
are comments on the canvas.
6:24
So if I click on this, other people
can reply to it or if we're all done
6:31
talking about it, you can click
the Resolve button to dismiss it.
6:35
This feature is real useful for
giving feedback on a design,
6:40
because people can write their thoughts
and associate them with a particular
6:44
part of the design rather
than the design as a whole.
6:49
There are many more features in Figma,
but that covers the highlights.
6:52
Like I said at the beginning, you don't
always need to create high fidelity
6:57
markups like this with interactivity.
7:01
Sometimes a pen and paper or
a simpler tool will work.
7:04
However, Figma is a really great option
when you're getting closer to writing
7:08
code, or if you have a client that's
having trouble visualizing how a wire
7:13
frame will look, as a finished product.
7:17
I encourage you to keep going and
try to prototype some simple apps or
7:21
websites in Figma.
7:26
Practicing now with an idea in mind,
will help prepare you for the real thing.
7:28
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up