Figma tutorial: Prototype with variables

Figma
Figma
309.4 هزار بار بازدید - پارسال - Figma is free to use.
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: Twitter: figma
Instagram: Instagram: figma
LinkedIn: LinkedIn: figma
Figma forum: https://forum.figma.com/

____________________________________________________


#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #prototype #variables #Config2023
پارسال در تاریخ 1402/03/31 منتشر شده است.
309,411 بـار بازدید شده
... بیشتر