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

[@amileburger2634]

Как же вы доступно объяснили такую нелегкую тему!!!💥 Благодарность огромная за данный ролик

[@PolBet699]

Начала смотреть и поняла, что слышу невероятно знакомый голос. Оказалось это голос преподавателя по Фигме, курс которого я купила три года назад и прохожу только сейчас :) Он открыт у меня в соседней вкладке и я прохожу его последние несколько недель. В нет переменных, потому что они появились только в 23-м, пришлось искать про них информацию. Вот так встреча!

[@disarto.digital]

Рад встрече! Кстати, информация по переменным в курсе есть. В последней главе "обновления Figma" 🙃

[@freyka5844]

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

[@DenisTensor]

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

[@natashazharova3959]

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

[@user-pooser164]

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

[@disarto.digital]

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

[@mykolagolovko6473]

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

[@TatianaSuslova-z4n]

Большое спасибо! Как раз не могла разобраться, в чем же разница между стилями и переменными. Классные работы на Бе, подписка;)

[@disarto.digital]

Спасибо!

[@pavelpchelintsev6444]

Спасибо большое! Грамотная подача сложного материала

[@АннаЧурсина-л5н]

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

[@НаринэСветлова]

Спасибо! Прекрасное, логично выстроенное объяснение🎉🎉🎉

[@accredoo]

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

[@MFilippova]

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

[@Vikizza]

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

[@bibliophile6675]

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

[@arcobalena789]

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

[@nikita_tkacuk]

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

[@disarto.digital]

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

[@ЭдгарБеккер-ъ3л]

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

[@sergeyfoxy]

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

[@disarto.digital]

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

[@ВадимПаранин-у8ц]

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

[@tadergunova1045]

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

[@Passificspring]

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

[@disarto.digital]

Спасибо! 😄

[@valeriyavaleriya1926]

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

[@Sersimik]

Смотрел ролик и не понимал для чего такую систему создавать когда у тебя сайт из 10 страниц. :) Но в конце услышал то о чем я сам мог предположить, что данный прием больше подходит для больших дизайн систем и для больших продуктовых проектов, а не для проектов где 3 кнопки одного стиля и 4 стиля текста. Но послушать было интересно. Меня больше волнует другой вопрос на протяжении уже 16 лет, соразмерность элементов на разных носителях и разрешениях. Смотрю современные интерфейсы, сайты и везде одна и та же проблема на большом разрешении гигантизм, а на маленьком ничего не видно или сетка меняется на такую что логика десктопной версии уходит на задний план, даже при адаптации в разные разрешения выглядит по разному все, например в меньшем разрешении смотрится более лаконично, а в большом упаси меня господи. И еще может сталкивались с таким моментом на своем пути что на фронте после верстки отличается макет, хотя все сделано по киту.

[@ОльгаГриценко-ч1н]

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

[@helena_selena]

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

[@mashalubitkashu]

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

[@ИльясИльясов-б8м]

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

[@evgeniikhomutov565]

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

[@TZharova]

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

[@ЕкатеринаЗиберт-у1ю]

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

[@victoriamilko783]

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

[@Maryana_B]

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

[@JuliaRobots]

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

[@maxsak1650]

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

[@keyesfro3094]

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

[@disarto.digital]

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

[@renk_vladyslav]

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

[@disarto.digital]

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

[@НатальяОвчинникова-х4д5н]

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

[@ЯрославаАрхипцева]

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

[@IvanLao]

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

[@disarto.digital]

Все верно 🙂

[@ДмитрийЗинов-ь7ф]

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

[@alexlisouski4069]

лучший😊

[@alexandrava8692]

спасибо

[@VyacheslavOleynik]

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

[@jane_1305]

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

[@ДмитрийБорданов]

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

[@disarto.digital]

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

[@MrNikolaevv]

Годно 👍

[@nfrigus]

спасибо!

[@95muric]

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

[@Roman_851]

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

[@DigitalismSchool]

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

[@disarto.digital]

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

[@asukaayanami]

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

[@disarto.digital]

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

[@asukaayanami]

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

[@anastasiiayefimenko9942]

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

[@asukaayanami]

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

[@valet4364]

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

[@Skorpion-13]

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

[@ИльяИванищин]

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

[@IGUXdesign]

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

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

[@imval3266]

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

[@bigpunchline]

Кринж

[@urhorattel]

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