In the seventh class of the beginner’s course to Figma we are going to see how components and styles are going to help us save time in our designs.
Components are items that can be reused. Components can be created from layers or groups of layers that we have designed: they can be buttons, icons, or more complex designs such as footers or menus.
Whenever we make a change to a style’s properties, such as changing the text color from red to blue, Figma will apply these changes to whatever object has that style applied to it. Let’s see it live!
You see, the components and styles are going to save us a lot of time when creating our designs.
There are always two elements to components: A master component that defines the component’s properties, and one or more instances, which are a copy of the component used in layouts.
Instances are bound to the master component, and if you change a property on the master component, it will be changed on the bound instance as well. Styles allow you to define a set of properties for an object, which can be reused across multiple layouts.
Styles can be used to define the color, text, and effects applied to objects; or to define the structure and appearance of the layout grids.
You don’t have to create the styles before starting to design: first we apply to an object the properties that we need and then we create the style from those properties that we have already applied.
We can create styles for:
- Colors: fill, stroke, background color.
- Text: font, size, line height, spacing.
- Effects: drop shadow, inner shadow, layer blur, background blur.
- Grids: row, column, grid.
To learn how the components work, we are going to do some exercises:
- Create a blue button with white text. Convert button to component. Create an instance of that component. Change the background color of the master component to orange to see how the instance changes as well.
- Change the instance text color to black. Then, reset the instance so that it has white text again.
- Detach the instance. Change the color of the master component and check that it no longer changes the color of the instance (because it is no longer an instance, since we have unlinked it).
To learn how to create and apply styles, I suggest the following exercises:
- Create a triangle that has a dark yellow fill. In the Fill section of the properties panel, select the button with the four dots icon (Style), add the fill to the color styles and name it “Primary Color”. Create a rectangle and style it “Primary Color”.
- Create a text that has 5 paragraphs:
- Give the first paragraph a size of 36 pt and put a Roboto Medium font. Select and create a style in the Text section of the properties panel called “H1 Heading 1 Mobile”.
- For the second paragraph, give a size of 28 pt and put a Roboto Medium font. Select and create a style called “H2 Heading 2 Mobile”.
- For the third paragraph, give it a size of 16 pt and put a Roboto Regular font. Select and create a style called “Moving Paragraph”.
- To the fourth paragraph apply the style «H2 Title 2 Mobile».
- To the fifth paragraph apply the style «Mobile Paragraph».
- Select one of the words from the last paragraph. Add an underline decoration and create a style with that property to use for links.
- Create a rectangle and apply a drop shadow effect. Create a style with that effect. Create a star and apply the drop shadow style just created.
- In a frame, create a 12 column Layout Grid and create a Layout Grid style with those Grid properties.
You see it! With Figma we can create components and styles to make our designs coherent and we will save a lot of time when designing, since we will be able to reuse our designs in a very practical way.
As always, if you have any doubt or question, you can send it through the support form of the subscriber intranet. See you in the next lesson! 🙂
Remember that if you will have access to everybody the courses and you can also enjoy everything from .
Facebook Comments
Disqus