Figma is free to use. Sign up here:
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:
Learn about prototyping with variables with our other tutorial:
Learn more about variables in Figma with our additional playground file:
Learn more about design systems in Figma:
Help center articles:
Guide to variables:
Overview of variables:
Create and manage variables:
Apply variables to designs:
Modes for variables:
For more information on using variables with API and development, check out the links here:
- REST API: #variables
- Plugin API docs:
- Import/export variables code sample
- Styles to variables convert code sample
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:
Instagram:
LinkedIn:
Figma forum:
____________________________________________________
#Figma #Config #Config2023 #Variables #Designtokens #Tutorial #design #tips #DesignSystems
1 просмотр
833
254
22 часа назад 00:14:52 1
Уроки дизайна в Figma и Photoshop 2022 | Делаем постер за 14 минут | Figma Poster Design Tutorial
22 часа назад 00:14:54 1
Уроки дизайна в Figma и Photoshop - делаю постер за 14 минут | Figma Poster Design Tutorial 2022
22 часа назад 00:17:17 1
Уроки Figma и Photoshop - Дизайн Постера за 17 минут в фигма и фотошоп | Figma Design Tutorial 2022
22 часа назад 00:14:00 1
Дизайн постера в Figma и Photoshop 2022 | Уроки Фигма | Figma & Photoshop Poster Design Tutorial
4 дня назад 00:10:01 1
🔥 Как скачать фигму и какие тарифы Figma. Бесплатный подробный новый курс по фигме. Фигма с нуля
5 дней назад 00:25:56 1
🔥 Текст и типографика в Фигме: выравнивания, vertical trim Figma, список, абзацы. Фигма с нуля
5 дней назад 00:08:40 12
🔥 Математика в Figma: как формулы помогают экономить время и настраивать сетку. Фигма с нуля
5 дней назад 00:23:12 1
🔥 Как правильно копировать в Фигме? Как сделать скриншот области прямо в Figma? Фигма с нуля
2 недели назад 00:05:07 1
Dropdown menu in Figma
2 недели назад 00:02:04 1
Как сделать прокрутку в Фигма | Вертикальный и горизонтальный скролл в Figma
4 недели назад 00:17:32 17
🔥 Типографика в Фигме: красная строка, кривые, текст по кругу, вариативный шрифт. Фигма с нуля
4 недели назад 00:01:37 1
How to Fill a Vector in Figma
4 недели назад 00:08:04 1
Основы Figma за 8 минут | Курс по работе с Фигма 2022
1 месяц назад 00:31:42 1
📷 СОЗДАНИЕ КАРТИНКИ ДЛЯ ПОСТА СООБЩЕСТВА / FIGMA — ТУТОРИАЛ
1 месяц назад 00:02:47 1
Create a Button With a HOVER Functionality in 128 SECONDS (Figma Tutorial)
1 месяц назад 00:21:36 1
🔥 Всё про маски в Figma! Как готовить изображения на основе маски яркости. Фигма с нуля
1 месяц назад 00:04:39 1
Figma Tutorial: Prototyping & Transitions
1 месяц назад 01:20:43 3
Figma for Education: Animation basics in Figma
2 месяца назад 00:01:45 1
Image Zoom On Mouse Hover in Figma
2 месяца назад 00:13:30 1
How to make social media post design in Figma - Figma Design
2 месяца назад 00:35:09 1
Nike Spinning Animation in Figma
2 месяца назад 00:04:51 1
3D Carousel in PowerPoint Using Morph Transition
2 месяца назад 00:39:58 1
Food App Design In Figma | Figma Tutorial And Basic Prototype