MCP для Figma: что он делает и как его настроить

Figma MCP - это коннектор, который позволяет AI-ассистенту напрямую читать ваши файлы Figma: фреймы, слои, компоненты, отступы, цветовые стили и текст, вместо того чтобы угадывать по вставленному вами скриншоту. Он построен на MCP, Model Context Protocol - открытом стандарте, выпущенном Anthropic, который позволяет ассистентам взаимодействовать с внешними инструментами через единый интерфейс. Figma предоставляет официальный сервер, а сообщество разработало ещё несколько. Настройка заключается в добавлении небольшого блока конфигурации в ваш AI-клиент и предоставлении ему доступа к вашей учётной записи Figma. Это занимает от десяти минут до целого дня - в зависимости от того, насколько уверенно вы редактируете конфигурационные файлы. Если это предложение уже звучит как рецепт неудачного дня, ниже на странице есть более простой способ.

Что такое Figma MCP на самом деле?

MCP - это стандарт, а не продукт. Он определяет, как AI-ассистент запрашивает информацию у внешней системы и как эта система отвечает. Всё, что поддерживает этот протокол, называется MCP-сервером, а сервер - это, по сути, адаптер: с одной стороны, он взаимодействует с Figma, а с другой - с Claude в формате, который Claude уже понимает.

Итак, «Figma MCP» - это сокращённое название сервера, который находится между вашим ассистентом и файлами дизайна. После его запуска Claude перестаёт работать с плоским изображением и начинает работать со структурой. Он видит, что кнопка является экземпляром компонента, что отступ равен 16, а не 15, и что текстовый стиль называется основной/обычный а не «та, что поменьше и серая».

У Figma есть официальный сервер, ориентированный на рабочие процессы от дизайна к коду, а сообщество разработало реализации, которые читают файлы через публичный API Figma. Они различаются способом аутентификации и объёмом доступных данных файла, но со стороны Claude выглядят одинаково: это список доступных инструментов, которые он может вызвать, когда они нужны для выполнения вашего запроса. Если сначала вам нужен более общий контекст, мы написали понятное объяснение на простом языке о том, что такое MCP и зачем он нужен.

Что Figma MCP на самом деле позволяет делать Claude?

Самое интересное не в том, что «Claude видит ваш файл». Дело в том, что целый ряд задач перестаёт быть ручным.

• Превратите выбранный фрейм во фронтенд-код, соответствующий файлу. Не грубое приближение по изображению, а отступы, иерархия и названия компонентов, взятые непосредственно из дизайна. Вы всё равно проверяете результат. Вам больше не приходится заново вводить значения.
• Извлеките дизайн-токены из файла. Цветовые стили, типографическую шкалу, шаги отступов, радиусы скругления - экспортируйте их как переменные в формате, который использует ваша кодовая база.
• Проверьте файл по его собственной системе. Какие слои используют жёстко заданное шестнадцатеричное значение вместо стиля, в каких фреймах используются значения отступов, которых больше нигде нет, какие компоненты были отсоединены и незаметно отредактированы.
• Пишите примечания и спецификации для передачи в разработку. Состояния, крайние случаи, пустые состояния, поведение при ошибке - все описывается на основе реальных фреймов, а не по памяти.
• Проверяйте UX-тексты в контексте. Все строки в рамках одного сценария, прочитанные по порядку, помогут заметить, что для одного и того же действия используются три разных слова.
• Задавайте вопросы о большом файле. Где используется этот компонент, что изменилось в этой ветке, на каких экранах все еще используется старый логотип.

В основе всего этого лежит одна идея: Figma MCP убирает этап копирования и вставки между дизайном и всем, что происходит дальше. Это действительно полезно, но это и есть вся его польза. Он не принимает дизайнерские решения.

Как настроить сервер Figma MCP?

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

1. Выберите сервер. Если ваша цель - преобразование дизайна в код внутри редактора, начните с официального сервера Figma. Если вам нужен доступ к файлам для чтения через API без запущенного настольного приложения, обратите внимание на сторонние серверы. Оба типа перечислены в общедоступных каталогах MCP-серверов.
2. Настройте доступ. Официальные инструменты обычно используют выполненный вход в вашу сессию Figma и требуют включить соответствующую настройку в приложении. Для сторонних серверов обычно нужен персональный токен доступа, который создается в настройках аккаунта Figma. Относитесь к этому токену как к паролю: с его помощью можно прочитать все, что доступно вам.
3. Добавьте сервер в конфигурацию MCP вашего клиента. Claude Desktop, Claude Code и большинство редакторов с поддержкой AI считывают файл конфигурации со списком доступных серверов, командами для запуска каждого из них и необходимыми учетными данными. Вам нужно добавить одну запись.
4. Перезапустите клиент. Почти за каждым сообщением «это не работает» стоит клиент, который не перезапустили после изменения конфигурации.
5. Проверьте подключение. Ваш клиент покажет подключенные серверы и доступные у каждого инструменты. Если список инструментов отображается, соединение настроено.
6. Дайте ему что-нибудь для анализа. В большинстве сценариев нужно выбрать фрейм в Figma или вставить ссылку на него, а затем задать вопрос. Claude читает только то, на что вы укажете.

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

Каковы реальные ограничения Figma MCP?

Стоит узнать об этом до того, как вы потратите весь день.

• Вам нужен клиент с поддержкой MCP. Это может быть настольное приложение, редактор или терминал. Окно чата в браузере на бесплатном тарифе не подойдет.
• На практике доступ предоставляется либо ко всему, либо ни к чему. Персональный токен обычно дает доступ ко всем файлам, к которым может получить доступ ваша учетная запись. Если ваша учетная запись находится в общей организации, подумайте об этом, прежде чем создавать токен.
• Все ломается, когда что-то меняется. API меняются, серверы переписываются, обновление клиента меняет формат конфигурации. Все, что вы строите поверх этого, требует периодического обслуживания.
• Большие файлы съедают контекст. Экран с 400 слоями порождает много структурированных данных. Указание на один фрейм работает хорошо. Указание на весь файл часто - нет.
• Неаккуратные файлы приводят к неаккуратному результату. Если ваши слои называются Frame 217, а половина стилей отсоединена, сгенерированный код унаследует это. Коннектор читает то, что есть, но не приводит это в порядок.
• Он дает доступ, но не способность выносить суждения. Теперь Claude может видеть ваш дизайн. Сможет ли он оценить этот дизайн как старший дизайнер - совершенно отдельный вопрос, и именно его стоит решать следующим.

Что, если настройка MCP требует больше усилий, чем вам хотелось бы?

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

Если на самом деле вы хотите, чтобы Claude дал вам полноценную критику дизайна, план исследования или API компонента, который одобрил бы архитектор дизайн-систем, коннектор вам вообще не нужен. Вам нужно, чтобы Claude работал как такой специалист. Именно это делает файл Skill: короткий Markdown-документ, который вы загружаете один раз и который задает Claude одну роль, один метод и один стандарт результата. Установка занимает около трех минут и работает на любом тарифе, с MCP или без него. Несколько представленных ниже Skill для дизайна сейчас бесплатны, так что вы можете проверить эту идею, прежде чем что-либо тратить.

На практике лучше всего работает связка: MCP для чтения, Skill для анализа. Claude извлекает реальные значения из вашего файла, а затем применяет к ним метод, а не импровизирует.

Всего в бесплатной коллекции 32 бесплатных Skills, а более широкая подборка по дизайну находится в разделе Skills для творчества, контента и дизайна. Если вам нужна пошаговая инструкция по установке, см. как установить Skill для Claude.

Figma MCP: часто задаваемые вопросы

Figma MCP бесплатен?

Протокол является открытым стандартом, а сами серверы обычно можно установить бесплатно. Вам понадобится аккаунт Figma с доступом к файлам и AI-клиент с поддержкой MCP. Для некоторых AI-клиентов платный план нужен, чтобы пользоваться функциями, ради которых это вообще имеет смысл, поэтому стоимость связана скорее с этой стороной, а не с коннектором.

Может ли Claude редактировать мой файл Figma через MCP?

Считайте, что нет, если выбранный вами сервер явно не утверждает обратное. Большинство таких коннекторов предназначены для чтения: извлечения структуры, значений и содержимого. Доступ на запись встречается реже и работает менее стабильно, поэтому его стоит тестировать на дубликате файла, а не в рабочем файле.

Работает ли Figma MCP с Claude Code?

Да, в том смысле, что Claude Code в целом поддерживает MCP-серверы, поэтому их часто используют вместе для работы по принципу «дизайн-в-код». С одной стороны считывается фрейм, а с другой записывается компонент — в рамках одной сессии. То же самое относится к Claude Desktop и большинству редакторов с поддержкой AI.

Нужен ли мне Skill для дизайна, если я настроил Figma MCP?

Они отвечают на разные вопросы. MCP определяет, что может видеть Claude. Skill определяет, как Claude работает с увиденным, поэтому они дополняют, а не конкурируют друг с другом. Мы напрямую сравнили эти два подхода в Claude Skills и MCP.