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, и что текстовый стиль называется body/regular а не "меньшая серая".
У Figma есть официальный сервер, ориентированный на процессы преобразования дизайна в код, а также существуют реализации сообщества, которые читают файлы через публичный API Figma. Они отличаются способом аутентификации и объёмом доступных данных файла, но со стороны Claude все они выглядят одинаково: как список доступных инструментов, которые он может вызывать, когда этого требует ваш запрос. Если сначала вам нужен более широкий контекст, мы написали простое объяснение на английском о том, что такое MCP и зачем он нужен.
Что Figma MCP на самом деле позволяет делать Claude?
Интересно не то, что "Claude видит ваш файл". Интересно то, какие задачи перестают быть ручными.
- Превратите выбранный фрейм во фронтенд-код, соответствующий файлу. Не грубая приблизительная копия изображения, а отступы, иерархия и названия компонентов, взятые непосредственно из дизайна. Вы всё равно проверяете результат. Вам больше не нужно перепечатывать значения.
- Извлеките дизайн-токены из файла. Цветовые стили, типографическую шкалу, шаги отступов, радиусы скругления - экспортируйте их как переменные в формате, который использует ваша кодовая база.
- Проверьте файл на соответствие его собственной системе. Какие слои используют жёстко заданный hex-код вместо стиля, в каких фреймах используются значения отступов, больше нигде не встречающиеся, какие компоненты были отсоединены и незаметно изменены.
- Пишите заметки и спецификации для передачи в разработку. Состояния, крайние случаи, пустые состояния, поведение при ошибке - всё описывается на основе реальных фреймов, а не по памяти.
- Проверяйте UX-тексты в контексте. Все строки в рамках одного сценария, прочитанные по порядку, чтобы можно было заметить три разных слова, обозначающих одно и то же действие.
- Отвечайте на вопросы о большом файле. Где используется этот компонент, что изменилось в этой ветке, на каких экранах всё ещё используется старый логотип.
В основе всего этого лежит одна идея: Figma MCP устраняет копирование и вставку между дизайном и всеми последующими этапами. Это действительно полезно, но на этом его преимущества заканчиваются. Он не принимает дизайнерских решений.
Как настроить сервер Figma MCP?
Конкретные шаги различаются в зависимости от сервера и клиента и меняются достаточно часто, поэтому скопированная из статьи в блоге команда - хороший способ потерять двадцать минут. Общая схема процесса стабильна, так что изучите именно её.
- Выберите сервер. Если ваша цель - преобразование дизайна в код прямо в редакторе, начните с официального сервера Figma. Если нужен доступ к файлам через API без запущенного десктопного приложения, обратите внимание на сторонние серверы. И те и другие перечислены в общедоступных каталогах серверов MCP.
- Настройте доступ. Официальные инструменты обычно используют выполненный вход в вашу сессию Figma и требуют включить соответствующую настройку в приложении. Для сторонних серверов обычно нужен персональный токен доступа, который создаётся в настройках аккаунта Figma. Относитесь к этому токену как к паролю: с его помощью можно прочитать всё, что доступно вам для чтения.
- Добавьте сервер в конфигурацию MCP вашего клиента. Claude Desktop, Claude Code и большинство редакторов с поддержкой AI считывают файл конфигурации со списком доступных серверов, командами для запуска каждого из них и необходимыми учётными данными. Вам нужно добавить одну запись.
- Перезапустите клиент. Почти за каждым сообщением «это не работает» стоит клиент, который не перезапустили после изменения конфигурации.
- Проверьте подключение. Ваш клиент покажет подключённые серверы и доступные в каждом из них инструменты. Если список инструментов отображается, всё подключено правильно.
- Дайте ему что-нибудь для анализа. В большинстве рабочих процессов нужно выбрать фрейм в Figma или вставить ссылку на него, а затем задать вопрос. Claude читает только то, на что вы указываете.
При первой попытке люди обычно сталкиваются с двумя проблемами. Серверы, работающие через десктопное приложение Figma, требуют, чтобы приложение было открыто, а файл - загружен, поэтому после его закрытия ничего не произойдёт. Кроме того, большинство серверов ориентированы на чтение: они гораздо лучше рассказывают, что находится в файле, чем изменяют его.
Каковы реальные ограничения Figma MCP?
Полезно знать об этом, прежде чем потратить весь день.
- Вам нужен клиент с поддержкой MCP. Это может быть десктопное приложение, редактор или терминал. Окно чата в браузере на бесплатном тарифе не подойдёт.
- На практике доступ либо предоставляется полностью, либо не предоставляется вовсе. Персональный токен обычно дает доступ ко всем файлам, к которым может получить доступ ваша учетная запись. Если ваша учетная запись находится в общей организации, подумайте об этом, прежде чем создавать токен.
- Все ломается, когда что-то меняется. API меняются, серверы переписываются, обновление клиента меняет формат конфигурации. Все, что вы строите поверх этого, требует периодического обслуживания.
- Большие файлы съедают контекст. Экран с 400 слоями создает большой объем структурированных данных. Указание на один фрейм работает хорошо. Указание на весь файл часто не работает.
- Неаккуратные файлы порождают неаккуратный результат. Если ваши слои называются Frame 217, а половина стилей отсоединена, сгенерированный код унаследует это. Коннектор считывает то, что есть, но не приводит это в порядок.
- Он дает доступ, но не способность выносить суждения. Теперь Claude может видеть ваш дизайн. Сможет ли он оценить этот дизайн как старший дизайнер - совершенно отдельный вопрос, и именно его стоит решить следующим.
Что, если настройка MCP требует больше усилий, чем вам хотелось бы?
Вот различие, которое помогает сэкономить много времени. MCP определяет, к чему Claude может получить доступ. Он ничего не говорит о том, насколько хорошо Claude работает после получения доступа. Это две разные проблемы, и у большинства команд дизайна проблема именно вторая, а не первая.
Если на самом деле вы хотите, чтобы Claude проводил полноценный дизайн-ревью, составлял план исследования или создавал API компонента, который одобрил бы архитектор дизайн-систем, коннектор вам вообще не нужен. Вам нужно, чтобы Claude работал как такой специалист. Именно это делает файл Skill: короткий документ в формате Markdown, который вы загружаете один раз и который задает Claude одну роль, один метод и один стандарт результата. Установка занимает около трех минут и работает на любом плане, с MCP или без него. Несколько представленных ниже Skill для дизайна сейчас бесплатны, поэтому вы можете проверить идею, прежде чем что-либо тратить.
Дизайнер, а не коннектор
Бесплатно
этот Skill
Потоки, состояния, иерархия и логика взаимодействия, разобранные так, как это сделал бы продуктовый дизайнер: для чего нужен экран, чего не хватает, что делает пользователь, когда что-то идет не так. Вставьте экран или опишите его - коннектор не нужен.
Посмотреть Denholm →Связка, которая лучше всего работает на практике: MCP для чтения, Skill для мышления. Claude извлекает реальные значения из вашего файла, а затем применяет к ним метод, вместо того чтобы импровизировать.
Для работы с токенами и компонентами
$29
этот Skill
Именование токенов, API компонентов, структура вариантов и правила, по которым что-то получает место в системе. Именно тот слой суждений, который располагается поверх необработанных данных, передаваемых вам коннектором Figma.
Посмотреть Vashti →До того, как что-либо будет спроектировано
Бесплатно
этот Skill
Планы исследований, сценарии непредвзятых интервью и методика превращения расшифровок в выводы, которые команда может использовать в работе. Сейчас этот Skill тоже доступен бесплатно, поэтому это недорогой способ проверить, меняют ли Skills ваши результаты вообще.
Посмотреть Melisande →Всего в бесплатной коллекции 32 бесплатных Skills, а более широкий набор для дизайна находится в разделе Skills для творчества, контента и дизайна. Если вам нужна пошаговая инструкция по установке, ознакомьтесь с материалом как установить Skill для Claude.
Вкратце:
Figma MCP подключает Claude к вашим настоящим файлам дизайна, поэтому он работает со структурой, а не со скриншотами. Настройка оправданна, если вы регулярно генерируете код или извлекаете токены. Она не влияет на качество дизайнерских решений Claude - именно это исправляет skill-файл: начните с Denholm - UX/UI Product Designer, который прямо сейчас доступен бесплатно, а когда токены и компоненты станут проблемой, добавьте Vashti - Design Systems Architect за $29.
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 vs MCP.
