Переменные в Фигме
Вставка
- Опубліковано 28 чер 2024
- В этом видео разберемся с основами переменных в Фигме: как их создавать, применять, группировать, какие типы переменных доступны на данный момент, что такое режимы и как их использовать. И самое главное - для чего нам все это нужно?
Мои курсы:
Курс по Фигме - 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
Большое спасибо за урок. Столько лет работаю в фигме, а до переменных только сейчас дошел. Очень полезно оказалось.
Спасибо, Максим! Ждем вторую часть про прототипы 🙌
Благодаря вашей подаче тема уже не кажется сложной и непонятной)
Огонь! Очень понятно и полезно, единственный урок на Ютубе, который затронул все тонкости новой фичи.
Очень полезно, информативно, спасибо за такой разбор❤
Я никак не могла понять, зачем мне нужны variables, если есть styles, components... Мучала chatGPT, Figma Playground, вспомнила про то, что есть такой блогер хороший - Disarto, который в свое время своими видео мне очень помогал получше понять все фигмовские нововедения. Открыла видео и с самого начала уже нравится что поясняется все, на примере со скруглениями уже начало мне легчать, ибо на этом примере, я поняла лучше, зачем мне эти variables. Спасибо за ваш канал и за ваш талант доступно пояснять сложные вещи! Смотрю дальше!
Спасибо за ваш тёплый комментарий! 🤗
Ура! Я так ждала когда выйдет твой разбор!
Спасибо, было полезно! А есть ли возможность сделать ролик, как теперь сочетать переменные с компонентами и вариантами, а то инструментарий теперь у Фигмы очень мощный стал, а как это грамотно применить и совместить не совсем ясно. А у тебя Максим очень хорошо получается объяснять:)
Да, со временем будут такие видео.
из фигмы делают второй фотошоп, много вещей стало можно делать несколькими функциями. Как итог фигма потеряла свою уникальность в виде предельной ясности и интуитивной понятности.
Супер! Спасибо за доходчивый разбор!
Спасибо за супер-полезные обзоры ❤
Как всегда, превосходно 🤩
Вот это я понимаю - уроки! Благодарю!
Макс, спасибо! Очень подробно и ясно! 🤟
Спасибо большое за такую полезность! Не знала раньше про такой подход. Отдельная благодарность за ваш подход к обучению - все продумано и очень понятно.🙏💣💥
Спасибо за такой подробный обзор! 🙌
Мега полезно и своевременно, спасибо!
От души спасибо!!!!! Все по полочкам❤
Спасибо за подробное объяснение)
Спасибо, отличное видео! Уже бежим делать! Хорошая подача, сложное стало понятным!
Мэджик какой-то! Теперь надо переваритьинформацию хах) Благодарю, Максим, за такое основательное объяснение))
Максим, спасибо большое за полезное видео)
Спасибо за видео!
Спасибо за обзор!
Супер! Спасибо!
Очень круто!!супер полезно
Большое спасибо)
Круто, спасибо!
Очень круто, спасибо!))
Коммент по поводу переноса варианта из одной коллекции в другую: по сути это и не нужно, т.к., мы можем создать например коллекцию чисел, в которой будут все используемые числа, а далее уже создавать отдельные коллекции для скруглений, отступов и т.д., переменные в которых будут ссылаться на коллекцию всех чисел используемых в проекте. Это же касается и цвета. Это намного структурнее будет, когда все цвета и числа будут отдельно лежать в родительских коллекциях, а остальные коллекции, как бы уточняющие, в каком случае какой цвет или число используется 😉
Система ведь может эволюционировать, и в какой-то момент потребуется перенести переменные из одной коллекции в другую, а к ним уже будут привязаны элементы дизайна. В таком случае без возможности перекидывать переменные между коллекциями будет очень больно.
Привет! Видео - огонь, чистая магия!
Но есть вопрос: зачем мы во второй части видео зашиваем цвета в primitives? Почему нельзя просто оставить в режимах dark/light как было в первой части видео?
Хотела ещё раз подписаться))
Макс, спасибо за разбор! Самому разобраться было бы не так просто)
Годно 👍
спасибо!
спасибо
смотрю тебя уже год пятый, типа того.
спасибо за очередной разбор. +
как всегда всё по госту )))
Спасибо! 😄
Спасибо за разбор!
Ждем когда типографику в переменные завезут.
Думаю как это все дело внедрить в то что уже есть. Видел кстати видео что можно стили старые очень быстро перевести в варианты, вроде даже на канале фигмы видео было.
Сейчас смотрю и кажется что нужно делать примитивы, токены и потом еще коллекции для компонентов разных настраивать. Чтобы этим можно было управлять логично и легко условно. Но к тому времени фигма выкатит еще обнов и снова все прийдется переделывать)
Профессии дизайнер дизайн-систем - быть)
Да, стили легко конвертятся в варианты 🙂.
лучший😊
Спасибо, ждем следующего разбора)
Спасибо! Очень понятно и наглядно объясняете :)
Про токены не совсем поняла, их целесообразно создавать, когда есть такая огромная Дизайн-система как у вас в примере?
Целесообразность токенов нужно оценивать в каждом конкретном случае 🙂. Просто если проект небольшой, то временные затраты на создание и настройку токенов скорее всего не окупятся.
Максим, спасибо за подробное видео!) как всегда все доходчиво и понятно. Только вот получается что все возможности «Переменных» можно использовать только при платном тарифе.
Все верно 🙂
Максим, а как создаться такие палитры оттенков как в Attlasian Design System? Где можно про это почитать или посмотреть?
Отличная тема для отдельного видео 🙂. Если кратко - то нужно определить ключевые цвета бренда и создать для них оттенки. Оттенки можно подобрать вручную или использовать плагины наподобие Foundation: Color Generator или Color Scale generator
Спасибо за урок. Жаль, что разработчики фигмы не догадались сделать возможность привязки переменной к размеру текста. Понятия не имею, почему они это не сделали
Думаю со временем сделают)
здравствуйте, а как в новой версии посмотреть положение элемента? раньше писалось типо top, left и так далее. где оно сейчас? было удобно копировать и вставлять, а сейчас там только размер элемента..
Если вы имеете в виду Constraints, то это никуда не делось. По-прежнему можно задать положение элемента внутри родительского фрейма.
@@disarto.digital нет, я про вкладку "инспект" (вроде так называлась). в которой писались в виде html характеристики обьекта, включая положение (left и top). сейчас этого нету( куда оно перенеслось? я потыкался и не нашел
@@asukaayanami теперь это отдельный мир для разработчика, в правом верхнем углу, дев мод. До конца 2023 года бесплатно.
@@anastasiiayefimenko9942 вообще не удобно если честно. потом вернется как было?
а как сделать если мы работаем с color style..или его уже не нужно?
А как применить коллекцию переменных на весь проект? Там где и библиотека и остальные файлы
нашли ответ на свой вопрос? потому что я сейчас задался и видимо это только локально
О вы еще в ютубе пропадали на долгое время
Плохо что убрали редактированме стиль цвета прямо в панели
Выглядит так, как будто обычные стили и не нужны теперь вовсе? Кто что думает? Пока выглядит так, что стили только для градиентов можно юзать
Попробую еще раз вопрос задать.
Как определяются параметры 50/100/300 у цвета) Не могу никак вспомнить. Это же не через Hex.
Значения 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
@@disarto.digital Спасибо большое!
@@disarto.digital А не на оборот? если "Red 1000" это бордовый, а 100 светло розовый)
@@anastasiiayefimenko9942 В модели HSL и Material 3 это работает именно так, как описано выше: 0 - черный, 100 - белый.
В Material 2, дизайн системе Atlassian и во многих других дизайн-системах шкала другая, где 0 - это максимально светлый оттенок, а 1000 - максимально темный.
Ссылки есть в комментарии выше, можете ознакомиться + посмотреть модель HSL в Фигме.
Сразу видно что адоб занялись программой и начали наконец то делать из костыля программу
Кринж