F2C MCP
MCP-сервер сервиса F2C: по ссылке на узел Figma агент получает верстку на HTML, React или Tailwind и локальные картинки
- 410 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Токен Figma открывает чтение ваших файлов, и его нужно хранить в настройках клиента
- Сервер скачивает картинки на диск и отправляет базовую статистику использования
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/f2c-mcpОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Токен Figma открывает чтение ваших файлов, и его нужно хранить в настройках клиента
- Сервер скачивает картинки на диск и отправляет базовую статистику использования
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Сервер F2C превращает макет Figma в код. Вы копируете ссылку на узел в панели слоев Figma, вставляете ее в чат IDE с MCP, например в Cursor, и описываете задачу: получить данные узла, скачать картинки, преобразовать в код. Сервис собирает HTML и CSS с сохранением размеров макета, а также React, CSS Modules и Tailwind CSS. Контекст дизайна передается так, чтобы им могли пользоваться ИИ-инструменты вроде Cursor. Картинки из Figma сервер сам скачивает в локальные ресурсы проекта, и код ссылается на них по относительным путям. Сервер запускается через npx как процесс stdio, а при необходимости работает по потоковому HTTP или SSE на локальном порту. Для доступа к макетам нужен персональный токен Figma.
Для кого. Для фронтенд-разработчиков и верстальщиков, которые получают макеты в Figma и хотят заготовку интерфейса прямо в IDE с агентом.
Подходит, если
- Нужно перенести экран из Figma в React-компонент с Tailwind CSS, начав со ссылки на узел
- Макет нужно получить как HTML и CSS с точными размерами, чтобы затем править код руками
- Картинки из макета нужны в папке проекта, ссылки на Figma не подходят
- Агенту нужен контекст дизайна, чтобы он сверял код с макетом внутри Cursor
- Сервер нужно подключить к IDE по HTTP или SSE на локальном порту, без дочернего процесса
Не подходит, если
- Нет токена Figma: без него сервер не получит доступ к макетам
- Вы упираетесь в лимиты REST API Figma: для этого случая авторы советуют пакет `@f2c/mcp-plugin`
- Нужно рисовать или менять макеты в Figma: сервер читает дизайн и выдает код
- Данные об использовании не должны уходить наружу: проект отправляет базовую статистику и отчеты об ошибках
Пример запроса к агенту
Вот ссылка на узел Figma. Скачай картинки и преврати макет в React-компонент с Tailwind CSS, сохранив размеры.MCP
- Транспорт
- stdio, http, sse
- Авторизация
- API-ключ
Переменные окружения
personalTokenобязательная, секрет- Персональный токен доступа Figma
Ограничения
Нужны Node.js и персональный токен Figma. Токен передается переменной окружения personalToken или флагом `--figma-api-key`. Адрес сервиса F2C в проекте указан как f2c.yy.com.
Проект отправляет базовую статистику использования и отчеты об ошибках. Авторы утверждают, что чувствительные данные и данные пользователей при этом не собираются.
Сервер работает с узлами, ссылку на которые копируют из панели слоев Figma. Доступность Figma и F2C из России при подготовке карточки не проверялась. Последние изменения в репозитории датированы ноябрем 2025 года.
Как отключить. Удалите запись f2c-mcp из файла настроек MCP вашей IDE и перезапустите ее. Если ставили пакет глобально, удалите его командой `npm uninstall -g @f2c/mcp`. Токен Figma можно отозвать в настройках аккаунта Figma.
Частые вопросы
Как подключить F2C MCP к Cursor?
Добавьте в настройки MCP запись f2c-mcp с командой `npx -y @f2c/mcp` и переменной personalToken с токеном Figma. На Windows команду запускают через `cmd /c`. В документации есть кнопки установки в один клик для Cursor.
Где взять токен Figma для F2C?
Это персональный токен доступа, который создается в справке Figma в разделе управления персональными токенами. Его вставляют в переменную personalToken или передают флагом `--figma-api-key=`.
Что делать при ошибке spawn npx ENOENT?
Клиент не нашел npx в своем окружении. Добавьте в блок env записи сервера переменную PATH, где перечислены каталоги с Node.js, или поставьте пакет глобально командой `npm install -g @f2c/mcp` и запускайте `f2c-mcp`.
Какие фреймворки поддерживает F2C?
Сервис генерирует HTML и CSS с точными размерами, React, CSS Modules и Tailwind CSS. Для других фреймворков код придется адаптировать вручную.
Что делать, если упираетесь в лимиты Figma?
Лимиты REST API Figma могут помешать работе сервера. Авторы советуют в таком случае перейти на пакет `@f2c/mcp-plugin`, который выпускается отдельно.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыFigma To Code MCP — макет Figma в код
Figma To Code MCP
Figma в код через MCP: сервер отдает агенту макет в виде компактного YAML с именами свойств как в CSS, раскрытыми переменными и вынесенными в файл SVG
Официальный MCP-сервер Figma: код по выбранному фрейму, переменные и компоненты дизайн-системы, запись макетов прямо на холст
MCP-сервер, который передает агенту упрощенные данные макета Figma по ссылке, чтобы тот сверстал экран точнее, чем по скриншоту
Бесплатный двусторонний MCP-сервер для Figma: превращает дизайн в код с учетом фреймворка и возвращает код обратно на холст
Figma Console MCP
figma-console-mcp
MCP-сервер Figma для дизайн-систем в обе стороны: читает и записывает переменные, компоненты и стили, синхронизирует токены с кодом
MCP-сервер, который дает агенту читать и менять макеты Figma: цвета, типографику, компоненты, экспорт
Сравнение с похожими
Записи с тем же главным запросом: чем они отличаются.
| Запись | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| F2C MCP (эта запись) | да | API-ключ | 410 | |
| Framelink MCP for Figma | нет | API-ключ | 16 101 | отдает агенту упрощенные данные о разметке, а F2C сам собирает HTML, React и Tailwind |
| Figma To Code MCP — макет Figma в код | нет | API-ключ | 7 | передает разметку как компактный YAML со свойствами CSS, а F2C выдает готовый код и скачивает картинки |
Коротко о README
Описание перечисляет пять возможностей сервиса и четыре шага работы в IDE. Установка и разработка вынесены в страницу «Начало работы», типичная ошибка запуска разобрана в разделе вопросов. В конце авторы благодарят проекты Framelink, Cursor Talk to Figma и Figma MCP Server, на которых строились.