Figma tutorial: Prototype with variables

Figma is free to use. Sign up here: 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: To learn more about the advanced prototyping features, check out the Help Center article () and play with the Figma community playground file () created by our Designer Advocates. If you’re new to variables, check out the “Intro to variables“ video tutorial here: If you’re new to prototypes in Figma, check out the prototype tutorial playlist here: 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: Instagram: LinkedIn: Figma forum: ____________________________________________________ #Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #prototype #variables #Config2023