Figma + Claude Code + React: дизайн-система своими руками — без платных курсов
Обычно дизайн-система живёт в двух местах, которые никак не связаны между собой. В Figma — компоненты, токены, правила. В коде — что-то похожее, но по-своему. Дизайнер обновил цвет кнопки — разработчик узнал об этом через неделю на ревью. Или не узнал вообще. Claude Code закрывает этот разрыв. Figma подключается к Claude как источник данных через MCP. Claude читает токены напрямую из дизайн-файла, генерирует React-компоненты точно по ним, может сам рисовать в Figma и писать в неё документацию. Это руководство — полный путь: от установки до задеплоенного прототипа из ваших компонентов. Кодить не нужно. Нужно уметь писать промпты. Важный момент: большинство шагов ниже — установка проекта, Git, структура папок, создание файлов — вам делать руками не обязательно. Claude Code умеет делать это сам по промпту. Шаги описаны подробно чтобы понимать что происходит, но в реальной работе достаточно написать агенту что нужно на выходе — и он разберётся сам.
