Замена Dev Mode в Figma: инструкция и методы

31 января Dev Mode в Figma стал доступен только для пользователей с подпиской. Если вы не работаете в компании или просто не хотите оформлять подписку, придётся искать другой способ выгрузить код из макета. В этой статье я собрал три доступных решения, которые могут вам помочь.

Что такое Dev mod?

Dev Mode — это тот новый режим, который умеет удобно сразу показывать весь нужный CSS и свойства в одном месте.

Чем заменить Dev Mod в Figma?

1) Плагин Figma to Code

Установите плагин по ссылке.

Нажмите правой кнопкой мыши по макету и перейдите Plugins → Figma to Code. Выделите любой объект на макете, и в появившемся окне отобразится его код.

2) Плагин Inspect Styles

Установите плагин по ссылке.

Нажмите правой кнопкой мыши по макету и перейдите Plugins → Inspect Styles. В появившемся окне во вкладке «Основное» плагин показывает свойства всех шрифтов на странице и предлагает сделать два из них главными.

Во вкладке «Стили» — CSS-код для выделенных элементов. Если выделить фрейм с иконкой, то плагин выдаст SVG-код, который можно сразу скопировать.

Во вкладке «Настройки» можно поменять, например, единицы измерения на rem, добавить технические комментарии, изменить вывод свойства line-height.

Inspect Styles работает только с CSS. Если вы работаете только над сайтами, то этот плагин — лучшее решение из бесплатных.

3) Pixso

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

Создайте аккаунт в Pixso.

Сначала сохраните локальную копию оригинального файла. В Figma откройте любой макет и перейдите File → Save local copy…

Перейдите в Pixso, создайте новый документ и в бургер-меню перейдите «Импорт» → «Figma файл».

На боковой панели настроек перейдите в Handoff и нажмите кнопку Enter Developer Mode. Она работает так же, как в Figma, — можно выбрать язык, посмотреть отступы и стили.

Источник