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

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

С помощью Dev Mode мы видим огромную возможность быстро и эффективно удовлетворить потребности разработчиков – так же, как мы сделали с дизайнерами, когда мы начали разрабатывать Figma. Чем проще командам проектировать, документировать, находить и реализовывать высококачественные дизайны без потери работы и контакта друг с другом, тем более успешные будут результаты.

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

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

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

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

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

Также плагины для генерации кода от 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 в месяц в рамках предприятия.