Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>9 фев 2024</li>

3 <li>0</li>

4 </ul>Устаревшая функция Figma, два плагина и российский аналог.

5 Иллюстрация: Полина Честнова для Skillbox Media

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

8 Собрали четыре доступных решения, которые могут вам помочь.

9 До появления Dev Mode в Figma на боковой панели настроек была вкладка Properties - на ней отображались все CSS-стили, которые доступны для выделенного элемента. Эта функция никуда не делась, и ей до сих пор можно пользоваться, но работать она стала непоследовательно.

10 Вкладка Properties будет вам видна, если у вас нет доступа на редактирование макета:

11 Изображение: Skillbox MediaЕсли доступ есть, то этой вкладки у вас не будет и придётся копировать CSS-стили вручную и наугад:

12 1. Выделите любой объект на макете.

13 2. Кликните по нему правой кнопкой мыши и перейдите Copy/Paste as → Copy as code → CSS, iOS или Android.

14 3. Вставьте полученные строки в ваш редактор кода.

15 Если вы не хотите пользоваться сторонними решениями, то стандартная функция Figma вам подойдёт. Но тогда вам придётся внимательно следить за тем, что вы копируете и вставляете, чтобы не пропустить лишнее.

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

17 1. Установите плагин<a>по ссылке</a>.

18 2. Нажмите правой кнопкой мыши по макету и перейдите Plugins → Figma to Code.

19 3. Выделите любой объект на макете, и в появившемся окне отобразится его код.

20 4. При необходимости вы можете изменить язык: HTML, Flutter, SwiftUI, CSS-фреймворк Tailwind.

21 Если вам нужны Flutter или SwiftUI, то Figma to Code сможет вас выручить. Но поддержка HTML в нём не очень хорошая - плагин не пытается организовать все стили объекта в формат CSS, а просто выдаёт всё в формате <div style= “width: 328px; height: 16px;”></div>.

22 Достаточно удобный плагин с возможностью настраивать результат выдачи. Его сделал российский разработчик, поэтому он доступен на русском языке.

23 1. Установите плагин<a>по ссылке</a>.

24 2. Нажмите правой кнопкой мыши по макету и перейдите Plugins → Inspect Styles.

25 3. В появившемся окне во вкладке "Основное" плагин показывает свойства всех шрифтов на странице и предлагает сделать два из них главными.

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

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

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

29 Бесплатный аналог Figma от российских разработчиков, который почти полностью копирует все функции и интерфейс оригинала. У него есть практически такой же режим разработчика, но доступен он бесплатно. Также он понимает формат файлов Figma - что нам и нужно.

30 0. Создайте<a>аккаунт в Pixso</a>.

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

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

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

34 Имейте в виду, что некоторые новые функции Figma не работают в Pixso. Например, любые переменные будут выводиться как обычные стили.

35 Если вы часто использовали Figma, то интерфейс Pixso у вас не вызовет никаких проблем. Но способ с переносом файла может быть неудобным, если ваш проект постоянно обновляется: при смене вёрстки, цвета или добавлении новых элементов вам придётся снова вручную выгружать весь файл.

36 В разделе Community достаточно много разных плагинов, которые могут заменить Dev Mode - мы проверили и рассказали только о полностью бесплатных решениях.

37 Если вам они не подходят, то <a>посмотреть другие плагины можно по ссылке</a>. В большинстве из них есть бесплатные режимы, но они не всегда подходят для активной работы.

38 Попробуйте поработать в Blender

39 <a>Практический курс: "Figma с нуля до PRO" Узнать о курсе</a>