🎉 Welcome to the Figma Forum! 🚀
Before you Start Who can use this feature Variables in prototypes and publishing variables to team libraries are available on the education plan and any paid plans Anyone with can edit access to a file can create and manage variables Anyone with access to a file can use variables from that file in their designs Variables in Figma Design store reusable values that can be applied to all kinds of design properties and prototyping actions. They help save time and effort when building designs, managing design systems, and creating complex prototyping flows. For example, you can: Create design tokens for better efficiency when managing design systems Switch a frame between different device sizes and have spacing immediately update, according to a defined spatial system Preview how text flows in different languages by switching copy on a frame Create a fully functional checkout cart design that calculates order total based on which items were added to the cart Build a prototype of an interactive quiz that uses conditional logic to show whether a user answers a questions correctly or incorrectly There are three main ways to use variables in Figma: Designs and design systems Advanced prototyping Figma APIs Variables for designs and design systems Use variables and modes to implement design tokens for your design system, switch designs between different contextssuch as light/dark themes. With variables, you can design more efficiently and build a more powerful design system. Figma tutorial: Intro to variables This video tutorial covers the foundations of variables, how to use them to represent design tokens, and how to use color and number variables to account for different modes and themes. Figma tutorial: Variables for typography In this video tutorial, learn how to use variables on font properties, adopt variables into an existing type system, and how to use them to power a responsive design. Article: Overview of variables, collections, and modes Start your variables journey here! Learn about the different types of variables and what variable collections and modes are. Article: Create and manage variables Learn how to create variables and collections, reference other variable definitions, and scope which variables can be used in designs. Article: Apply variables to designs Learn how to apply existing variables to design properties. Article: Modes for variables Learn how to create multiple definitions for a variable, each one associated with a mode. Also, learn how to use them to quickly switch the contexts of designs. Article: The difference between variables and styles As Figma extends its feature set with variables, you might be wondering: What is the difference between variables and styles? When should I choose one over the other? Community file: Variables playground Want to get hands-on experience with variables? Grab a copy of the variables playground file to practice while you learn. Variables for advanced prototyping With variables, you can build high-fidelity prototypes using fewer frames. Use variables with other advanced features like expressions and conditionals to take your prototypes to the next level. In prototyping, variables are used to store object states or properties. Use prototype interactions to modify variable values, which can change the appearance, content, or visibility of objects in a designall in a few simple frames. Video tutorial: Prototype with variables Watch and learn how to use variables in prototypes by following along with a realistic example. Youll review how to modify variable values, how to build simple expressions, and how to use multiple actions and if/else logic to evaluate conditional checks. Article: Use variables in prototypes Learn the basics of how to prototype with variables in Figmaincluding how to configure your variables, use the Set variable action to change variable values, and use variables with component variants and interactive components. Article: Use expressions in prototypes Learn how to use expressions and variables in prototypes to generate dynamic string values, perform basic math operations with number values, or even evaluate boolean expressions. Article: Multiple actions and conditionals Learn how to use multiple actions to stack an unlimited number of actions on the same trigger, or use conditionals to check if a condition is met before performing an action by using if/else logic. Article: Variable modes in prototypes Learn how to use variable modes in your prototypes. You can set the values of specific modes based on context, or use specific mode values in your expressions. Community file: Advanced prototyping playground Make a copy of our advanced prototyping playground file to get some more hands-on practice with variables in prototyping. Variables using APIs Variables are now supported in Figmas Plugin APIfor building plugins and widgetsand in the REST API. Developer docs: For the REST API Support for variables in the REST API includes endpoints for querying, creating, updating, and deleting variables. Developer docs: For the plugin API Support for variables in the plugin API includes creating and reading variables, and binding variables to components. For example, a plugin can be built to import or export variables or to convert styles to variables. Developer docs: For the widget API Widgets can access variables using the Plugin API. Widgets can create and read variables, but widget properties cannot be bound to variables. Figma tutorial: Sync variable to GitHub In this video tutorial, learn how to sync your variables with your codebase. We'll cover how to use our Variables GitHub Action example repo to sync your Figma variables and your codebase. Community file: Syncing design systems using Variables REST API Learn how you can use Figma's variables REST API to set up automated workflows to sync changes between design files and your codebase.
This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figmas redesign. Before you Start Who can use this feature Anyone on any plan Anyone with can edit access to a file can create and edit variables Looking for more resources on variables? Check out our guide to variables. Access the Variables modal Use the Variables modal to create and manage: Variable collections Variables Modes for variables Variable groups To access the Variables modal: Deselect everything on the canvas by pressing esc or clicking the canvas. From the right sidebar, find the Local variables section. Click Open variables. Create a variable Note: You can create up to 5,000 variables per collection. From any collection, click + Create variable. Select a variable type from the dropdown. Give the variable a name in the first column, and a value in the second column. Tip: A variable can store multiple values, allowing for more dynamic designs. Learn how to create multiple modes for variables. To duplicate a variable, select one or more variables and press Shift Enter. To delete a variable, right click the variable and select Delete variable. Tip: You can also create a variable using the eyedropper tool. Create an alias Create an alias for a variable to link its value to an existing variable. This allows you to implement design tokens and makes managing updates to your designs more efficient. For example, say you have multiple color variables that reference the same color variable. If that color needs updating, you would only need to update the source instead of manually updating every instance of the color. A variable can reference other variables of the same type. To create an alias for a variable: Open the Variables modal. Right-click a variables value and select Create alias. From the Libraries tab, choose a variable to set an alias. You can use the search bar to find a variable by name or browse through enabled libraries. To detach an alias, hover over the value field and click Detach alias. Copy and paste variables You can copy and paste variables to any collection, including collections in a different file. Open the desired collection from the variables modal. Select one or more variables. Hold Command for Mac or Control for Windows to select multiple variables. Hold Shift to select a range of variables. Right-click the selection and select Copy. From any collection, right-click and select Paste. Edit a variable Hover over a variables row and click the Edit variable icon to open its editing modal. From there, you can: Change the name of the variable. Add a description to explain how the variable should be used. Modify the values of the variable. Add code syntax. Hide the variable from publishing. Scope a variable to limit which properties the variable can be applied to. Scope a variable Scope a variable to limit which properties the variable can be applied to. This reduces the guesswork when deciding which variables to use for your designs. For example, if you scope a number variable to corner radius, the variable can only be applied to corner radius and won't appear as an option for any other supported properties. Scoping is available for number, color, and string variables. For number variables, you can scope: Auto layout Gap between Padding Corner radius Font properties Font weight Font size Line height Letter spacing Paragraph spacing Paragraph indent Layer opacity Effects Stroke Text content Width and height For color variables, you can scope: Effects Frame fill Shape fill Stroke Text fill For string variables, you can scope: Font family Font weight or style Text string To scope a variable: Right-click on a variable, or multiple variables, and select Edit variable. You can also click Edit variable, located to the right of any single variable. Open the Scope tab. Use the checkboxes to toggle the variables availability in that property. Check Show in all to make the variable available for all supported properties. Add code syntax Code syntax allows you to represent variables in code using valid variable names to support a seamless handoff experience. A variables code syntax will appear in code snippets in Dev Mode when inspecting elements using the variable. Currently, code snippets for variables are supported in CSS, SwiftUI, and Compose. You can create one name per platform, including Web, Android, and iOS. This allows for up to three code syntaxes per variable. To add code syntax to a variable: From the Code syntax section of the the Edit variable modal, click Add code syntax. From the dropdown, choose Web, Android, or iOS. Use the input box to enter a variable name. A preview shows how the variable name appears in code snippets. Edit variables in bulk To edit multiple variables at once: Open any collection from the Variables modal. Select multiple variables by using keyboard shortcuts: Hold Command / Control and click to select individual variables Hold Shift and click to select a range of variables Right-click a selected variable and click Edit variables. From the Edit variables modal, you can: Scope variables, if supported by the variable type Hide variables from publishing Group a selection of variables To organize variables into a group: From the Variables modal, select multiple variables: Hold Command / Control to select multiple variables Hold Shift to select a range of variables Right-click the selection and select New group with selection. Click and drag groups in the sidebar of the Variables modal to reorder groups. You can also click and drag groups into other groups to nest them. Rename a group From the Variables modal, click Toggle sidebar so that its visible. Double click the group name. Type a new name for the variable group. Manage a group From the Variables modal, click Toggle sidebar so that its visible. Right-click the group name in the sidebar. From the menu, choose from the following: Ungroup Duplicate group Delete group Create and manage variable collections To create a variable collection: From the Variables modal, click Toggle sidebar so that its visible. Click More options and select Create collection. To rename or delete a collection of variables: From the Variables modal, click Toggle sidebar so that its visible. Open the collections dropdown and choose the collection you want to manage. Open the collections dropdown again and select Rename collection or Delete collection. Ready to continue your variables journey? Check out the following topics: Publish variables to team libraries Apply variables to designs Create modes for variables Use variables for advanced prototypes Before you Start Who can use this feature Anyone on any plan Anyone with can edit access to a file can create and edit variables Looking for more resources on variables? Check out our guide to variables. Access the Variables modal Use the Variables modal to create and manage variables, modes, groups, and collections. Deselect everything on the canvas by pressing esc or clicking the canvas. From the right sidebar, find the Local variables section. Click Open variables. Create a variable Note: You can create up to 5,000 variables per collection. From any collection, click + Create variable. Select a variable type from the dropdown. Give the variable a name in the first column, and a value in the second column. To duplicate a variable, select one or more variables and press Shift Enter. To delete a variable, right click the variable and select Delete variable. Tip: A variable can store multiple values, allowing for more dynamic designs. Learn how to create multiple modes for variables. Create an alias Create an alias for a variable to link its value to an existing variable. This allows you to implement design tokens and makes managing updates to your designs more efficient. For example, say you have multiple color variables that reference the same color variable. If that color needs updating, you would only need to update the source instead of manually updating every instance of the color. A variable can reference other variables of the same type. To create an alias for a variable: Open the Variables modal. Right-click a variables value and select Create alias. From the Libraries tab, choose a variable to set an alias. You can use the search bar to find a variable by name or browse through enabled libraries. To detach an alias, hover over the value field and click Detach alias. Copy and paste variables You can copy and paste variables to any collection, including collections in a different file. Open the desired collection from the variables modal. Select one or more variables. Hold Command for Mac or Control for Windows to select multiple variables. Hold Shift to select a range of variables. Right-click the selection and select Copy, or press: Mac: Command C Windows: Control C From any collection, right-click and select Paste, or press: Mac: Command V Windows: Control V Edit a variable Hover over a variables row and click the Edit variable icon to open its editing modal. From there, you can: Change the variables name Add a description to explain how a variable should be used Modify the variables value Use the checkboxes to scope a variable Add code syntax Hide the variable from publishing Scope a variable Scope a variable to limit which properties the variable can be applied to. This reduces the guesswork when choosing variables for designs. For example, if you scope a number variable to corner radius, the variable can only be applied to corner radius and won't appear as an option for any other supported properties. Scoping is available for number, color, and string variables. For number variables, you can scope: Auto layout Gap between Padding Corner radius Font properties Font weight Font size Line height Letter spacing Paragraph spacing Paragraph indent Layer opacity Effects Stroke Text content Width and height For color variables, you can scope: Effects Frame fill Shape fill Stroke Text fill For string variables, you can scope: Font family Font weight or style Text string To scope a variable: Right-click on a variable, or multiple variables, and select Edit variable. You can also click Edit variable, located to the right of any single variable. Open the Scope tab. Use the checkboxes to toggle the variables availability in that property. Check Show in all to make the variable available for all supported properties. Add code syntax Code syntax allows you to represent variables in code using valid variable names to support a seamless handoff experience. A variables code syntax will appear in code snippets in Dev Mode when inspecting elements using the variable. Currently, code snippets for variables are supported in CSS, SwiftUI, and Compose. You can create one name per platform, including Web, Android, and iOS. This allows for up to three code syntaxes per variable. To add code syntax to a variable: From the Code syntax section of the the Edit variable modal, click Add code syntax. From the dropdown, choose Web, Android, or iOS. Use the input box to enter a variable name. A preview shows how the variable name appears in code snippets. Edit variables in bulk To edit multiple variables at once: Open any collection from the Variables modal. Select multiple variables by using keyboard shortcuts: Hold Command / Control and click to select individual variables Hold Shift and click to select a range of variables Right-click a selected variable and click Edit variables. From the Edit variables modal, you can: Scope variables, if supported by the variable type Hide variables from publishing Group a selection of variables To organize variables into a group: From the Variables modal, select multiple variables: Hold Command / Control to select multiple variables Hold Shift to select a range of variables Right-click the selection and select New group with selection. Click and drag groups in the sidebar of the Variables modal to reorder groups. You can also click and drag groups into other groups to nest them. Rename a group From the Variables modal, click Toggle sidebar so that its visible. Double click the group name. Type a new name for the variable group. Manage a group From the Variables modal, click Toggle sidebar so that its visible. Right-click the group name in the sidebar. From the menu, choose from the following: Ungroup Duplicate group Delete group Create and manage variable collections To create a variable collection: From the Variables modal, click Toggle sidebar so that its visible. Open the collection dropdown and select Create collection. To rename or delete a collection of variables: From the Variables modal, click Toggle sidebar so that its visible. Open the collections dropdown and choose the collection you want to manage. Open the collections dropdown again and select Rename collection or Delete collection. Ready to continue your variables journey? Check out the following topics: Publish variables to team libraries Apply variables to designs Create modes for variables Use variables for advanced prototypes
Before you start Who can use this feature Available on all paid plans In Figma, a library is a collection of design assets, like components, styles, and variables. These design assets live in a single file, but can be reused across different files or projects. People often use libraries for sharing common design elements, like buttons, icons, pieces of UI, colors, or values for certain properties. This helps everyone stay consistent and makes it easy to build from existing designs. When someone changes assets in a library, people can quickly review the changes and automatically update their designs. Example Heres an example of how a design team working on the fictional app Habitz might use libraries in Figma: In a file, Kai creates components for different parts of the app, like the nav bar, menu, header, and other UI elements. They publish finalized components as a library from within the file. Working in a different file in the same project, Timothy views the library and adds a few components to the canvas. Some time later, Kai makes an update to one of the components in file where the library was published. In all other files that use the component, people working in the file get notified there's an update available to the component. People can review the component, and accept the update when theyre ready. The update gets applied to any instances of the component theyve used. Want to learn more about Kai and the Habitz team? You can follow their journey to launching a design system in Figmas Introduction to design systems course Create components, styles, or variables to use in a library The goal of a library is to share reusable design assets with other people you work with. These assets can be components, styles, or variables. Select a tab to learn more about each one. Components Styles Variables Components are the building blocks of a design. They can be individual elements, like icons or buttons, or a collection of elements, like menus and layouts. When using libraries, the library file contains the main component, which defines the properties of the component for everyone to use. When you access a library in your file, you can add an instance of the component to the canvas. This instance will receive any updates made to the main component. Learn how to create components in your designs Styles define a collection of properties or settings we want to reuse. For example, you can use styles to: Capture specific color values for fills and strokes Define text properties like font, line height and letter spacing Make presets for shadow and blur effects Create shareable scaffolding in the form of rows, columns, and layout grids Learn more about creating styles for colors, text, effects and layout grids Variables store reusable values you can apply to all kinds of design properties. For example, you can: Create design tokens for better efficiency when managing design systems Switch a frame between different device sizes and see spacing immediately update according to a defined spatial system Preview how different languages affect a design Create a fully functional checkout cart design that calculates order total based on which items were added to the cart Build a prototype of an interactive quiz that uses conditional logic to show whether a user answers a question correctly or incorrectly Learn more about variables Publish a library Before you can access components, styles, or variables in other files, you need to publish them as a library. You can choose which ones to publish, and on the Organization and Enterprise plans, who can have access to them. If you change a published style, component, or variable, Figma will only apply the changes to instances in the current file. If you want those changes to be reflected in your library, you will also need to publish those changes to the library. Publish styles, components, and variables to a library Choose which libraries to use in your files You can access published libraries in any draft files or team files where you have can edit access. Admins can set default libraries for a team or organization, which automatically enables them in every file. Enable access to libraries in your drafts Enable or disable a library in a design file Don't have a library to use? Start building designs with UI kits instead. Use library assets in a file When youve found a library you want to use, you can add any components, styles, or variables to your file by following the instructions for each resource: Create an instance of a component Apply styles to layers and objects Apply variables to designs Accept updates to a library in your files When someone publishes an update to a main component, style, or variable in a library, Figma makes the update available in every file where the component, style, or variable is used. Anyone with can edit access to a file can review and accept or ignore the changes. Accept updates from a library Manage a library People with can edit access to a library file can set permissions to the file, unpublish the library, and move assets between files. Manage libraries in teams Manage a library for a workspace or organization Move published components between files Unpublish a library
Already have an account? Login
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
Sorry, our virus scanner detected that this file isn't safe to download.
We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.
