Обновление 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 и прочие вещи - для дизайнера это все весьма специфические знания.