Figma Tutorial: Components - The Basics

welcome to another figma tutorial in this video we're going to teach you the basics of components we'll show you how they can be a powerful addition to your designs components our UI elements that can be reused across your design files they help make your designs more consistent and allow for changes to be made quickly you can create a component from layers groups and frames when we think about components we also need to think about instances the master component or just component for short is created first and is responsible for defining many of the styles of the UI element a component instance is a single occurrence of the master component when the master component is updated all of the instances are updated automatically to create a new component we first need to select the layers to be included here we have an orange rectangle and a text layer which we would like to use to create a button component we can drag to select both layers and click the component icon in the toolbar to create a first component we can also use the option command K shortcut or right-click and select create component from the menu in the layers panel we see the purple master component icon indicating that we have created a component we can also see that our two layers are nested within that newly created component you may have many components in a single file to view all of the components in a file select the components tab at the bottom of the layers panel or use the keyboard shortcut option to how do we reuse a component we do this by creating a component instance or just instance for short there are several ways to create instances from components with our components selected we can create a duplicate of a master component by selecting it and using the shortcut command d hold down the Alt key click and drag out an instance from the component copy and paste it to another location with the command C and command V shortcuts or from the components tab click and drag a copy onto the canvas we can see in the layers panel that master components have a quadruple diamond icon on an instance has a single diamond icon eventually you may have many instances of components in your file to quickly locate the master component right-click on an instance and choose go to master component or select it from the properties panel let's see how the relationship between components and instances work on the Left we have our component and on the right and instance of our component when we change the background of the button inside the master component the instance is automatically updated imagine we are designing a website where several buttons are used to do this without components we would need to manually change the background color for all of the buttons however when using components only the master component needs to be changed and all of the instances are updated change is made to an instances properties are called overrides overrides allow designers to create variations on the original component if changes are made to the master component the overrides on our instance remain unchanged examples of properties that can be over in our text properties fill stroke effects like shadows and blurs and bounding box dimensions however properties that affect the layout of layers within an instance are not override able examples of these types of properties include size position rotation constraint settings layer hierarchy point and bezzie a positions if we want to clear overrides from our instances we can select the things that we want to reset and choose reset instance from the top toolbar you can also reset instance in the properties panel it is possible to detach a component instance from its master component doing this will prevent the instance from inheriting changes made to the component with an instant selected use option command B or choose detach instance from the instance section in the properties panel alternatively right-click on the instance and select detach instance if you accidentally create a component and want to break or undo that action you can create an instance of the component detach the instance then delete the component if a master component was accidentally deleted restoring it as easy find an instance of the component click restore master component in the instance section of the properties panel if we resize a layer within a component which either reduces or grows the size of the component we notice the original dimensions of the component bounding box remain the same to update the dimensions of our component select it and click resize to fit in the properties panel you can also double click on the bounding box this will resize the bounding box of the component and any instances to fit the layers inside resize to fit is not available for instances let's review what we've learned today create master components using the option command K shortcut component instances are an occurrence of a master and update automatically open the components tab by using the option to shortcut overrides change the properties of instances use resize to fit to resize the bounding box of a master component

Channel: Figma

Views: 514,971

Keywords: figma, ux, ui, components, symbols, reusable elements, instances

Id: k74IrUNaJVk

Length: 5min 34sec (334 seconds)

Published: Tue Mar 20 2018

Reddit Comments

[u/Vilscon]

I honestly wonder why my Reddit app said this post is 'trending', with one upvote and just a single comment, which is even downvoted.