Stitch + Figma: как работает связка, которую уже используют все нормальные команды

## Почему это не война инструментов

Stitch запустился в середине 2025-го как любопытная игрушка. 18 марта 2026 вышло обновление, которое переписало правила: бесконечный канвас, голосовое управление, Design Agent с памятью всего проекта, MCP-сервер и — главное — нормальный экспорт в Figma с сохранёнными слоями. На следующий день акции Figma упали на 8,8%.

Рынок испугался. Практики — обрадовались.

Stitch захватывает фазу 0→1: компрессирует часы в минуты на этапе исследования. Figma держит фазу 1→100: здесь продукты доводятся до финала. Это не дублирование — это разделение труда, которого дизайн-индустрии не хватало лет десять.

А 20 мая на Google I/O к этому добавился стриминговый агент и мультиплеер — и связка стала ещё плотнее.

## Как устроен workflow на практике

Вот как это выглядит в реальных проектах.

### Шаг 1 — Исследование в Stitch (20–30 минут)

Открываете stitch.withgoogle.com. Gmail — единственное, что нужно. Никакой установки, никакой кредитки.

Даёте задачу: не «сделай лендинг», а конкретный промпт из четырёх частей — контекст, структура, контент, стиль. Например:

Контекст: SaaS-продукт для управления задачами, аудитория — соло-разработчики
Структура: hero, три фичи, pricing, footer
Контент: минималистичный, без стоковых иллюстраций
Стиль: как Linear, тёмный фон, акцент на типографике

Один расплывчатый промпт — результат на 6/10. Промпт с четырьмя параметрами — 9/10 с первого раза.

Stitch генерирует 5 вариантов одновременно. Agent Manager фиксирует всю историю проекта — можно вернуться к любому решению, исследовать параллельные направления, не теряя контекст. С майского обновления агент стримит компоненты прямо на канвас пока вы пишете или говорите — можно остановить генерацию на полпути, если направление уходит не туда, и перенаправить агента не дожидаясь финального результата.

Если хотите, чтобы Stitch придерживался вашей дизайн-системы — положите в проект DESIGN.md. Stitch по умолчанию создаёт DESIGN.md для каждого проекта; можно настроить его под свой бренд или дать Stitch URL существующего сайта — он сам извлечёт систему. После этого каждый сгенерированный экран следует вашим токенам автоматически.

### Шаг 2 — Экспорт в Figma (5 минут)

Дизайны из Stitch экспортируются в Figma с сохранёнными слоями и компонентами через официальный community-плагин.

Это не плоский скриншот для перерисовки. Вставляете в Figma — слои именованы, компоненты сгруппированы, Auto Layout сохранён. Достаточно чистый результат, чтобы начать работать с ним напрямую.

Это принципиально отличает Stitch от других AI-генераторов, которые выдают картинку. Здесь на входе в Figma уже структура.

### Шаг 3 — Полировка в Figma (столько, сколько нужно)

Figma делает то, что у Stitch не получается: пиксельная точность, responsive-поведение, полноценная дизайн-система с компонентами и токенами, комментарии, ветки, dev-хендофф. Плагин-экосистема Figma — более 2000 инструментов — это годы накопленной инфраструктуры, которую AI-инструменты не смогут воспроизвести быстро.

Здесь же работает Figma Make — AI-слой внутри Figma на базе Claude Sonnet 4. Это не Stitch: Make не генерирует с нуля, он итерирует внутри существующей системы. «Добавь тёмную тему», «сделай вариант для мобайла», «замени все кнопки на outlined» — Make делает это в контексте вашего реального проекта, а не абстрактного холста.

### Шаг 4 — Передача в код

Два пути:

Через экспорт кода из Stitch — HTML/CSS + Tailwind. Код из Stitch — отличная отправная точка: LLM-агенты хорошо конвертируют этот HTML в React, Angular, Vue, Flutter или SwiftUI. Берёте экспорт, кидаете в Cursor или Claude Code с референс-скриншотом — получаете нужный фреймворк.

Через MCP — MCP-сервер Stitch подключается к Claude Code и Cursor напрямую, схлопывая дизайн-to-code пайплайн в один шаг. Дизайн и код синхронизированы без ручного копирования.

## Что дала майская I/O 2026

Мартовское обновление решило проблему скорости. Майское — проблему командной работы.

До 20 мая Stitch был инструментом для одного человека. Это был главный аргумент в пользу Figma для любой команды больше одного дизайнера.

I/O 2026 добавил одновременное многопользовательское редактирование — Google прямо сравнивает это с совместной работой в Google Docs. И всё это — бесплатно, против $15 за место в Figma.

Туда же — экспорт в Google Antigravity для бэкенд-интеграции и прямой деплой через Netlify прямо из интерфейса Stitch. Рекомендованный workflow среди практиков, работающих с обоими инструментами: исследовать в Stitch, финализировать в Figma, собирать в Antigravity.

## Честная карта: где что использовать

## Кому эта связка подходит, а кому нет

Подходит:

• Соло-разработчики и небольшие команды, которые хотят шипать быстро
• Продуктовые команды без выделенных дизайнеров
• Дизайнеры, уставшие тратить первые два дня на вайрфреймы

Не подходит:

• Крупные дизайн-команды с многолетними библиотеками в Figma — миграция бессмысленна
• Проекты с жёсткими требованиями к accessibility — Stitch не даёт нужного уровня контроля на старте
• Корпоративные команды с устоявшимся design system governance

Figma слишком глубоко встроена в workflow дизайн-команд — компонентные библиотеки, дизайн-системы, dev-хендофф, плагин-экосистема — чтобы её вытеснил один AI-инструмент. Но малые команды и соло-билдеры уже смещаются в сторону AI-native инструментов вроде Stitch.

## Вывод: нет войны — есть пайплайн

Stitch — это утро понедельника: бриф пришёл, к обеду есть три концепта с кодом. Figma — это остаток недели: из лучшего концепта вырастает продукт. Make ускоряет итерации внутри. MCP убирает ручной хендофф между дизайном и кодом.

Общая экономия времени по сравнению с традиционным workflow — 60–75%. Не потому что инструменты «умные», а потому что каждый делает своё и не мешает другому.

Попробовать можно тут: https://stitch.withgoogle.com — бесплатно, 350 генераций в месяц, без установки.