Home

Figma Theme Generator

Colors generator

Генератор на выходе создаёт переменные вида:

export const colors = {
  white: 'rgb(255, 255, 255)',
  green: 'rgb(16, 185, 129)',
  bunker: 'rgb(28, 28, 30)',

  'button.primary.default.background': 'rgba(34, 197, 94, 1)',
  'button.primary.default.font': 'rgba(255, 255, 255, 0.90)',
  'button.primary.default.border': 'none',
  'button.primary.hover.background': 'rgba(30, 174, 83, 1)',
  'button.primary.hover.font': 'rgba(255, 255, 255, 0.90)',
  'button.primary.hover.border': 'none',
}

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

1. Название главного фрейма

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

Что нужно сделать?

Необходимо в самой фигме назвать главный фрейм¹ Generator/Component, где Component - это, например, кнопка Generator/Button или инпут Generator/Input, либо можно использовать другие доступные паттерны из списка github

Пример: главный фрейм¹

2. Названия и свойства кнопок

У элементов должны быть корректные свойства в их названии.

• Для кнопок обязательные свойства: Style, State, Text.
• Для инпутов обязательные свойства: Type, State.

Пример: правильных кнопок

Пример: неправильных кнопок

Пример: правильных инпутов

Figma Fragments Generator

Для генератора фрагментов необходимо использовать правильный тип элементов в фигме, например для генерации текстовый ноды нужен тип Text, а для её обертки Frame:

Пример

Упрощенная структура на выходе:

<Box>
  <Text>Вход в аккаунт<Text>
<Box>

Чтобы создать структуру с Button или Input компонентами, элемент должен иметь тип Instanсe и в название указано имя компонента:

Пример

Здесь ссылаются на Instanсe кнопки с названием Pattern/Button

Упрощенная структура на выходе:

<Button>Войти в аккаунт<Text>