Figma добавила Dev Mode для веб-разработчиков

Аватарка пользователя Дух айтишной эмо школы
Отредактировано

Анонсирован режим Dev Mode, который позволяет получить код CSS из макетов в Figma. Функция бесплатна до 2024 года для всех пользователей.

4К открытий7К показов
Figma добавила Dev Mode для веб-разработчиков

Анонсирован режим Dev Mode, который позволяет получить код CSS из макетов в Figma. В компании рассказали, что платными планами Figma пользуется больше веб-разработчиков, чем дизайнеров, поэтому они решили добавить Dev Mode.

Будете пользоваться Figma Dev Mode?
Да, прикольная функция
Я и раньше пользовался экспортом CSS в Figma
Нет, функция — отстой
Хочу посмотреть результаты
С помощью Dev Mode мы видим огромную возможность быстро и эффективно удовлетворить потребности разработчиков – так же, как мы сделали с дизайнерами, когда мы начали разрабатывать Figma. Чем проще командам проектировать, документировать, находить и реализовывать высококачественные дизайны без потери работы и контакта друг с другом, тем более успешные будут результаты.

Режим разработчика (Dev Mode) похож на инструмент просмотра кода в браузере, только работает с файлами дизайна в Figma.

Наведя и щелкнув по элементу дизайна в Figma, можно получить и экспортировать всю необходимую информацию для веб-разработки — размеры, спецификации и ресурсы —, а также получить дополнительный контекст из вашей дизайн-системы. Также в Dev Mode можно переключаться между единицами измерения в соответствии с кодовой базой.

Во многом Figma Dev Mode был вдохновлён инструментом разработки Chrome Dev Tools.

Код в Dev Mode настраивается под выбранный язык программирования. При этом Figma учитывает, что код не является готовым к использованию. Поэтому Figma показывает модель блочной CSS с древовидной структурой. 

Улучшить вывод кода можно при помощи плагинов. Вы можете управлять проектами с помощью Jira, Linear и GitHub. Storybook поможет ссылаться на кодовую базу, в контексте самого дизайна.

Figma добавила Dev Mode для веб-разработчиков 1

Также плагины для генерации кода от AWS Amplify Studio, Google Relay и Anima помогут вам настраивать вывод кода – вы даже можете создать свой собственный плагин, основанный на вашем уникальном рабочем процессе.

С помощью расширения для Visual Studio Code вы можете использовать все возможности Dev Mode прямо в редакторе кода, чтобы просматривать дизайны, видеть уведомления и комментарии.

Расширение для Visual Studio Code также автоматически заполняет код на основе дизайна, который вы проверяете, что помогает вам работать гораздо быстрее.

Dev Mode и Figma для Visual Studio Code находятся в бета-версии и доступны бесплатно всем пользователям до конца 2023 года. Начиная с 2024 года, потребуется платный план. Цена Dev Mode составит $25 в месяц за аккаунт в рамках Организации и $35 в месяц в рамках предприятия.

Следите за новыми постами
Следите за новыми постами по любимым темам
4К открытий7К показов