Инструкция: как и чем заменить Dev Mode в Figma!

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

Мой YouTube и Telegram каналы.

Инструкция: как и чем заменить Dev Mode в Figma!
Инструкция: как и чем заменить Dev Mode в Figma!

Что такое Dev mod?

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

Видео по работе dev mod в figma

Минимальная стоимость подписки с встроенным Dev Mod составляет 12 долларов в месяц.

Стоимость dev mod в figma
Стоимость dev mod в figma

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

1) Плагин Figma to Code

Figma to Code
Figma to Code

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

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

2) Плагин Inspect Styles

Плагин Inspect Styles
Плагин Inspect Styles

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

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

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

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

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

3) Pixso

Pixso
Pixso

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

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

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

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

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

1919
8 комментариев

Pixso вроде как китайцы.

5
Ответить

с чего бы pixso - российский?)) давно стал?)

1
Ответить

Copyright © 2024 Shenzhen Pixso Technology
Co. Ltd. All rights reserved.

Ответить

Пиксо бесплатен только первый месяц.

1
Ответить

Полезно!!

Ответить

Студенческие аккаунты еще работали

Ответить

Спасибо за статью.

Ответить