Figma tutorial: Prototype with variables

Published: 21 June 2023
on channel: Figma
473,027
7.6k

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:    • Figma tutorial: Intro to variables  

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:   / figma  
Instagram:   / figma  
LinkedIn:   / figma  
Figma forum: https://forum.figma.com/

____________________________________________________


#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #prototype #variables #Config2023


On this page of the site you can watch the video online Figma tutorial: Prototype with variables with a duration of hours minute second in good quality, which was uploaded by the user Figma 21 June 2023, share the link with friends and acquaintances, this video has already been watched 473,027 times on youtube and it was liked by 7.6 thousand viewers. Enjoy your viewing!