2 Views· 12/05/24· Tutorials

Figma tutorial: Component properties


designvp
Subscribers

Figma is free to use. Sign up here: https://bit.ly/3msp0OV

With component properties, you can define which parts of a component can change. And instead of creating separate variants, you can use component properties to reduce the number of components needed. This takes the guesswork out of designing for anyone using these components and they can quickly make adjustments as Figma keeps component property controls in one place.

Play with our component properties community file:
https://bit.ly/3llmSKh

Learn more about component properties on our Help Center:
https://bit.ly/3zSpp7i

Learn more about interactive components:
https://bit.ly/3mhWRx4

Learn more about variants:
https://bit.ly/3Ow9gbT

Check out our other component properties video:
https://bit.ly/3n6WPaL

00:00 - Introduction
01:20 - Types of properties
01:29 - Overview
01:40 - Previous content
01:46 - Community file
01:51 - Button Component
02:31 - Instance swap property
03:38 - Text property
04:09 - Boolean property
05:24 - Consume component properties
05:53 - Variant property
08:52 - E-commerce store card
09:25 - Add component properties
12:04 - Set up the left icon
13:01 - Set up the right icon
14:18 - Set up the text layer
16:08 - Clean up
17:08 - Using the new button
17:49 - Wrap up
____________________________________________________

Find us on ⬇️
Twitter: https://twitter.com/figmadesign
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma

____________________________________________________

Music credit:
Those Days When We Were Happy by Babasmas
https://soundcloud.com/babasmasmoosic
Creative Commons — Attribution-ShareAlike 3.0 Unported — CC BY-SA 3.0
Free Download / Stream: https://bit.ly/3Kk5cZB
Music promoted by Audio Library https://youtu.be/wFAlz5M32mU

#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone

Show more

Up next


0 Comments