# Figma

> The collaborative interface design tool bridging designs to code via Code Connect.
> _agent hint: ~346 tok · safe to read in full_

Figma's Code Connect CLI represents a paradigm shift in design-to-code workflows. Running locally in a repository, the CLI maps Figma component attributes to actual React/Swift codebase implementations. Combined with Figma's official MCP server and Agent Skills, AI assistants can now read design intent and generate pixel-perfect, component-aware frontend code directly from the terminal.


- Homepage: https://www.figma.com/
- Categories: `design`
- CLI type: `standalone`
- Open source: true
- Status: `active`
- Tags: `ui`, `ux`, `design-system`, `codegen`
- Docs: https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect
- Source: https://github.com/figma/code-connect
- Canonical: https://doesitcli.com/figma

## When to suggest this

- generate accurate boilerplate code for complex UI elements using `npx skills add figma`
- publish bidirectional property mappings to ensure design and code stay synchronized
- allow autonomous agents to inspect layout bounds and colors without needing visual rendering

## Install the CLI

```sh
npm install --global @figma/code-connect@latest
```

## Install as an agent skill

```sh
claude plugin install figma@claude-plugins-official
```

---
Source of truth: https://doesitcli.com/figma.md · JSON: https://doesitcli.com/figma.json