Overlay figma components to react vue html

Introducing Figma to React.

Figma is awesome for creating reusable UI elements and iterating fast. Features like Auto-Layout also bring it closer to the constraints present in the developer’s world.

When it comes to going to production though, there’s still a gap that handoff tools fail to bridge. Even though Figma has an inspect code mode to keep all teams eyes on a single tool, it can still be a headache to manually integrate designs.

I have been a Front-End passionate for many years, and always dreamed that design tools could provide code in modern frameworks. So I decided to create this concept. Before introducing it, let’s revisit an example of the problem I wanted to solve:

Working with Figma’s Inspect Mode

This is what it looks like to build a simple Card component in React, using Figma Inspect panel:

As shown above, I’ve made a standard Card in Figma using Auto-Layout frames, and best practices. Here’s how long it takes me to develop it in React:

The Process

• Setup the component: First, I create a new empty React Component with an empty SCSS file in my code base >>2 minutes 🕑
• Build the HTML: I code the HTML structure according to what I see visually: a container for the image + title + subtitle + an “author container” >>5 minutes 🕑 and 2 back and forth with Figma 😓
• Add the CSS: For each SCSS class I go back and forth between Figma Inspect and my code base to pick-up padding, margins, sizes, widths, corner radius, colors and fonts >>30 minutes 🕑 and around 10 back and forth with Figma Inspect 😓
• Set up color variables: For each style variable, I need to make it match with my SCSS stylesheet. If the Figma file is well organised, it’s fast, but I have to make sure I am not doing mistakes ( example : use a wrong color and introduce an inconsistency) >>5 minutes 🕑, and a painful mental load.
• Final Checks: Do a visual check to make sure it is pixel perfect >1 minute 🕑, and sometimes I don’t even see my mistakes (I don’t have designer’s eyes 🙂 ). And a new back and forth with Figma.

Total Time Needed

Finally, to code this component in React (only the visual aspect), using my standards, it took me :

• 43 minutes
• 13 back and forth with Figma
• An there are still chances that I did wrong 🙂

As I said, I am a passionate front-end developer. But when I say front-end, I prefer 10 times more to focus on animations, frontend business logic or performance (and the list is long).

My opinion is: this part of the job is “already done” by the designer, the rest is mainly “translation”. Even more since Figma allows designers to make things responsive and dynamic.

Replacing Figma’s Inspect Panel

I would have LOVED if Figma could directly give the React and SCSS code of any component :). So when building my solution, I tried to imagine what it could be in Figma, in place of the Inspect mode panel:

How it would work:

Front-end Framework: React
UI Framework: SCSS
SCSS Stylesheet including : Colors, TextColors, font families, …
Margins/Padding unit: Px
Font Size unit: Px

2. There should be a way to see the React and SCSS code with only the necessary properties, all my constraints applied, and the possibility to copy/paste it into my own codebase.

3. Be able to preview the component in a browser to make sure it is pixel perfect before going to my codebase.

I imagine it would have taken me no more than 5 minutes to get to the same (and 100% reliable) result, using this concept.

For now, it doesn’t exist natively in Figma.

But I have been working on it for the past 2 years, and designed a plugin to get as close as possible to this concept.

And here is how it works, in real life 👇

And great news, it is now available in Figma, for Vue.js and React (SCSS or Styled Component).

I hope that this concept contributes to help product teams around the globe think about their design-to-code process and ship better products faster than ever.

Источник

Overlay Figma Plugin

Transform your Figma components into clean React, Vue and HTML components, making developer handoff faster and easier than ever.

Cryptocurrency X – Cryptocurrency Figma Template

Corporation X – Consulting Firm Figma Template

StarUp X – Modern Startup Figma Template

Simpleflow

Pixelay Development Comparison

Figtag

Print for Figma

Figma Elements © 2021 | Sitemap | Made with ❤️ in Netherlands
FigmaElements is NOT officially associated with Figma, Inc. We are a non-official community looking to share valuable resources to all Figma designers worldwide.

Источник

Можно ли экспортировать макеты из Figma в готовое React приложение?

Последнее время из каждого утюга кричат по технологии будущего, что Chat GPT может писать код вместо программистов, а MidJourney создавать интерфейсы вместо дизайнеров. Мы полезли в Community фигмы, а там по запросу Figma to Code больше сотни плагинов, которые обещают сгенерировать чистый работающий код на основе ваших макетов и за пару кликов создать готовое web-приложение вместо ваших frontend-разработчиков. Все это звучит вдохновляюще, но так ли это на самом деле?

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

Возможно ли экспортировать макеты из Figma в готовое React приложение?

Чтобы разобраться на что реально способны инструменты для генерации кода из макетов, надо потратить кучу времени, сил и не сойти с ума. Поэтому давайте для начала разберемся, а что нам это даст, если отбросить хайп и всеобщее воодушевление:

• Мы подумали, что если получится, можно прийти и сказать:» теперь, друзья, мы будем отдавать в разработку не просто фигму, а готовые страницы интерфейса.» Осталось подключить АПИ и можем отмечать сдачу проекта. Это конечно фантазии, но приятные.
• Когда мы рисуем макеты мобилки, всегда смотрим их прямо на телефоне через Figma Mirror, потому что в реальной среде сразу понятно где у тебя проблемы. А вот десктопные версии можно полноценно оценить только после верстки, тогда уже бывает немного поздно вносить серьезные изменения.
• Может другим так не везет, но нам иногда попадаются заказчики, которые говорят, что в фигме этот шрифт выглядит иначе, а вот этот ваш красный в браузере какой-то не красный. И они отчасти правы — реальные носители отображают иначе.
• Иногда нужно быстренько собрать какой-то лендинг. Для этого раньше мы пользовались тильдой и к слову сказать, верстка в зеро-блоках и хитрые эффекты требуют там хорошей сноровки. Кроме того, основной наш инструмент все таки фигма — и если для сборки сайта оттуда никуда уходить не надо, то что может быть лучше.

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

Итак, внимание — Задача

Сформировать прямо из Figma код на React:

• с учетом разных состояний и свойств компонентов (variants);
• с учетом адаптивности;
• в инструменте, который осилят обычные дизайнеры (без навыков программирования);
• за адекватные деньги.

Спойлер: для тех, кому не хочется вникать в детали — мы выбрали Quest. Другие выводы можно сразу почитать в конце статьи.

Мы сравнивали наиболее популярные инструменты для генерации кода из Figma.

Все эти инструменты можно условно поделить на два типа:

• Plugin only — запускается в Figma и прямо в окошке генерит код, который вы можете копировать или загрузить себе.
• Plugin + Web app. Плагин экспортирует макеты в веб-приложение, где вы видите свои ожившие дизайны и сгенерированный код. Возможности веб-приложений и принципы работы разные, об этом поговорим ниже.

• Экспортирует код в React.
• Экспортирует design tokens (достаточно типографики и палитры).
• Создает компоненты, которые есть в макетах и/или дает возможность создавать/редактировать их вручную в приложении после экспорта.
• Поддерживает variants (множественные состояния) для компонентов.
• Дает возможность настроить props и bindings, в том числе не только для слоев, а еще и для состояний.
• Поддерживает переходы между страницами, ссылки, модальные окна.
• Можно синхронизировать обновления из Figma.

Инструменты первого типа plugin only в основном генерят html+css, но есть и те, что умеют в React, Vue, Flutter, Swift и тд. Но конечно, речи в таких случаях не идет о компонентах, состояниях и всей прочей магии. Тем не менее мы попробовали сгенерить и проверить код в песочницах. Для простых формочек получается вполне похожая картинка. Нашу задачу это не решает, но кому-то может быть полезно.

С инструментами типа “Plugin + Web app” поинтереснее, тут мы встречаем большую вариативность по реализации:

• Какая часть работы может выполняться в самом плагине на стороне Figma и какая часть в веб-приложении. Здесь можно встретить варианты с одной “зеленой кнопкой” Export и варианты, где адаптив, переходы, структура контейнеров, интерактивные компоненты, анимация, загрузка, превью и даже публикация на сайт выполняется в Figma.
• Анализ экспортируемых макетов. Очевидно, что макеты должны удовлетворять некоторым условиям для того чтобы быть максимально эффективно интерпретированы в код. Интерпретатор как-то должен понять или додумать, где собрать flexbox, где stack, где grid, а где надо сделать абсолютное позиционирование или закрепить элемент. Некоторые пишут рекомендации в гайдах, некоторые не пустят тебя редактировать макет пока ты не разметишь все слои в понятные браузеру структуры. Кто-то правит(=ломает) твои макеты, кто-то обводит в твоих макетах непонятные слои красный рамочкой и пишет рекомендации — вот тут у тебя не хватает Autolayout, а здесь надо преобразовать группу во фрейм, а тут растрировать картинку (хотя это уже лишнее :)) Встречаются даже такие, которые применяют AI и сами, например, создают компоненты даже там, где дизайнер их не предусмотрел — круто конечно, но этот тот случай когда лучше не стоило так заморачиваться.
• Гибкость и разнообразие настроек в веб-приложении тоже сильно разнится. Есть очень минималистичные, где ты вообще ничего не можешь уже поменять, даже если очень надо. А есть такие, где количество настроек просто зашкаливает и надо сильно постараться чтобы разобраться. Такие мы помечали как не User friendly, рассчитывая на то, что все таки ищем инструмент для дизайнера, а не для разработчика и хотелось бы чтобы ему не пришлось осваивать новую профессию.
• Очень хромает везде работа с компонентами, они почти везде есть, но в очень упрощенном виде. Чего уж говорить про вариативность компонентов и попытки настроить props чтобы потом передавать в эти компоненты не только отображаемый контент, а еще и контекст типа статуса, типа — всего что мы бережно называем variants в фигме.

Результаты исследования мы собрали в сравнительную таблицу:

Источник