{"id":14284,"url":"\/distributions\/14284\/click?bit=1&hash=82a231c769d1e10ea56c30ae286f090fbb4a445600cfa9e05037db7a74b1dda9","title":"\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0444\u0438\u043d\u0430\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0430 \u0442\u0430\u043d\u0446\u044b \u0441 \u0441\u043e\u0431\u0430\u043a\u0430\u043c\u0438","buttonText":"","imageUuid":""}

Обновление Figma. Variables в типографике и градиентах, Code Connect

Нам начали отсыпать фичи еще до ConFig, который пройдёт в 26-27 июня. Как обычно сжато кратко пробежимся по ним.

Я как раз писал статью по дизайн системам в ключе как это выглядит сейчас, какие есть возможности, какая структура переменных, какими способами синхронизациями пользуюсь (подпишись чтобы не пропустить)... и я видел эту статью как некий чекпоинт и размышлял над тем как это всё может измениться после летнего ConFig. Но тут ребята выкатили пару обновлений и мне прийдется и переписывать статью и обновлять библиотеку ❤.

Градинеты

Тут я думаю не нужно отдельных пояснений и ясно все по одной картинке. Наконец то можно вводить координаты цвет и назначать цвета из библиотеки.

Несколько жирных НО

  • НО нельзя управлять прозрачностью. То есть вы не можете выбрать цвет из библиотеки и поставить ему прозрачность 0. Хранить токен цвета с прозрачностью ноль чисто для градиента - как по мне будет не очень. Возможно прийдется в некоторых местах оставлять лайфхак с масками, чтобы получать градиенты уходящие в прозрачность.
  • НО вы не можете сохранить градиент как токен. Какое-то время назад нам дали возможность сохранять токен цвета с прозрачностью (изначально были только solid цвета), но градиенты прийдется все так же хранить в локальных стилях.

Так что улучшение конечно идет в правильную сторону, но пока... первое "WOW" сменяется не "meh". Если интересно как я делал градиенты до этого - пишите, расскажу в комментах.

Типографика

По порядку:

  • Типографика по прежнему хранится как локальные стили. Просто теперь вы можете заводить токены и привязывать их к этим стилям. В целом при правильной структуре коллекций это будет даже удобнее.
  • Токен отвечающий за выбор шрифта это просто параметр string в который вписывается имя шрифта.
  • Токен начертания можно задать либо так же через string (Regular, Medium и т/д), либо через параметр nubmer. То есть для некоторых шрифтов можно будет задавать уже конкретные font-weight как в css.
  • Остальные токены (font-size, line-heigh и т/д) задаются numbers.

Code Connect

Тут сильно расписывать не буду. Я пока в процессе изучения вообще того как работает REST API фигмы, VS Code и прочие вещи - для дизайнера это все весьма специфические знания.

0
Комментарии
-3 комментариев
Раскрывать всегда