Обновление Figma DevMode

В блоге Figma рассказали про обновление режима DevMode, предназначенного для разработчиков. Команда проекта рассказала, что два месяца собирала отзывы и исправляла ошибки, которые находили пользователи.

В начале июля Figma запустила бета-тест DevMode. Во время презентации представители компании рассказали, что режим призван устранить разрыв между дизайнерами и программистами. В DevMode добавили больше информации для разработчиков и интегрировали популярные сервисы и инструменты для совместной работы. Теперь Figma сообщила о первом крупном обновлении DevMode, включающем в себя более 200 изменений.

Основные изменения в Figma DevMode:

• метки о готовности для вёрстки можно добавлять к компонентам, фреймам и холстам;

• доступ к сеткам и режиму компоновки элементов можно получить из меню «Вид»;

• появился режим сравнения компонентов с базовыми шаблонами;

• по просьбам пользователей вернули  Android XML и iOS UIKit в качестве вариантов кода разметки;

• добавили поддержку истории версий дизайна;

• если в дизайне используются компоненты из сторонних библиотек, то Figma показывает их названия;

• в песочницу компонентов добавили новые элементы, поэтому разработчики могут изучать их и экспериментировать;

• в меню выбора единицы измерения можно указать, чтобы rem показывались только для текста, а данные об остальных компонентах выводились в пикелях;

• с помощью Shift можно выбирать сразу несколько объектов для одновременного экспорта с холста;

• все уведомления из учётной записи Figma теперь отображаются в VS Code;

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

• теперь Figma автоматически предлагает названия переменных для необработанных значений, чтобы дизайнеру не пришлось делать это вручную;

• в CSS можно использовать padding-top, -bottom, -left и -right даже если указано только одно значение;

• во фрагментах кода теперь показываются значения свойств font-style, line-height и font-weight;

• значения в line-height выводятся в пикселях и процентах;

• в генераторе CSS-кода появилась поддержка свойств font-feature-settings, font-variant-numeric и font-kerning для шрифтов OpenType;

• добавили поддержку свойств min-width, max-width, min-height и max-height.

Обновление DevMode уже доступно всем пользователям Figma. До конца 2023 года режим для разработчиков и фирменное расширение для VS Code будут бесплатными в рамках открытого бета-теста. После этого потребуется наличие премиальной подписки.