# glips/figma-context-mcp

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/glips-figma-context-mcp).**

15,126 stars · 1,195 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/GLips/Figma-Context-MCP
- Homepage: https://www.framelink.ai/
- awesome-repositories: https://awesome-repositories.com/repository/glips-figma-context-mcp.md

## Topics

`ai` `cursor` `figma` `mcp` `typescript`

## Description

Figma-Context-MCP is a design-to-code automation tool that functions as a server for the Model Context Protocol. It acts as a bridge between visual design platforms and development environments, enabling large language models to access design file metadata and component properties directly.

The project distinguishes itself by providing a standard-compliant interface that translates design specifications into structured data. By extracting layout and styling information, it facilitates the programmatic conversion of design tokens and component requirements into actionable code structures.

This tool supports automated frontend development by providing context-aware data to AI agents, ensuring that generated interfaces align with original visual intent. It covers the full design handoff process, from the retrieval of design metadata to the implementation of consistent design systems across a codebase.

## Tags

### Artificial Intelligence & ML

- [MCP Server Integrations](https://awesome-repositories.com/f/artificial-intelligence-ml/artificial-intelligence-tooling/agent-and-tool-integrations/mcp-server-integrations.md) — Connects design files to AI agents as a specialized server for the Model Context Protocol.
- [Model Context Protocol Implementations](https://awesome-repositories.com/f/artificial-intelligence-ml/model-context-protocol-implementations.md) — Implements the Model Context Protocol to provide AI models with direct access to design metadata.
- [AI Development Assistants](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-development-assistants.md) — Provides context-aware design data to large language models to improve generated code quality.

### User Interface & Experience

- [Design-to-Code Tools](https://awesome-repositories.com/f/user-interface-experience/design-to-code-tools.md) — Acts as a bridge between visual design platforms and development environments to automate code structure generation.
- [Design Handoff Tools](https://awesome-repositories.com/f/user-interface-experience/design-handoff-tools.md) — Translates visual design specifications into structured data to streamline the design-to-code handoff process.
- [Design-to-Code Generators](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/workflow-automation-tools/design-to-code-tools/design-to-code-generators.md) — Extracts layout and styling data from design files to generate accurate frontend code. ([source](https://www.framelink.ai/docs))

### Part of an Awesome List

- [Development Tools](https://awesome-repositories.com/f/awesome-lists/devtools/development-tools.md) — Bridge for accessing Figma design files and context.
- [Media and Content Creation](https://awesome-repositories.com/f/awesome-lists/media/media-and-content-creation.md) — Converts Figma design layouts into code for AI agents.

### Software Engineering & Architecture

- [Design System Implementations](https://awesome-repositories.com/f/software-engineering-architecture/design-system-implementations.md) — Facilitates consistent design system implementation by programmatically extracting tokens and component specifications.

### Development Tools & Productivity

- [Agent Protocol Bridges](https://awesome-repositories.com/f/development-tools-productivity/ai-coding-assistants/agent-protocol-bridges.md) — Provides middleware that bridges design platform APIs with development environments using standardized protocols.