Есть ли достойные и бесплатные альтернативы Dev Mode в Figma? Рассказываем в обзоре

В прошлом году вышел релиз режима Dev Mode в Figma. Он обеспечил плавный переход от дизайна к разработке и пришелся по вкусу специалистам разного уровня. Увы, радость пользователей была недолгой — теперь этот режим входит в подписку и за его использование нужно платить. В тексте рассказываем о бесплатных альтернативах.

C 31 января 2024 года Figma закрыла Dev Mode для бесплатного тарифа. Чтобы продолжить пользоваться режимом, нужно купить подписку за 12 долларов в месяц. Однако для многих начинающих разработчиков и верстальщиков эта плата будет нецелесообразной.

В Dev Mode доступен код элементов разных платформ, который можно брать за основу для разработки. Можно создавать плагины с генерацией кастомного кода под различные фреймворки. Ну, и конечно же, интеграция с VSCode, позволяющая смотреть дизайн непосредственно в среде разработки.

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

Но если все же хочется упростить себе жизнь — есть несколько способов обойти ограничения.

Для установки переходим во вкладку Plugins и вводим Inspect Styles.

После запуска плагина появляется информация о том, какие переменные мы можем использовать.

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

Перейдем к вкладке Стили. Для этого выберем конкретный элемент в макете, например, текстовый блок. Здесь указывается и числовое значение начертания шрифта: font weight. Полезная фича, когда кроме Regular (400) трудно что-то вспомнить. Если в тексте есть дополнительные цвета, они также отдельно прописываются.

Посмотрим, что будет с другим типом объекта. Выбираем векторный элемент и получаем SVG-разметку. Круто? Вполне.

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

MockPlus DT — веб-платформа для совместного проектирования интерфейсов. Короче говоря, китайская альтернатива Figma. Рассмотрим возможности приложения.

Регистрируемся и уже на главной странице видим кнопку импорта Figma-проектов. Да-да, это именно то, что нам нужно.

Переносим сюда проект из Figma, предварительно сохранив его в формате fig. Сразу сталкиваемся с проблемой: полетели шрифты. Возможно, это из-за использования браузерной версии, но бесплатной программной версии MockPlus DT не существует. Закроем глаза на эту неприятность и проверим тот самый Dev Mode.

Выбираем текстовый элемент. В панели справа появляются его базовые характеристики и CSS-код. Иногда здесь указывается лишняя информация — обязательно проверяйте.

Ситуация с векторными элементами слегка иная. SVG-код не отображается от слова совсем. Однако рано отчаиваться. Чтобы его увидеть, необходимо выйти из режима Dev Mode. Далее — кликнуть по объекту правой кнопкой мыши и найти Copy SVG-code.

В случае с растровыми изображениями — есть вопросы к CSS-коду: много бесполезной информации.

Из плюсов: можно посмотреть тени, прозрачность, градиенты и другие эффекты. Доступны характеристики autolayout и слоев с кнопками (padding & border).

Из минусов: при импорте проекта не подгружаются шрифты, много лишнего в коде. Неудобно просматривать SVG-код, так как постоянно переключаешься между режимами. Но сам факт, что он есть — несомненно плюс.

В целом, в MockPlus можно найти что-то для себя. Но полностью полагаться на это приложение, не стоит.

Переходим к самому нашумевшему за последнее время приложению.

Pixso позволяет выстраивать рабочую цепочку от этапа проектирования до исследования и разработки. Сервис совмещает в себе весь процесс создания прототипов, проектирования и отправки на разработку. Поддерживается формат многопользовательской совместной работы и облачной синхронизации файлов в реальном времени. В общем-то, еще один китайский аналог.

Вы можете использовать как браузерную, так и десктопную версии Pixso. В этом тексте рассмотрим второй вариант.

Программа поддерживает русский язык — то, чем не может похвастаться Figma.

Для многих это плюс, поскольку не придется интуитивно «тыкаться» из-за языкового барьера. Как и в случае с MockPlus, Pixso поддерживает импорт файлов Figma, Sketch, Adobe XD, Axure.

Производим импорт своего проекта и переходим в режим разработчика. Для этого справа находим вкладку Посмотреть код. В браузерной версии это будет вкладка Handof и кнопка Enter Developer Mode.

Сразу замечаем возможность изменить единицу измерения с px на rem. Однако функция пока что корявая: при выборе отдельных элементов значения на макете отображаются только в px. При этом в самом коде все нормально.

Рассмотрим пример с текстом. Как и в случае с Dev Mode в Figma, справа показывается информация о высоте начертания. Ниже представлены параметры самого слоя. В общем, есть все, что нужно. Однако местами может быть лишняя информация.

У растровых изображений указываются все необходимые свойства и параметры. Но предоставленная информация по отступам не всегда бывает полезной.

Наконец — векторная графика. В панели справа есть пометка, что перед нами вектор. Иногда это удобно. В Figma такое отсутствует: нужно смотреть на панель со слоями. В остальном, все аналогично привычному Dev Mode.

Радует, что в Pixso можно посмотреть всю необходимую информацию по эффектам. Например, по теням. Мало кто любит их прописывать вручную.

Параметры Autolayout такие же, как в Figma.

У сервиса много плюсов и практически нет отличий от Dev Mode в Figma. Есть простой импорт fig-файлов, все подгружается без проблем. Минусы тоже имеются, но незначительные. В общем-то, Pixso — хорошая и удобная альтернатива.

Читайте также:

#selectel #design #webdesign #вебразработка