Хватит проектировать в Figma

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

Это не разгром Figma. Figma всё ещё выигрывает в работе над системами, в исследовании бренда и в диаграммах FigJam. Тезис уже и жёстче. В 2026 году продуктовый дизайн происходит в коде. v0, Cursor, Lovable и реестр Vercel UI заменили артборд как место, где поверхности реально проектируются. Дизайнеры, которые всё ещё выдают инженерам pixel-perfect фреймы в Figma для «реализации», делают две работы вдвое медленнее.

Что на самом деле изменилось

Figma создавали в эпоху, когда узким местом было производство. В 2018 году рабочий React-компонент занимал у инженера три дня, а дизайнер за то же время выдавал двадцать hi-fi фреймов. Отдавать плоские артборды как результат было рациональным ходом. Артборд был самой быстрой частью конвейера.

В 2026 году эта арифметика перевернулась. v0 превращает одно предложение в рабочий компонент за тридцать секунд. Cursor редактирует настоящий репозиторий с настоящим диффом. Lovable поднимает деплоящееся приложение по одному промпту. Артборд теперь самая медленная часть конвейера, а не самая быстрая, и разрыв растёт каждый квартал. Подробный разбор сдвига на уровне артефакта в статье смерть макета. Эта статья про инструмент, который этот артефакт производит.

Плоский фрейм не стал хуже. Верстак стал лучше.

Где Figma всё ещё зарабатывает свой хлеб

Будем честны. Figma отлично справляется с четырьмя задачами, и если делать вид, что это не так, весь остальной аргумент отбросят.

Figma всё ещё выигрывает в исследовании айдентики бренда, где логотипы, типографические этюды и цветовые системы живут до появления любой кодовой базы. Она выигрывает в инвентаризации дизайн-системы: один файл, где перечислены все токены, варианты и состояния, с мультиплеерной моделью, которую больше ничто не повторяет. Она выигрывает в диаграммах FigJam и командном выравнивании: вайтбординг и карты пути, где поверхность и есть разговор. И она всё ещё выигрывает для дизайнера, который действительно не умеет читать код. В 2026 году такая роль встречается реже, чем делает вид индустрия, но она реальна.

Всё остальное, каждая продуктовая поверхность, которая попадает к настоящему пользователю, принадлежит коду.

Пять различий

Дизайн в Figma и дизайн в коде это не одна и та же работа с разной скоростью. Это разные работы.

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

Скорость. Цикл в Figma: правим фрейм, комментируем инженеру, ждём, смотрим билд, снова комментируем, снова ждём. Цикл в коде: правим, перезагружаем, смотрим. Первый занимает дни, второй секунды. Скорость итераций решает, сколько идей команда успеет проверить до запуска.

Модель совместной работы. Комментарии в Figma и комментарии в PR это разные поверхности. Комментарии в Figma это «дизайнер стейкхолдеру» и «дизайнер инженеру в виде спецификации». Комментарии в PR это дизайнер и инженер как равные над одним артефактом. Вторая модель это то, на чём работают команды design engineering, и она структурно быстрее.

Хэндофф исчезает. Хэндофф самый дорогой момент традиционного конвейера. Дизайн в коде его удаляет. Шага перевода нет, потому что дизайн и есть реализация.

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

v0, Cursor, Lovable и Vercel UI это новая поверхность для дизайна

Новая среда для дизайна это не один инструмент, а стек, который одновременно набрал критическую массу. Каждый из этих инструментов закрывает слой того, что раньше делал один Figma.

v0 от Vercel превращает промпт в рабочий компонент на React и Tailwind примерно за тридцать секунд. Форкаете результат, итерируете промптом или руками, отправляете в кодовую базу. Модель «форк и итерация» заменяет «дублировать и подправить» из Figma, только дубликат это настоящий код.

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

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

Vercel UI и реестр shadcn это полка с компонентами. Берёте настоящий компонент, кастомизируете внутри кодовой базы, шипите. shadcn поставляет компоненты как код, которым вы владеете, а значит дизайн-система редактируется на той же поверхности, что и сам дизайн.

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

Как на самом деле работают Linear, Stripe и Anthropic

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

Linear считает кодовую базу источником истины. Их команда design engineering доставляет дизайн как pull request в работающее приложение, а не как фреймы в Figma. Дизайн-система Stripe строится и поставляется из кода. Figma существует как документация ниже по потоку от кода, а не как источник выше. Править систему значит править код. Anthropic проектирует поверхности Claude прямо в React-компонентах и артефактах Claude, а дизайнеры читают и правят настоящее приложение в каждом релизе.

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

Пять вопросов перед тем, как проектировать в коде

Не каждому дизайнеру стоит бросать Figma завтра. Честный тест состоит из пяти вопросов. Если на три и больше ответ «да», дизайн в коде это правильная поверхность для следующего проекта.

1. Вы шипите работу или передаёте её дальше? Если шипите, код выигрывает. Если передаёте, код всё равно выигрывает, но культурная дельта больше.
2. Вы умеете читать кодовую базу? Не писать продакшен-React с нуля, а просто читать компоненты, понимать пропсы, узнавать дизайн-токен и править значения, не ломая билд.
3. Дизайн это статичная спецификация или интерактивная поверхность? Спецификации место в Figma. Поверхности с ховером, фокусом, скроллом, движением и крайними состояниями место в коде.
4. Есть ли у команды дизайн-система, которую можно расширять? Настоящая библиотека компонентов, пусть даже базовый shadcn, делает дизайн в коде быстрее Figma на два порядка.
5. Скорость итераций ваше узкое место? Если вы теряете спринты на цикле хэндоффа, подход «код прежде всего» убирает узкое место. Если вы теряете спринты на стратегии бренда, он ничего не даст. Решайте правильную проблему.

Команда, набравшая четыре из пяти, живёт в коде. Команда, набравшая два из пяти, всё равно должна делить работу между Figma и кодом, с лёгким уклоном в код на каждом новом проекте.

Антипаттерны, которые стоит бросить

Четыре паттерна убивают больше выпущенного продукта, чем любой выбор инструмента. Если команда делает что-то из этого, смена инструмента важна меньше, чем смена процесса.

Фантазия про Dev Mode как хэндофф. Дизайнер отдаёт файл Figma, размеченный красными линиями. Инженер «использует Dev Mode» для перевода. Оба делают вид, что перевод точен. Он никогда не точен. Dev Mode полезен, но это та же фантазия о хэндоффе в новой обёртке. Настоящее решение: пусть инженер и дизайнер правят один и тот же артефакт, а это как раз то, что дают поверхности в коде. Про слой-коннектор смотрите руководство по Figma MCP.

Pixel-perfect макет, который игнорирует настоящие шрифты и брейкпоинты. Фрейм на 1440px с Lorem Ipsum и шрифтом, который продакшен-приложение не загружает. Макет выглядит pixel-perfect, выпущенный продукт на него не похож, а все подписались под враньём.

Дизайн-система, которая живёт в Figma и тихо расходится с кодом. Библиотека Figma говорит, что у кнопки отступ 12px. Код говорит 14px. Никто не обновил ни то, ни другое. Через полгода файл Figma это вымысел. Один источник истины, в коде, а Figma как производный рендер.

Полугодовой редизайн, который выходит как PDF. Флагманский редизайн, поданный как стостраничный экспорт из Figma, презентованный топ-менеджменту и переданный инженерам на «вторую фазу». Вторая фаза не наступает, потому что пока инженеры оценивают пересборку, компания дважды меняет стратегию. Редизайн, который не вышел, не существовал.

Аудит дизайна в коде

Перед стартом следующего проекта проведите аудит. Семь вопросов, десять минут, чёткие ответы.

1. Что является результатом, фрейм или выпущенная поверхность? Если выпущенная, результат это код. Хватит делать вид, что фрейм и есть продукт.
2. Кто владеет работающим приложением, и есть ли дизайнер в диффе? Если дизайнера в диффе нет, исправьте это до смены инструментов.
3. Где живут токены? Если в Figma, перенесите их. Файл токенов должен быть источником истины, который читает Figma, а не наоборот. Путь апгрейда разобран в статье про AI-процесс в дизайне.
4. Каков цикл итерации в часах? Если от правки до выпущенного изменения больше четырёх часов, проблема в процессе, а не в дизайне.
5. Какие поверхности всё ещё проектируются на плоских артбордах, а какие уже переехали в код? Нарисуйте карту разделения. На каждой новой инициативе оно должно быть смещено в сторону кода.
6. На какие плагины команда опирается, чтобы изображать точность хэндоффа? Если ответ «на многие», посмотрите плагины Figma, которые стоит оставить и вырежьте остальные.
7. Что команда выпустит в следующем квартале в доказательство того, что процесс работает? Не слайд, а задеплоенную поверхность. Если ответ расплывчатый, процесс на самом деле ещё не изменился.

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

FAQ

Figma умер?

Нет. Figma не умер, и тезис не в том, что «Figma умер». Figma отлично подходит для работы над айдентикой бренда, инвентаризации дизайн-систем, диаграмм FigJam и презентаций для стейкхолдеров. Тезис уже. Figma больше не то место, где происходит продуктовый дизайн, потому что кодовая база быстрее, точнее и выпускает тот самый артефакт, которого касается пользователь.

А как быть дизайнерам, которые не умеют читать код?

Этому дизайнеру стоит научиться читать код, а не писать его. Читать компоненты, узнавать токены, править значения и просматривать дифф это навык на одну неделю, а не смена профессии. В 2026 году ИИ берёт на себя тяжёлую работу с продакшен-кодом. Дизайнер приносит на работающую поверхность композицию, суждение и вкус, и это ценнее, а не дешевле, когда слой производства стоит недорого.

Должна ли небольшая команда вообще отказаться от Figma?

Не полностью. Небольшой команде всё равно стоит использовать Figma для исследования бренда, инвентаризации систем и командного выравнивания. Сдвиг касается продуктовых поверхностей, где v0, Cursor, Lovable или реестр shadcn обойдут артборд по каждой метрике. Честное разделение такое: бренд и системы в Figma, продуктовые поверхности в коде, а на новых инициативах уклон идёт в сторону кода.

Окажитесь на правильной стороне процесса

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

Если вам нужен продуктовый UI, выпущенный в коде, с дизайнерами в диффе вместо презентации из Figma, перекинутой через забор, наймите Brainy. Brainy делает бренд, продуктовую разработку и AI-процесс как один проект, а не три. Студии, которые всё ещё оценивают файл Figma как финальный результат, в следующем квартале в брифе не окажутся. Окажитесь в брифе.