variables

Variables taxonomy map created by Vodafone UK Design System team to accommodate a complex multi-brand, multi-themed design system. The map illustrates four Collections required to support such system and connections between tokens. The file includes two variants: Colour-coded by aliases linksCol...

The hunt to find more use cases for local variables.

In this introductory video, we'll explore Figma's variables, conditional logic, and prototyping features. Download our free variable styles template: https://www.uicollective.co/course/getting-started-with-ui-collective In this introductory guide, we explore how variables and conditional logic can streamline your design process to create intuitive prototypes. Explore our full range of free video lessons at https://www.uicollective.co/ 0:00 An Introduction 0:44 Build the Wireframe 7:46 Redesigned Prototyping 9:08 Adding Variables 15:34 Adding Conditional Logic

Learn the basics of boolean variables, and how to use booleans to create an interactive prototype. Explore our full range of free courses at https://www.uicollective.co/ Build an Alert: https://www.youtube.com/watch?v=lrdkr469Qbs 0:00 An Introduction 0:32 Using Boolean Variables

Figma is free to use. Sign up here: https://bit.ly/3msp0OV 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://bit.ly/44bHgC2 Learn about prototyping with variables with our other tutorial: https://bit.ly/3pfKk1h Learn more about variables in Figma with our additional playground file: https://bit.ly/4490iJc Learn more about design systems in Figma: https://bit.ly/3os0Afc Help center articles: Guide to variables: https://bit.ly/3Nh7JaK Overview of variables: https://bit.ly/44bD2dG Create and manage variables: https://bit.ly/447B9im Apply variables to designs: https://bit.ly/3qVsnWo Modes for variables: https://bit.ly/3qS3GKk 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.instagram.com/figma LinkedIn: https://www.linkedin.com/company/figma Figma forum: https://forum.figma.com/ ____________________________________________________ #Figma #Config #Config2023 #Variables #Designtokens #Tutorial #design #tips #DesignSystems

Figma Community plugin - Simplify your workflow – Effortlessly convert Figma design variables, including colors and numbers, into CSS variables to save time and ensure accuracy. Enhance your design process and increase productivity. How to use it: Select your collectionChoose between converting to PX or RemInclude all t...

Figma is free to use. Sign up here: https://bit.ly/3msp0OVHabitz design system (with variables): https://www.figma.com/community/file/1298672675597243186Prev...