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

Подписаться 41 тыс.

Просмотров 17 тыс.

50% 1

В этом видео разберемся с основами переменных в Фигме: как их создавать, применять, группировать, какие типы переменных доступны на данный момент, что такое режимы и как их использовать. И самое главное - для чего нам все это нужно?
Мои курсы:
Курс по Фигме - 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

Опубликовано:

11 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 70

@DenisTensor 21 день назад

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

@freyka5844 2 месяца назад

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

@natashazharova3959 11 месяцев назад

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

@mykolagolovko6473 10 месяцев назад

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

@user-td2hy1ri1k 11 месяцев назад

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

@user-jv9lz3fg5t 6 месяцев назад

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

@accredoo 8 месяцев назад

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

@user-pooser164 2 месяца назад

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

@disarto.digital 2 месяца назад

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

@Vikizza 2 месяца назад

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

@arcobalena789 11 месяцев назад

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

@mashalubitkashu 11 месяцев назад

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

@valeriyavaleriya1926 10 месяцев назад

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

@victoriamilko783 11 месяцев назад

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

@MFilippova 4 месяца назад

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

@urhorattel 10 месяцев назад

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

@user-ty7ol3dl6d 10 месяцев назад

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

@Maryana_B 11 месяцев назад

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

@helena_selena 11 месяцев назад

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

@TZharova 7 месяцев назад

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

@sergeyfoxy 11 месяцев назад

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

@disarto.digital 11 месяцев назад

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

@user-yc7tn4ro3x 11 месяцев назад

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

@user-rg2xc1zz6w 10 месяцев назад

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

@tadergunova1045 7 месяцев назад

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

@evgeniikhomutov565 11 месяцев назад

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

@JuliaRobots 2 месяца назад

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

@user-pu8mv9ps3s 7 месяцев назад

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

@user-hc8ng1ez7v 10 месяцев назад

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

@user-zr8xv5on7o 11 месяцев назад

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

@nikita_tkacuk 11 месяцев назад

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

@disarto.digital 11 месяцев назад

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

@user-nm6yg3wc2s 3 месяца назад

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

@maxsak1650 11 месяцев назад

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

@Passificspring 8 месяцев назад

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

@disarto.digital 8 месяцев назад

Спасибо! 😄

@VyacheslavOleynik 11 месяцев назад

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

@MrNikolaevv 11 месяцев назад

Годно 👍

@alexlisouski4069 9 месяцев назад

лучший😊

@Roman_851 11 месяцев назад

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

@renk_vladyslav 11 месяцев назад

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

@disarto.digital 11 месяцев назад

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

@nfrigus 11 месяцев назад

спасибо!

@alexandrava8692 5 месяцев назад

спасибо

@keyesfro3094 11 месяцев назад

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

@disarto.digital 11 месяцев назад

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

@IvanLao 11 месяцев назад

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

@disarto.digital 11 месяцев назад

Все верно 🙂

@user-rv9vk6bk6x 11 месяцев назад

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

@disarto.digital 11 месяцев назад

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

@95muric 6 месяцев назад

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

@asukaayanami 11 месяцев назад

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

@disarto.digital 11 месяцев назад

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

@asukaayanami 11 месяцев назад

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

@anastasiiayefimenko9942 11 месяцев назад

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

@asukaayanami 11 месяцев назад

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

@DigitalismSchool 11 месяцев назад

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

@disarto.digital 11 месяцев назад

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

@valet4364 11 месяцев назад

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

@Skorpion-13 2 месяца назад

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

@user-uz6sr7oe6d 11 месяцев назад

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

@user-xd4bl1gd1v 10 месяцев назад

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

@Five312J 11 месяцев назад

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

@Roman_851 11 месяцев назад

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

@disarto.digital 11 месяцев назад

Значения 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 11 месяцев назад

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

@anastasiiayefimenko9942 11 месяцев назад

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

@disarto.digital 11 месяцев назад

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