Prototype with Variables in Figma
11.6K views · 2023-08-25
UI DesignIndustrial Design
Design a prototype with Figma's new feature Variables. Full course: https://designcode.io/ios17
In Figma, variables are dynamic elements that can change or hold multiple values. They store reusable information like colors and numbers, usable across designs and prototypes. Unlike Styles, variables are adaptable, enabling instant design changes for various scenarios. For example, toggling modes, language shifts, and adjusting sizes become effortless. Variables can refer to each other, simplifying Design System updates. Coding experience isn't essential, making this concept accessible to all.
Figma file: https://www.dropbox.com/scl/fi/561mcubn2ypxj457cuhrh/Sections-12-13-Variables-Prototype.fig?rlkey=8e5ertq87bjdgvlkkdy6p9jfw&dl=0
00:00 Intro
00:37 Variables
15:02 Prototype with variables
🚀 Follow this course on Design+Code's website
➡ https://designcode.io/ios17
👋🏻 Let's connect!
➡ Twitter: https://twitter.com/titepommee
➡ Instagram: https://www.instagram.com/sourasith.design/
#figma #uidesign #ui
In Figma, variables are dynamic elements that can change or hold multiple values. They store reusable information like colors and numbers, usable across designs and prototypes. Unlike Styles, variables are adaptable, enabling instant design changes for various scenarios. For example, toggling modes, language shifts, and adjusting sizes become effortless. Variables can refer to each other, simplifying Design System updates. Coding experience isn't essential, making this concept accessible to all.
Figma file: https://www.dropbox.com/scl/fi/561mcubn2ypxj457cuhrh/Sections-12-13-Variables-Prototype.fig?rlkey=8e5ertq87bjdgvlkkdy6p9jfw&dl=0
00:00 Intro
00:37 Variables
15:02 Prototype with variables
🚀 Follow this course on Design+Code's website
➡ https://designcode.io/ios17
👋🏻 Let's connect!
➡ Twitter: https://twitter.com/titepommee
➡ Instagram: https://www.instagram.com/sourasith.design/
#figma #uidesign #ui