Figma to HTML [Плагин]


Весьма амбициозный плагин, экспортирующий ваш проект в Figma в HTML5 (плюс CSS), на текущий момент все еще находится в разработке. 

Figma to HTML
Figma to HTML

На 19 августа стало доступно:

  • Используются шрифты Google Fonts
  • Можно копировать HTML/CSS из плагина
  • Скачать HTML или стили, или всё сразу в ZIP
  • Можно экспортировать сколь угодно вложенные фреймы
  • Также можно экспортировать вложенные группы
  • Можно сохранять изображения
  • Поддерживается межстрочное и межбуквенное расстояния
  • Стили текста
  • Векторные фигуры
  • Заливка сплошным цветом (Solid)
  • Тени
  • Линейные градиенты 

На тот же момент в разработке:

  • Векторы
  • Работа с компонентами

Как пользоваться

  1. Выбрать родительский фрейм
  2. Запустить плагин
  3. Скачать архив/файл HTML или CSS или скопировать код

Документация плагина на момент публикации не богата, так что разбираемся сами.

Figma в html - исходный фрейм
Figma в html — исходный фрейм

 

Figma to HTML - результат
Figma to HTML — результат
  1. Адаптивность не обнаружена
  2. Есть проблемы с русским текстом
  3. Ссылки и кнопки сделать невозможно (мы не нашли)
  4. Правила формирования стилей пока что не ясны

Выводы

На текущий момент данное решение может быть интересным экспериментом,  но, увы, не применимо на практике. 

Где скачать

Ссылка на плагин:  https://www.figma.com/community/plugin/851183094275736358/Figma-to-HTML

Как устанавливать плагины в Figma читайте здесь.  

Комментариев: 1
  1. SVGPNG.RU (автор)

    Несмотря на все вышеперечисленное, мы восхищаемся разработчиками, которые занимаются подобной работой. Уверены, у этого решения большое будущее.
    Как представители дизайнерского сообщества отчаянно бьём пятюню таким энтузиастам :idea:

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<