Reusing Designs with Components5:02 with Nick Pettit
A 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
You need to sign up for Treehouse in order to download course files.Sign up