Figma закрыла Dev Mode: пути обхода и их краткий обзор - Web-Global

Figma закрыла Dev Mode: пути обхода и их краткий обзор

10.06.2024 4
Поделиться:

В июне 2023 года Figma выпустила масштабное обновление: появился режим разработки Dev Mode. Эта функция обеспечивает плавный переход от дизайна к разработке. Такое новшество сразу же пришлось по душе многим. Однако совсем недавно пропала возможность пользоваться режимом бесплатно. Как быть и какие есть альтернативы — рассказываем под катом!

Коротко о том, что случилось

В конце января 2024 года Figma закрыла Dev Mode для пользователей бесплатного тарифа. Теперь подписка стоит $12/мес — немного, но для начинающих верстальщиков это может быть «невыгодно». Конечно, сама новость не свалилась с неба: создатели Figma предупреждали об этом уже давно.

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

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

Внешний вид панели Dev Mode в Figma.

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

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

Плагин Inspect Styles

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

Inspect Styles в панели плагинов.

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

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

Проверяем, копируем окно с кастомными свойствами и вставляем в свой код.

Основное в Inspect Styles.

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

Стили в Inspect Styles.

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

Стили векторного объекта.

Помните, что бездумно копировать все свойства не стоит. Ко всему подходим с умом.

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

Возможно, в скором времени именно Inspect Styles станет одной из лучших альтернатив Dev Mode. А пока рассмотрим следующий способ.

Приложение MockPlus DT

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

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

Главный экран приложения MockPlus.

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

Бесплатной десктопной версии MockPlus DT не существует.

Интерфейс MockPlus.

Закроем глаза на эту неприятность и проверим тот самый Dev Mode.

Dev Mode в MockPlus.

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

Свойства текстового блока.

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

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

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

Приложение Pixso

Переходим к самому нашумевшему за последние недели приложению. Аналог Figma, который, по мнению многих, полностью может ее заменить.

Pixso — кроссплатформенный облачный сервис, позволяющий командам работать над одним и тем же проектом в режиме реального времени.

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

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

Интерфейс Pixso.

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

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

Вход в режим разработчика.

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

Переключение с px на rem.

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

Параметры текстового слоя.

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

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

Параметры векторного изображения.

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

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

Вывод

Какое решение удобнее и лучше использовать под конкретный проект — решать вам. В любом случае, всегда есть альтернативы.

Использовали ли вы инструменты из статьи? Возможно, знаете еще какие-либо альтернативы? Поделитесь опытом и мнением в комментариях! Будет интересно почитать.