LibreAI / Дизайн / figma-console-mcp
// design · southleft/figma-console-mcp

figma-console-mcp

figma-console-mcp — проект с открытым исходным кодом из категории «Дизайн» от southleft (southleft/figma-console-mcp на GitHub). У него 2 453 звезды на GitHub и 255 форков, он распространяется по лицензии MIT и последний раз обновлялся на GitHub 2 октября 2026.

Your design system as an API — an MCP server that connects AI to Figma for extraction, creation and debugging

★ 2,5 тыс. звёзд⑂ 255 форковMITобновлено окт. 2026
▦ визуал — в README этого проекта нет встраиваемого скриншота,
поэтому здесь заглушка. Руководство ниже в любом случае полное.
// факты о проекте

Факты о проекте

Репозиторий
southleft/figma-console-mcp
Звёзды GitHub
2 453
Форки
255
Лицензия
MIT
Последнее обновление на GitHub
2 октября 2026
Категория
Дизайн
Тип страницы
Полное руководство по установке
Официальный сайт
Official site
// как это работает

Как это работает

  1. Clarify your goal

    Decide your mode: full creation/editing (NPX setup, 121 tools), web AI clients (Cloud Mode, 96 tools) or read-only exploration (Remote SSE).

  2. Get a Figma token

    Create a personal access token in Figma with File content, File versions, Variables and Comments scopes.

  3. Configure your MCP client

    Add the npx figma-console-mcp server with FIGMA_ACCESS_TOKEN to Claude Code, Cursor, Windsurf or Claude Desktop (or use the claude mcp add one-liner).

  4. Connect and test

    Open Figma Desktop, import and run the Desktop Bridge plugin from the auto-created manifest path, restart your client, and ask it to check Figma status or create a frame.

// возможности

Почему его любят

Design-system extraction

Pull variables, components and styles as exact tokens, variants, bindings and states — structured data, not framework opinions.

Bidirectional token sync

Export Figma variables to DTCG JSON (plus 9 more formats) and push code-side edits back into Figma with full apply — replacing a Style Dictionary/Tokens Studio export pipeline.

Design creation and editing

Create UI components, frames and layouts directly in Figma, including one-call component-set creation from a variant matrix, in NPX/Cloud modes.

Deterministic checks

Design-code parity comparisons, 14 WCAG accessibility checks with conformance tagging, axe-core code scanning, and scored design-system health audits.

Version history tooling

List versions, diff snapshots, generate markdown changelogs and trace when a property or variant was introduced.

Codebase → design system

Scan a production codebase, mine its de-facto styling into DTCG tokens with provenance, scaffold a design-system package with a wired Storybook, and round-trip tokens into Figma (Local Mode).

Advertisement
// запустите сами

Запустите сами

  1. Clone the repo

    Clone Figma Console MCP for the Local Git/contributor setup; most users use npx in step 2.

    git clone https://github.com/southleft/figma-console-mcp.git
    cd figma-console-mcp
  2. Add via npx to your client

    For Claude Code, the README's one-liner registers the server with your token; other clients use the npx figma-console-mcp@latest config.

    claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_YOUR_TOKEN
  3. Connect the Desktop Bridge

    In Figma Desktop: Plugins → Development → Import plugin from manifest, select ~/.figma-console-mcp/plugin/manifest.json, run the plugin, restart your MCP client, and ask 'Check Figma status'.

    # see README for the exact command — plugin manifest path is auto-created by the server
// сценарии использования

Что можно создать

Advertisement
// вопросы и ответы

Вопросы и ответы

Who maintains Figma Console MCP?

southleft maintains it; documentation is at docs.figma-console-mcp.southleft.com.

Is it free?

The server is MIT-licensed and free. You need a Figma account and personal access token; Figma's own plan limits apply to your files.

Does it need a paid API key?

It needs a free Figma personal access token (not a paid API key). Your AI client (Claude etc.) has its own plan or key.

How does it compare to Figma's own MCP server?

This is an independent, design-system-focused server emphasizing bidirectional token sync, deterministic parity/accessibility/health checks and codebase-to-design-system extraction; check its docs for the current tool-by-tool comparison with your needs.

How do I get started?

Create a Figma token, add the npx server to your MCP client, import the Desktop Bridge plugin in Figma Desktop, restart the client, and test with 'Check Figma status'.

// продолжить изучение

Похожие инструменты

Дизайн

cursor-talk-to-figma-mcp

TalkToFigma — an MCP bridge letting Cursor, Claude Code or Codex read and modify Figma designs.

★ 7,0 тыс. звёздMIT
Смотреть руководство →
Дизайн

dembrandt

Extract any website's design system — logo, colours, typography and tokens — in one command.

★ 3,6 тыс. звёздMIT
Смотреть руководство →
Дизайн

design-md-figma

Figma plugin that turns your style guide into DESIGN.md and SKILL.md for AI

★ 153 звездыMIT
Смотреть руководство →
Дизайн

glade-mcp

Connect AI coding assistants to Unity or Godot with 275+ tools

★ 221 звездаMIT
Смотреть руководство →
Дизайн

tuui

Desktop MCP client that unifies AI tools across vendors

★ 1,2 тыс. звёздApache-2.0
Смотреть руководство →
Дизайн

poster-design

Open-source online poster and image designer with a full editor, admin backend, and built-in AI tools

★ 4,9 тыс. звёздAGPL-3.0
Смотреть руководство →
// альтернативы

Альтернативы: Дизайн

Другие проекты из категории «Дизайн» с наибольшим числом звёзд в каталоге LibreAI — реалистичный список альтернатив, если figma-console-mcp вам не подходит.

// ещё в категории design

Больше проектов: Дизайн

Соседние проекты из категории «Дизайн» в каталоге, ближайшие по числу звёзд к figma-console-mcp — продолжайте изучать полку по обе стороны от него.

Получить figma-console-mcp

Бесплатно и открыто — забирайте исходный код, ставьте звезду репозиторию и начинайте создавать.