Очень большое обновление Figma – экспресс-тест

22 Июнь 2023

Владимир Шкуратов

Проектный менеджер TexTerra

Время чтения: 5 минут

Нам представили Dev Mode, интеграции с GitHub, Jira, Storybook, плагин для VSCode, AI (без него сейчас никуда) и многое другое.

“Переосмысление дизайна и разработки” — с таким лозунгом было представлено свежее обновление Figma 21 июня 2023 года на конференции Config 2023.

Hello, Dev Mode!

Dev Mode или режим разработчика позволяет по щелчку тумблера включить пространство, которое упрощает переход от проектирования к разработке.

Обновленный режим Inspect

Новый Inspect позволяет просматривать размеры и стили, а также получать готовый код.

При помощи таких плагинов как Anima и Figma to Code появилась возможность сразу получить код в разных вариациях:

Стандартный HTML код;
CSS стили;
Код для TailwindCSS;
Код для Flutter;
Код для SwiftUI (среда для разработки на iOS, iPadOS, watchOS, tvOS и macOS от Apple);
Код React (JSX);
Код TypeScript (TSX)

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

Область применения и потенциал функции поражает, но не стоит поддаваться излишней радости (хотя и очень хочется), ведь Dev Mode находится в бете и работает не всегда корректно. Результат зачастую нужно редактировать, если не переделывать заново. Но потенциал огромен.

Функционал Dev Mode уже доступен всем желающим. Пощупать его можно в демо-файле.

Статусы

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

Новый Auto Layout

Появились две функции: Wrap и Max/Min. Их принцип довольно прост. Wrap позволяет переносить элементы списка на следующую строку. Max/Min позволяет устанавливать максимальное/минимальное значение ширины/высоты родительского блока, а дочерние элементы будут подстраиваться автоматически. Пощупать функцию можно также в демке.

Наконец-то! Превью шрифтов!

Отсутствие превью бесило до коликов, но наконец-то появился предварительный просмотр шрифтов, улучшенный поиск и фильтры. Аллилуйя!

Плагин для VSCode

Figma для VS Code позволяет перемещаться по файлам дизайн-макета, просматривать их и отслеживать изменения — и все это, не выходя из текстового редактора.

Искусственный интеллект

Figma купила компанию Diaram и пообещала в ближайшее время поведать, как же все-таки AI будет интегрирован в программу. Но уже сейчас известно, что взаимодействие с нейросетью будет осуществляться посредством промптов.