Preview
Video Player
00:00
00:00
Reusing Designs with Components
5:02A component is a special type of object in Figma that allows you to reuse bits and pieces of a design more intelligently. If we make edits to a component, the changes will be reflected in all of its other copies.
[MUSIC]
0:00
So far we've created a basic gallery
screen, but for this prosumer
0:04
photo editing app, we should have
a screen where users can edit a photo.
0:09
And then another screen for when they're
done editing with additional options,
0:14
like going back to the gallery or
sharing the photo.
0:19
So lets get started on
those next two screens.
0:22
We're going to reuse this iPhone.
0:26
So rather than just copying and
pasting it a bunch of times,
0:30
lets turn it into what
is called a component.
0:35
A component is a special type
of object in Figma that allows
0:39
you to reuse bits and
pieces of a design more intelligently.
0:43
If we make edits to
the original master component,
0:48
the changes will be reflected
in all of its other instances.
0:53
However, if you make
changes to an instance,
0:58
those change will be maintained
without overriding the master version.
1:01
So, to do this, right-click on
the iPhone group in the Layer Palette,
1:07
And choose Create Component.
1:15
This will make the layer appear purple and
add an icon next to
1:19
the layer with four squares
arranged in a diamond shape.
1:24
This same icon is at the bottom of
the layer palette in the middle.
1:28
Click the icon to bring up
the components palette.
1:34
Now we can drag this iPhone
component into the canvas,
1:39
and this will give us
the beginnings of our next screen.
1:45
When you're done,
switch back to the Layer Palette.
1:52
You'll notice that instances of
a component have a slightly different
1:56
icon than the master component,
although they still appear purple.
2:01
So let's take this instance and
let's get it out of the gallery group,
2:07
and I'll drag it second here
because it's the second screen.
2:12
And let's put this into a new group,
2:19
And we'll double click this and
name the group Editing.
2:25
This will be the screen where
we demonstrate editing a photo.
2:33
And I personally think this would
look best with this photo of Big Ben.
2:39
And you can see that I've already
done some image edits to it,
2:46
to simulate the type of editing
that this app would be able to do.
2:50
So let's drag this image London edited,
into the Editing group, and
2:56
make sure it's on top of the iPhone,
so that appears above it.
3:02
And we need to reuse the screen
mask from the previous screen.
3:08
So in the Layer Palette,
Let's grab this screen here,
3:14
and we'll copy it, select
the Editing group and then paste it.
3:20
We'll move it below the edited image, and
3:28
then right-click on it and
choose Use as Mask.
3:31
And now, we can collapse this,
we can take this London edited photo,
3:35
We can move that around, and
the mask will clip it appropriately.
3:41
So let's select those two things,
and we'll group them again.
3:46
We'll name this App so that it's
consistent with the Gallery screen.
3:51
So now we have the beginnings of
our second screen, the edit screen.
3:58
And we'll add more interface
elements later, but
4:03
lets get the third and
final screen roughly put together.
4:06
So select the Editing layer, copy it to
your clipboard, And then just paste it.
4:11
And we'll move this down below,
and let's rename this to Sharing
4:21
because that's generally what we'll do
in the screen, we're sharing things.
4:26
And we'll drag this over to the right and
4:33
we'll make sure that it's equidistant
between all these screens there
4:36
And now that that's in place,
4:45
let's just hit 1 on our keyboard
here to zoom out and frame this up.
4:47
And for now, that should be it.
4:53
All three screens are now in place,
next we'll add some interface elements.
4:57