Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Explore advanced features of Figma's Professional Plan in this video, where we dive into AI-powered design tools for creating and prototyping user interfaces and Developer Mode for enhanced collaboration with detailed design specs and code integration.
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
Hey there, welcome back, in this video,
0:00
we'll explore a few professional
plan features in Figma.
0:01
I'm logged in with my professional
account, so let's dive right in.
0:04
Starting with a new design file, I'll
open it up and from the bottom toolbar,
0:08
click on the sparkle icon on the far
right to access Figma's AI tools.
0:12
Here we have tools like First Draft,
which creates an initial design draft,
0:16
make a prototype, which links existing
designs into an interactive prototype
0:20
automatically and auto rename layers.
0:24
We even have text editing tools and
an image generator, so
0:29
there's no need to leave Figma for
quick copywriting or image creation needs.
0:31
Let's begin with First Draft,
here are some preset prompts we can use,
0:35
I'll try the ride sharing prompt and
see what it generates.
0:39
Okay, it looks everything is loading
as the AI is working on the design,
0:42
and slowly we start to get more and
more elements as it works.
0:47
And once it's done,
we get several color palette options,
0:53
I'll scroll through to
see how they all look.
0:58
We have orange and tan, blue and
greenish gray, blue and green,
1:01
but slightly brighter,
a nice black and yellow design,
1:06
black and white, and
a white and brown combo.
1:10
And I like this black and yellow theme the
most, so I'll select it, then I'll click
1:13
the thumbs up to rate the AI's work
to let it know it did a great job.
1:18
With our design now set,
we can start customizing,
1:21
every part of the screen can be edited,
so I'll make a quick change
1:25
to the location text here,
updating it to 5555 Carlstown Road.
1:30
See, it's as simple as selecting
the element and making your changes,
1:36
the AI generates a fully
vectorized design,
1:39
allowing you to edit
everything you see here.
1:41
We can even easily change the colors, so
1:44
let's say we wanted to change this
bright yellow into a mint green color.
1:46
I'll start down at the bottom of
my design with the home icon and
1:50
then work my way back up,
this includes updating the button and
1:53
path colors to keep everything cohesive.
1:56
So, I'll paste my mint green
color to update my button,
1:59
then I'll update the path.
2:03
And finally, I'll update the pin
that shows our desired destination.
2:08
And there we have it, I changed my
design from the original black and
2:17
yellow to this new black and
mint green theme.
2:21
Next, I'll try a custom prompt
to generate the next screen,
2:24
this time I want to create
the Ride Completion screen.
2:26
I'll start by selecting the layer for
the original frame so that I can copy
2:29
the original prompt, then I'll go
to First Draft and paste my prompt.
2:32
But instead of tracking
a driver in a ride sharing app,
2:36
I'll change it to Ride Completion Screen,
for a ride sharing app.
2:40
We'll just give the AI a moment
to do its thing again.
2:47
And it's taking a bit longer this time
as it tries to generate a few images for
2:57
our Ride Completion screen.
3:00
Now that it's completed, our design gives
us a few different color choices again and
3:07
I'm gonna go with this black and
3:11
white option as it's the closest
to our original palette.
3:12
Next, I'm gonna delete the navigation
bar at the bottom here and
3:17
I'm gonna copy the navigation
bar from our first screen and
3:21
I'm gonna paste it over here into
my new Ride Completion screen.
3:24
Now I'm gonna change the color
of my CTA button here,
3:29
I'll sample this grayish black
from the Leave now tab and
3:32
I'm going to hold command while selecting
the tab so I can perform a deep select.
3:34
Which selects nested items without the
need to continuously double click to go
3:38
through the various layers.
3:41
Then I'll select the Fill color and
hit Command C to copy it,
3:43
next I'll select the Rate
your Ride button, and
3:46
I'll paste that fill color in
to make the button dark gray.
3:49
While making the text white.
3:55
And while this looks pretty good, I
realized that if I was going to keep with
4:03
the theme of my original app, I should
probably make the button the mint green.
4:06
So, I'll select my button again and
I'll make the fill mint green.
4:10
And Figma provides the mint green
from the on this page color swatches,
4:18
then I'll select the text and
make it black.
4:22
All right, this screen is looking pretty
consistent with the original screen,
4:24
next let's test out Figma AI's
make prototype feature.
4:28
I'll select both of my frames and
4:31
click the Sparkle icon in the main
menu and head to Make Prototype.
4:34
Now I'll give the AI a moment to do
its thing, it's already finished.
4:40
I'll test it by selecting the first
screen and pressing shift space.
4:45
And I'll move the canvas contents
to showcase my prototype, now,
4:52
when I click start, it navigates
to the Ride Completion screen and
4:56
from there clicking home brings
us back to the first screen.
4:59
The transitions are basic, but
with a bit more manual adjustment,
5:03
the animations could be refined,
and this certainly saves some time.
5:06
Now let's switch gears to developer mode
where we can provide detailed information
5:10
for developers.
5:14
Right next to the Sparkle icon,
there's a Brackets icon,
5:14
clicking this activates Developer Mode.
5:17
This brings up a new inspect panel on the
right, featuring options like Figma for
5:19
VS Code, which lets you
integrate Figma with VS code for
5:24
direct access to these details.
5:27
The code settings allow us to
set the code output language,
5:29
choosing between CSS iOS as Swift UI or
UI Kit, or Android as Compose or XML.
5:33
We also have access to other languages
like React via third party plugins,
5:37
design measurements can be
shown in pixels or REM units.
5:42
In the Dev Resources section, we can
add useful documentation links such as
5:45
Framework Documentation or
Company Project Docs.
5:49
In Developer mode, clicking on Design
Elements provides additional information,
5:52
let's select the navigation bar
on our Ride Completion screen.
5:56
The Inspect panel shows margin padding,
CSS layout, hex codes for
6:00
colors, and downloadable SVG
assets with default sizes.
6:05
All of this information can be exported or
shared by clicking the share button,
6:10
we can invite others via email or
share a link.
6:14
And there's also an Embed code option for
6:16
embedding the design file directly into
platforms like Confluence or Notion.
6:18
This makes it easy for
team members to access design specs and
6:23
measurements directly in the document,
but that covers our look at some
6:25
of the advanced features available
in the professional plan.
6:29
This concludes our introduction to
Figma and its different features,
6:32
join me in the next video,
6:35
where I'll be demonstrating how to
wireframe an app screen, see you there.
6:36
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