1 Views· 12/05/24· Tutorials
Figma tutorial: Prototype with variables
Figma is free to use. Sign up here: https://bit.ly/3msp0OV
With variables, we’ve introduced two new prototyping actions: Set Variable and Conditional. In this video, you’ll learn how to use variables to build advanced prototypes.
To follow along, grab a copy of the design from the community file here: https://bit.ly/44bHgC2
To learn more about the advanced prototyping features, check out the Help Center article (https://bit.ly/46r2JsX) and play with the Figma community playground file (https://bit.ly/3JhgTT9) created by our Designer Advocates.
If you're new to variables, check out the "Intro to variables" video tutorial here: https://www.youtube.com/watch?v=1ONxxlJnvdM
If you're new to prototypes in Figma, check out the prototype tutorial playlist here: https://bit.ly/3NC30l7
Chapters:
00:00 Intro
01:25 Set variable
03:03 Apply number variable to text layer
04:19 Set variable using literal value
04:30 Set variable with expressions
05:04 Inline preview
05:14 Conditional
06:20 Reorder action
06:50 Use boolean variable in prototype
08:40 Action orders
09:34 Apply boolean variable to variant
11:15 Apply string variable to variant
12:51 Design challenge
13:04 Outro
____________________________________________________
Find us on ⬇️
Twitter: https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
Figma forum: https://forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #prototype #variables #Config2023
0 Comments