/ html-figma

Плагин Figma для преобразования HTML из URL в Figma или преобразования дизайнов Figma в код через JSX Lite

Как это работает

  1. Установите плагин
  2. В Figma откройте новый или существующий документ, затем нажмите cmd + /выполните поиск «html figma» и нажмите Enter.
  3. Введите URL-адрес, который вы хотите импортировать

Почему ?

  • Легко импортировать стили реальных сайтов в качестве отправной точки для дизайна и прототипов.
  • Быстро превращайте компоненты реального сайта в компоненты дизайна.
  • Простой импорт из сборника рассказов и т. д.

Расширение Chrome

Хотите сделать снимок страницы за стеной авторизации или в определенном состоянии, к которому вам нужно перейти? Тогда расширение Chrome для вас!

Использование библиотеки

//npm install @ builder.io/html-to-figmaimport {htmlToFigma} from "@ builder.io/html-to  -figma "; const Layers = htmlToFigma (document.body);//Например  отправьте их в REST API или создайте файл .figma.json, который можно загрузить через плагин Figma 

Ограничения

Импорт HTML-слоев в Figma — это самый простой процесс. Даже если вы наберете 90%, вы сэкономите кучу времени, нужно лишь очистить несколько вещей.

Несколько известных ограничений:

  • поддерживаются не все типы элементов (например, iframe, псевдоэлементы)
  • не все свойства CSS поддерживаются или полностью поддерживаются
  • поддерживаются не все типы мультимедиа (видео, анимированные gifs и т. д.)
  • все шрифты должны быть загружены в Figma, в противном случае будет использован резервный вариант

Если вы обнаружите какие-либо проблемы или у вас есть отзыв вообще, пожалуйста, создайте проблему

TODO

  • Поддержка импорта кода из JSX Lite
  • Поддержка компонентов Figma

Сделано с помощью ❤️ от Builder.io



Figma to Code: Полное руководство

UI Blogger
Подписаться
O ct 13, 2020 · 6 мин чтения

Изображение для сообщения

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

Figma — действительно отличный инструмент не потому, что он создает невероятный дизайн интерфейса … но настоящая причина в том, что он помогает дизайнерам преобразовать свой дизайн в код с помощью стольких простых … функций, как «Figma Inspect» и «Figma Plugins», предоставляют сотни функций, с помощью которых вы можете экспортировать свой дизайн в Android, iOS, Интернет, Flutter и т. д.

Итак, давайте посмотрим # 3 способа, с помощью которых вы можете экспортировать свой дизайн в код, такой как XML, Flutter , CSS, HTML, Swift и т. Д.

Изображение для сообщения

Figma inspect — отличная функция от Figma, с помощью которой вы можете преобразовать свой элемент дизайна в код .. он предоставляет var множество вариантов, из которых вы можете с легкостью преобразовать свой дизайн в Android (XML), iOS (Swift), Web (CSS) .. вам просто нужно выбрать любой элемент из дизайна, и он сгенерирует для него код ..

 Изображение для сообщения

Изображение для сообщения

Генератор HTML отлично подходит, если вы хотите преобразовать свой дизайн в код HTML и CSS. Чтобы использовать его, вам просто нужно выбрать элемент дизайна на экране, а затем его Я покажу вам код, связанный с этим … после этого просто скопируйте и вставьте его в соответствующий файл и бум !! ваш веб-сайт готов … это сокращает вашу работу по кодированию ..

2. Figma to Flutter

 Изображение для сообщения

 Изображение для сообщения

 Изображение для сообщения

 Изображение для сообщения

Google создал новый комплект программного обеспечения под названием «Flutter», который помогает многим дизайнерам и разработчикам в достижении их мечты…

uxplanet.org

Экспорт Figma в Android, iOS и Интернет с помощью плагинов Figma

Экспорт Figma в HTML , CSS, XML, Swift и Flutter !!

uiblogger.medium.com

iv>

Оцените статью
logicle.ru
Добавить комментарий