figma
Use when the user wants Figma/FigJam work in NewBrain — generate UI designs, flowcharts, architecture diagrams, design-to-code, or design-system updates that should appear in a Figma file. Also use wh
SKILL.mdshared/apps/desktop/build/plugins/figma/skills/figma/SKILL.md
GitHubFigma (NewBrain builtin)
Use this router skill for any Figma-related request in NewBrain.
Auth gate (required for “appear in Figma”)
To create or edit nodes inside the user’s Figma/FigJam cloud file, NewBrain must have Figma tools available:
- Prefer Figma Desktop MCP (
http://127.0.0.1:3845/mcp) via 设置 → MCP → + Figma Desktop MCP (enable desktop MCP in Figma Dev Mode first), or - Another connected Figma MCP (e.g. remote
https://mcp.figma.com/mcpif OAuth works), or - Set
FIGMA_ACCESS_TOKENin settings → 环境 (Personal Access Token) as a secondary helper.
If neither MCP tools nor token-backed access is available:
- Say clearly that cloud Figma write is unavailable until auth is configured.
- Offer a local fallback: render a Mermaid flowchart in chat, or use the Visualize builtin for a local HTML diagram.
- Do not claim the diagram was written into Figma.
Skill routing
Load the matching specialized skill under this plugin when needed:
| Intent | Skill |
|---|---|
| Create/edit nodes via Plugin API scripts | figma-use |
| FigJam boards | figma-use-figjam |
| Slides | figma-use-slides |
| Motion | figma-use-motion / figma-implement-motion |
| Design → code | figma-design-to-code |
| Generate UI design | figma-generate-design |
| Design system / components | figma-generate-library |
| Flowchart / architecture / sequence → FigJam | figma-generate-diagram |
| New Figma/FigJam/Slides file | figma-create-new-file |
| Code Connect | figma-code-connect |
| SwiftUI | figma-swiftui |
Flowchart guidance
When the user asks for a flowchart / architecture / sequence diagram:
- If Figma MCP tools such as
generate_diagram/use_figmaexist → followfigma-generate-diagramso the result appears in FigJam. - Otherwise → produce Mermaid in chat (and optionally Visualize HTML), and explain how to connect Figma for cloud write.
Safety
- Never invent Figma file URLs or claim cloud writes without tool evidence.
- Keep
LICENSE.txtobligations; do not strip attribution when copying assets. - Prefer smallest edits; confirm destructive deletes with the user.