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

Рет қаралды 18,315

Күн бұрын

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

Пікірлер: 72

@DenisTensor 2 ай бұрын

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

@natashazharova3959 Жыл бұрын

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

@user-td2hy1ri1k Жыл бұрын

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

@user-pooser164 3 ай бұрын

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

@disarto.digital 3 ай бұрын

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

@arcobalena789 Жыл бұрын

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

@mashalubitkashu Жыл бұрын

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

@victoriamilko783 Жыл бұрын

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

@MFilippova 5 ай бұрын

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

@mykolagolovko6473 11 ай бұрын

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

@user-ty7ol3dl6d 11 ай бұрын

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

@valeriyavaleriya1926 Жыл бұрын

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

@urhorattel Жыл бұрын

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

@user-jv9lz3fg5t 7 ай бұрын

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

@Maryana_B Жыл бұрын

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

@TZharova 8 ай бұрын

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

@freyka5844 3 ай бұрын

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

@helena_selena Жыл бұрын

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

@Vikizza 3 ай бұрын

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

@JuliaRobots 3 ай бұрын

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

@user-rg2xc1zz6w Жыл бұрын

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

@bibliophile6675 23 күн бұрын

всё супер понятно, спасибо огромноее😊

@evgeniikhomutov565 Жыл бұрын

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

@user-nm6yg3wc2s 4 ай бұрын

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

@accredoo 9 ай бұрын

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

@user-hc8ng1ez7v 11 ай бұрын

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

@user-zr8xv5on7o Жыл бұрын

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

@VyacheslavOleynik Жыл бұрын

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

@MrNikolaevv Жыл бұрын

Годно 👍

@nikita_tkacuk Жыл бұрын

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

@disarto.digital Жыл бұрын

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

@sergeyfoxy Жыл бұрын

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

@disarto.digital Жыл бұрын

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

@user-yc7tn4ro3x Жыл бұрын

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

@user-pu8mv9ps3s 9 ай бұрын

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

@maxsak1650 Жыл бұрын

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

@alexlisouski4069 11 ай бұрын

лучший😊

@nfrigus Жыл бұрын

спасибо!

@alexandrava8692 7 ай бұрын

спасибо

@renk_vladyslav Жыл бұрын

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

@disarto.digital Жыл бұрын

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

@Passificspring 9 ай бұрын

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

@disarto.digital 9 ай бұрын

Спасибо! 😄

@tadergunova1045 8 ай бұрын

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

@keyesfro3094 Жыл бұрын

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

@disarto.digital Жыл бұрын

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

@Roman_851 Жыл бұрын

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

@IvanLao Жыл бұрын

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

@disarto.digital Жыл бұрын

Все верно 🙂

@user-rv9vk6bk6x Жыл бұрын

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

@disarto.digital Жыл бұрын

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

@jane_1305 Күн бұрын

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

@asukaayanami Жыл бұрын

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

@disarto.digital Жыл бұрын

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

@asukaayanami Жыл бұрын

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

@anastasiiayefimenko9942 Жыл бұрын

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

@asukaayanami Жыл бұрын

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

@DigitalismSchool Жыл бұрын

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

@disarto.digital Жыл бұрын

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

@95muric 7 ай бұрын

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

@valet4364 Жыл бұрын

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

@Skorpion-13 4 ай бұрын

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

@user-uz6sr7oe6d Жыл бұрын

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

@user-xd4bl1gd1v Жыл бұрын

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

@Five312J Жыл бұрын

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

@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 в Фигме.