Есть ли достойные и бесплатные альтернативы Dev Mode в Figma? Рассказываем в обзоре
В прошлом году вышел релиз режима Dev Mode в Figma. Он обеспечил плавный переход от дизайна к разработке и пришелся по вкусу специалистам разного уровня. Увы, радость пользователей была недолгой — теперь этот режим входит в подписку и за его использование нужно платить. В тексте рассказываем о бесплатных альтернативах.
Что случилось
C 31 января 2024 года Figma закрыла Dev Mode для бесплатного тарифа. Чтобы продолжить пользоваться режимом, нужно купить подписку за 12 долларов в месяц. Однако для многих начинающих разработчиков и верстальщиков эта плата будет нецелесообразной.
Для чего нужен Dev Mode
Dev Mode — это режим разработки в Figma, который позволяет быстро переводить проекты в код.
В Dev Mode доступен код элементов разных платформ, который можно брать за основу для разработки. Можно создавать плагины с генерацией кастомного кода под различные фреймворки. Ну, и конечно же, интеграция с VSCode, позволяющая смотреть дизайн непосредственно в среде разработки.
Разработка без Dev Mode по-прежнему возможна. В файлах с доступом на просмотр разработчики могут бесплатно посмотреть и скопировать все необходимые свойства, переменные, стили и другую информацию. Как и раньше, можно измерять отступы и экспортировать объекты. Тут понадобятся лишь базовые знания Figma. Нет только генерации кода. Это значит, что чуть больше придется писать руками.
Но если все же хочется упростить себе жизнь — есть несколько способов обойти ограничения.
Плагин Inspect Styles
Для установки переходим во вкладку Plugins и вводим Inspect Styles.
Inspect Styles в панели плагинов.
После запуска плагина появляется информация о том, какие переменные мы можем использовать.
Пробежимся по самому главному. Вкладка Основное содержит информацию о шрифтах. Ниже указано, сколько раз встречается конкретный шрифт в проекте. Проверяем, копируем окно с кастомными свойствами и вставляем в свой код.
Основное в Inspect Styles.
Перейдем к вкладке Стили. Для этого выберем конкретный элемент в макете, например, текстовый блок. Здесь указывается и числовое значение начертания шрифта: font weight. Полезная фича, когда кроме Regular (400) трудно что-то вспомнить. Если в тексте есть дополнительные цвета, они также отдельно прописываются.
Стили в Inspect Styles.
Посмотрим, что будет с другим типом объекта. Выбираем векторный элемент и получаем SVG-разметку. Круто? Вполне.
Стили векторного объекта.
Inspect Styles — популярный плагин, который активно улучшается и дорабатывается разработчиком. Обновления выходят часто, чуть ли не ежедневно.
Приложение MockPlus DT
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 — кросс-платформенный облачный сервис, позволяющий командам работать над одним и тем же проектом в режиме реального времени.
Pixso позволяет выстраивать рабочую цепочку от этапа проектирования до исследования и разработки. Сервис совмещает в себе весь процесс создания прототипов, проектирования и отправки на разработку. Поддерживается формат многопользовательской совместной работы и облачной синхронизации файлов в реальном времени. В общем-то, еще один китайский аналог.
Вы можете использовать как браузерную, так и десктопную версии Pixso. В этом тексте рассмотрим второй вариант.
Интерфейс Pixso.
Программа поддерживает русский язык — то, чем не может похвастаться Figma.
Для многих это плюс, поскольку не придется интуитивно «тыкаться» из-за языкового барьера. Как и в случае с MockPlus, Pixso поддерживает импорт файлов Figma, Sketch, Adobe XD, Axure.
Производим импорт своего проекта и переходим в режим разработчика. Для этого справа находим вкладку Посмотреть код. В браузерной версии это будет вкладка Handof и кнопка Enter Developer Mode.
Сразу замечаем возможность изменить единицу измерения с px на rem. Однако функция пока что корявая: при выборе отдельных элементов значения на макете отображаются только в px. При этом в самом коде все нормально.
Переключение с px на rem.
Рассмотрим пример с текстом. Как и в случае с Dev Mode в Figma, справа показывается информация о высоте начертания. Ниже представлены параметры самого слоя. В общем, есть все, что нужно. Однако местами может быть лишняя информация.
Параметры текстового слоя.
У растровых изображений указываются все необходимые свойства и параметры. Но предоставленная информация по отступам не всегда бывает полезной.
Наконец — векторная графика. В панели справа есть пометка, что перед нами вектор. Иногда это удобно. В Figma такое отсутствует: нужно смотреть на панель со слоями. В остальном, все аналогично привычному Dev Mode.
Параметры векторного изображения.
Радует, что в Pixso можно посмотреть всю необходимую информацию по эффектам. Например, по теням. Мало кто любит их прописывать вручную.
Параметры Autolayout такие же, как в Figma.
У сервиса много плюсов и практически нет отличий от Dev Mode в Figma. Есть простой импорт fig-файлов, все подгружается без проблем. Минусы тоже имеются, но незначительные. В общем-то, Pixso — хорошая и удобная альтернатива.
Расскажите в комментариях, использовали ли вы инструменты из нашего обзора? Какие альтернативы можете добавить?
Читайте также:
На pixso лучше не надеется, мертвое ПО, последнее обновление было год назад.