下载 "Figma tutorial: Intro to variables"

Figma is free to use. Sign up here: https://www.figma.com/ By definition, a variable is something that can vary in value or take on multiple values. Variables in Figma store reusable values, like color values and numbers, that can be applied to all kinds of design properties and even prototypes! A variable’s values can also reference other variables, making updating design systems a breeze. In this video, we’ll cover how variables work, and how to use them to represent design tokens and account for different modes and themes. * Update: When following along with the tutorial at 10:30, the variable called ".5" will no longer work. This is due to our alignment with the W3C spec which doesn't allow periods in names. Calling the variable "spacing/half" will work, instead. We are doing a follow-up in the next coming months where we’ll be separating out the “figma name” from the code syntax, which may let us loosen these restrictions. Keep an eye out for additional syntax support in the future. Follow along with the file: https://www.figma.com/community/file/1253086684245880517 Learn about prototyping with variables with our other tutorial: https://www.youtube.com/watch?v=VEuwKJAz7Jg Learn more about variables in Figma with our additional playground file: https://www.figma.com/community/file/1234936397107899445 Learn more about design systems in Figma: https://www.youtube.com/playlist?list=PLXDU_eVOJTx6vqOWJSWH87Zb5-riiG63A Help center articles: Guide to variables: https://help.figma.com/hc/en-us/articles/15339657135383 Overview of variables: https://help.figma.com/hc/en-us/articles/14506821864087/ Create and manage variables: https://help.figma.com/hc/en-us/articles/15145852043927/ Apply variables to designs: https://help.figma.com/hc/en-us/articles/15343107263511 Modes for variables: https://help.figma.com/hc/en-us/articles/15343816063383 For more information on using variables with API and development, check out the links here: - REST API: https://www.figma.com/developers/api#variables - Plugin API docs: https://www.figma.com/plugin-docs/working-with-variables/ - Import/export variables code sample https://github.com/figma/plugin-samples/tree/master/variables-import-export - Styles to variables convert code sample https://github.com/figma/plugin-samples/tree/master/styles-to-variables Chapters: 00:00 - Intro 01:17 - Color variables 03:55 - Create tokens 06:00 - Apply variables 07:13 - Styles vs variables 08:17 - Modes 10:12 - Number variables 12:35 - Themes 14:11 - Wrap up ____________________________________________________ Find us on ⬇️ Twitter: https://twitter.com/figma Instagram: https://www.facebook.com/unsupportedbrowser LinkedIn: https://www.linkedin.com/company/figma Figma forum: https://forum.figma.com/ ____________________________________________________