Переменные в Фигме

В этом видео разберемся с основами переменных в Фигме: как их создавать, применять, группировать, какие типы переменных доступны на данный момент, что такое режимы и как их использовать. И самое главное - для чего нам все это нужно?
Мои курсы:
Курс по Фигме - cloudlessons.ru/v/400/
Курс по UI/UX дизайну - • Анонс курса по UI/UX д...
00:00 - Что такое переменная
00:26 - Где находятся переменные в Фигме
02:49 - Типы переменных String (строка), Number (цвет) и Color (цвет)
05:05 - Задаем отступы в Auto Layout с помощью числовых переменных
06:01 - Режимы переменных
09:14 - Группировка и организация переменных
12:16 - Пример адаптации UI элемента к разным разрешениям экрана
15:15 - Пример создания разных языковых версий для UI элемента
17:41 - Тип переменных Boolean
19:47 - Настройки переменных
22:22 - Токены и тёмная тема для приложения
29:14 - Пример использования токенов в дизайн-системе Atlassian
31:01 - Заканчиваем создание тёмной темы для приложения
Подписывайтесь на соцсети:
Телеграм: t.me/uiux_dsgn
Инстаграм: / disarto.digital
Behance: www.behance.net/Dexo
Dribbble: dribbble.com/Dexo

[@DenisTensor]

Большое спасибо за урок. Столько лет работаю в фигме, а до переменных только сейчас дошел. Очень полезно оказалось.

[@natashazharova3959]

Спасибо, Максим! Ждем вторую часть про прототипы 🙌

[@freyka5844]

Благодаря вашей подаче тема уже не кажется сложной и непонятной)

[@mykolagolovko6473]

Огонь! Очень понятно и полезно, единственный урок на Ютубе, который затронул все тонкости новой фичи.

[@user-td2hy1ri1k]

Очень полезно, информативно, спасибо за такой разбор❤

[@user-pooser164]

Я никак не могла понять, зачем мне нужны variables, если есть styles, components... Мучала chatGPT, Figma Playground, вспомнила про то, что есть такой блогер хороший - Disarto, который в свое время своими видео мне очень помогал получше понять все фигмовские нововедения. Открыла видео и с самого начала уже нравится что поясняется все, на примере со скруглениями уже начало мне легчать, ибо на этом примере, я поняла лучше, зачем мне эти variables. Спасибо за ваш канал и за ваш талант доступно пояснять сложные вещи! Смотрю дальше!

[@disarto.digital]

Спасибо за ваш тёплый комментарий! 🤗

[@sergeyfoxy]

Спасибо, было полезно! А есть ли возможность сделать ролик, как теперь сочетать переменные с компонентами и вариантами, а то инструментарий теперь у Фигмы очень мощный стал, а как это грамотно применить и совместить не совсем ясно. А у тебя Максим очень хорошо получается объяснять:)

[@disarto.digital]

Да, со временем будут такие видео.

[@user-yc7tn4ro3x]

из фигмы делают второй фотошоп, много вещей стало можно делать несколькими функциями. Как итог фигма потеряла свою уникальность в виде предельной ясности и интуитивной понятности.

[@mashalubitkashu]

Спасибо за супер-полезные обзоры ❤

[@victoriamilko783]

Супер! Спасибо за доходчивый разбор!

[@user-jv9lz3fg5t]

Спасибо большое за такую полезность! Не знала раньше про такой подход. Отдельная благодарность за ваш подход к обучению - все продумано и очень понятно.🙏💣💥

[@Vikizza]

Спасибо, отличное видео! Уже бежим делать! Хорошая подача, сложное стало понятным!

[@arcobalena789]

Ура! Я так ждала когда выйдет твой разбор!

[@valeriyavaleriya1926]

Спасибо за такой подробный обзор! 🙌

[@urhorattel]

Макс, спасибо! Очень подробно и ясно! 🤟

[@accredoo]

Мэджик какой-то! Теперь надо переваритьинформацию хах) Благодарю, Максим, за такое основательное объяснение))

[@MFilippova]

Вот это я понимаю - уроки! Благодарю!

[@Maryana_B]

Мега полезно и своевременно, спасибо!

[@TZharova]

От души спасибо!!!!! Все по полочкам❤

[@helena_selena]

Спасибо за подробное объяснение)

[@user-ty7ol3dl6d]

Как всегда, превосходно 🤩

[@user-rg2xc1zz6w]

Максим, спасибо большое за полезное видео)

[@tadergunova1045]

Привет! Видео - огонь, чистая магия! Но есть вопрос: зачем мы во второй части видео зашиваем цвета в primitives? Почему нельзя просто оставить в режимах dark/light как было в первой части видео?

[@evgeniikhomutov565]

Спасибо за видео!

[@JuliaRobots]

Супер! Спасибо!

[@user-hc8ng1ez7v]

Очень круто!!супер полезно

[@maxsak1650]

Макс, спасибо за разбор! Самому разобраться было бы не так просто)

[@user-pu8mv9ps3s]

Хотела ещё раз подписаться))

[@nikita_tkacuk]

Очень круто, спасибо!)) Коммент по поводу переноса варианта из одной коллекции в другую: по сути это и не нужно, т.к., мы можем создать например коллекцию чисел, в которой будут все используемые числа, а далее уже создавать отдельные коллекции для скруглений, отступов и т.д., переменные в которых будут ссылаться на коллекцию всех чисел используемых в проекте. Это же касается и цвета. Это намного структурнее будет, когда все цвета и числа будут отдельно лежать в родительских коллекциях, а остальные коллекции, как бы уточняющие, в каком случае какой цвет или число используется 😉

[@disarto.digital]

Система ведь может эволюционировать, и в какой-то момент потребуется перенести переменные из одной коллекции в другую, а к ним уже будут привязаны элементы дизайна. В таком случае без возможности перекидывать переменные между коллекциями будет очень больно.

[@Roman_851]

Спасибо, ждем следующего разбора)

[@user-zr8xv5on7o]

Спасибо за обзор!

[@user-nm6yg3wc2s]

Большое спасибо)

[@VyacheslavOleynik]

Круто, спасибо!

[@dimayakushev]

смотрю тебя уже год пятый, типа того. спасибо за очередной разбор. + как всегда всё по госту )))

[@disarto.digital]

Спасибо! 😄

[@renk_vladyslav]

Спасибо за разбор! Ждем когда типографику в переменные завезут. Думаю как это все дело внедрить в то что уже есть. Видел кстати видео что можно стили старые очень быстро перевести в варианты, вроде даже на канале фигмы видео было. Сейчас смотрю и кажется что нужно делать примитивы, токены и потом еще коллекции для компонентов разных настраивать. Чтобы этим можно было управлять логично и легко условно. Но к тому времени фигма выкатит еще обнов и снова все прийдется переделывать) Профессии дизайнер дизайн-систем - быть)

[@disarto.digital]

Да, стили легко конвертятся в варианты 🙂.

[@nfrigus]

спасибо!

[@keyesfro3094]

Спасибо! Очень понятно и наглядно объясняете :) Про токены не совсем поняла, их целесообразно создавать, когда есть такая огромная Дизайн-система как у вас в примере?

[@disarto.digital]

Целесообразность токенов нужно оценивать в каждом конкретном случае 🙂. Просто если проект небольшой, то временные затраты на создание и настройку токенов скорее всего не окупятся.

[@IvanLao]

Максим, спасибо за подробное видео!) как всегда все доходчиво и понятно. Только вот получается что все возможности «Переменных» можно использовать только при платном тарифе.

[@disarto.digital]

Все верно 🙂

[@MrNikolaevv]

Годно 👍

[@user-rv9vk6bk6x]

Максим, а как создаться такие палитры оттенков как в Attlasian Design System? Где можно про это почитать или посмотреть?

[@disarto.digital]

Отличная тема для отдельного видео 🙂. Если кратко - то нужно определить ключевые цвета бренда и создать для них оттенки. Оттенки можно подобрать вручную или использовать плагины наподобие Foundation: Color Generator или Color Scale generator

[@95muric]

а как сделать если мы работаем с color style..или его уже не нужно?

[@alexandrava8692]

спасибо

[@alexlisouski4069]

лучший😊

[@asukaayanami]

здравствуйте, а как в новой версии посмотреть положение элемента? раньше писалось типо top, left и так далее. где оно сейчас? было удобно копировать и вставлять, а сейчас там только размер элемента..

[@disarto.digital]

Если вы имеете в виду Constraints, то это никуда не делось. По-прежнему можно задать положение элемента внутри родительского фрейма.

[@asukaayanami]

@@disarto.digital нет, я про вкладку "инспект" (вроде так называлась). в которой писались в виде html характеристики обьекта, включая положение (left и top). сейчас этого нету( куда оно перенеслось? я потыкался и не нашел

[@anastasiiayefimenko9942]

@@asukaayanami теперь это отдельный мир для разработчика, в правом верхнем углу, дев мод. До конца 2023 года бесплатно.

[@asukaayanami]

@@anastasiiayefimenko9942 вообще не удобно если честно. потом вернется как было?

[@DigitalismSchool]

Спасибо за урок. Жаль, что разработчики фигмы не догадались сделать возможность привязки переменной к размеру текста. Понятия не имею, почему они это не сделали

[@disarto.digital]

Думаю со временем сделают)

[@valet4364]

А как применить коллекцию переменных на весь проект? Там где и библиотека и остальные файлы

[@Skorpion-13]

нашли ответ на свой вопрос? потому что я сейчас задался и видимо это только локально

[@user-xd4bl1gd1v]

Выглядит так, как будто обычные стили и не нужны теперь вовсе? Кто что думает? Пока выглядит так, что стили только для градиентов можно юзать

[@Five312J]

Плохо что убрали редактированме стиль цвета прямо в панели

[@user-uz6sr7oe6d]

О вы еще в ютубе пропадали на долгое время

[@Roman_851]

Попробую еще раз вопрос задать. Как определяются параметры 50/100/300 у цвета) Не могу никак вспомнить. Это же не через Hex.

[@disarto.digital]

Значения 50/100/300 и т.д. - это светлота цвета. В модели HSL это соотвественно буква L. Т.е. если в Фигме переключить с Hex на HSL, то это как раз будет последнее значение. Обычно используют 2 шкалы. Либо от 0 до 1000, либо от 0 до 100. Соответственно 0 - это черный, 100 или 1000 - белый. Например, в Google Material 2 используется шкала 0-1000, а в Material 3 уже 0-100 m2.material.io/design/color/the-color-system.html m3.material.io/styles/color/the-color-system/key-colors-tones

[@Roman_851]

@@disarto.digital Спасибо большое!

[@anastasiiayefimenko9942]

@@disarto.digital А не на оборот? если "Red 1000" это бордовый, а 100 светло розовый)

[@disarto.digital]

@@anastasiiayefimenko9942 В модели HSL и Material 3 это работает именно так, как описано выше: 0 - черный, 100 - белый. В Material 2, дизайн системе Atlassian и во многих других дизайн-системах шкала другая, где 0 - это максимально светлый оттенок, а 1000 - максимально темный. Ссылки есть в комментарии выше, можете ознакомиться + посмотреть модель HSL в Фигме.

[@imval3266]

Сразу видно что адоб занялись программой и начали наконец то делать из костыля программу

[@bigpunchline]

Кринж