Попробовать бесплатно

Дизайн и код говорят на одном языке

Мост связывает переменные Figma с репозиторием. Дизайнер меняет цвет или отступ — команда получает pull request с той же правкой.

Тариф Free без срока: один файл Figma и один репозиторий.

Попробовать бесплатно Как это работает
Рабочее место с двумя мониторами, на экранах дизайн-макеты
ААня изменила color/brandFigma, только что
Pull request #128Проверки пройдены+3−2
radius/md 8 → 12

Подключается к тому, чем команда уже пользуется

  • Figma
  • GitHub
  • GitLab
  • Storybook
  • Tailwind
  • --CSS-переменные

Токены, компоненты и правки в одном потоке

Мост берёт на себя ручную сверку макета с кодом: значения, темы, варианты компонентов и проверку в CI.

Светлая и тёмная тема из одного набора

Режимы переменных Figma становятся темами в коде. Переключите тему и посмотрите, какие значения поменялись.

ДССборка 214main, 2 минуты назадГотово

Токены обновлены из Figma: 3 изменения, конфликтов нет.

Открыть diffПозже
  • --ui-surface#FFFFFF
  • --ui-text#0E1430
  • --ui-muted#454C69
  • --ui-border#DCE1E9
  • --ui-brand#3527F5

Радиус меняется в одном месте

Кнопки и поля ссылаются на токен, а не на число. Сдвиньте ползунок.

--radius-md = 12px

Каждая правка — pull request

Мост сам пишет diff: что было в коде и что стало в Figma. Команде остаётся ревью.

tokens/colors.css+2 −2
14--color-ink: #0E1430;
15−--color-brand: #3B5BFF;
15+--color-brand: #3527F5;
16−--color-link: #3B5BFF;
16+--color-link: var(--color-brand);

2 изменения из Figma, ветка most/tokens

Варианты в Figma — пропсы в коде

Мост сверяет варианты компонента с пропсами и подсказывает, если в коде не хватает состояния.

Figma
Component
Button
Variant
Primary
Size
L
Оплатить
<Button
  variant="primary"
  size="l"
>Оплатить</Button>
Вариант кнопки

Линтер не пропустит hex вместо токена

Проверка в CI находит значения, которых нет в дизайн-системе, и предлагает ближайший токен.

most lint src/2 ошибки
Card.css:14 цвет вне палитрыcolor: #3B5BFF;color: var(--color-brand);
Badge.css:6 отступ не кратен 4padding: 5px 10px;padding: var(--space-1) var(--space-3);
Дизайнер рисует интерфейс стилусом на планшете

Дизайнеры остаются в Figma

Без выгрузок и плагинов-посредников: Мост читает переменные и компоненты из файла и ничего в нём не меняет.

Три шага от макета до merge

Подключение занимает один вечер. Дальше Мост работает сам и пишет только тогда, когда в Figma что-то поменялось.

  1. 1

    Подключите файл и репозиторий

    Выберите файл Figma с переменными и папку токенов в GitHub или GitLab. Формат вывода — CSS-переменные, Tailwind или JSON.

    Figma Дизайн-системаподключено

    GitHub product/webподключено

  2. 2

    Мост сравнивает значения

    При каждом изменении в Figma сервис сверяет переменные с кодом и собирает список расхождений.

    color/brand#3B5BFF → #3527F5

    radius/md8 → 12

    space/18новый, 72

  3. 3

    Команда получает pull request

    Правки приходят отдельной веткой с понятным diff. Ревью и merge — как с обычным кодом.

    #128 Обновить токены+3 −2

    Проверки CIпройдены

Платите за редакторов, а не за просмотр

Читатели и ревьюеры бесплатны на всех тарифах.

Период оплаты

Показаны цены при помесячной оплате

Free

Для знакомства и личных проектов

0₽

навсегда, без карты

Начать бесплатно
  • 1 файл Figma и 1 репозиторий
  • CSS-переменные
  • Синхронизация по кнопке
  • До 3 редакторов

Team

Для продуктовой команды

1 500₽

за редактора в месяц

Попробовать 14 дней
  • До 10 файлов и репозиториев
  • Автоматические pull request
  • Темы и режимы переменных
  • Линтер токенов в CI
  • CSS, Tailwind и JSON

Business

Для нескольких продуктов

3 500₽

за редактора в месяц

Обсудить подключение
  • Файлы и репозитории без ограничений
  • GitLab на своём сервере
  • SSO и роли доступа
  • Журнал изменений токенов

Вопросы

Не нашли ответ — напишите на hello@maket.ysdprojects.space.

Дизайнерам придётся менять процесс?

Нет. Мост читает переменные, режимы и компоненты из файла Figma. Дизайнеры работают как раньше: ничего не экспортируют и не ставят плагины.

В каком формате токены приходят в код?

CSS-переменные, конфиг Tailwind или JSON в формате W3C Design Tokens. Можно включить несколько форматов сразу — все собираются из одного источника.

Мост может сам изменить main?

Нет. Сервис создаёт только отдельную ветку и pull request (в GitLab — merge request). Слить изменения может только человек с правами в репозитории.

Что, если токен в коде уже поменяли руками?

Мост покажет конфликт в diff: значение из Figma, значение из кода и кто менял последним. Решение остаётся за командой.

Что будет после 14 дней Team?

Пространство перейдёт на Free без автоматических списаний. Подключённые файлы и история синхронизаций сохранятся.

Тёмное рабочее место, на мониторе открыт код

Подключите первый файл сегодня

Free не требует карты и не ограничен по времени. Перейти на Team можно в любой момент.

Включите инспектор и наведите на любой элемент