# Tools

> Every listed resource, editors’ picks first. The filters below can be combined.

- Search: append `?q=<keywords>` to the URL. Separate several keywords with spaces; all of them must match. Matches name, repository, tags, professions, description and README.
- Filter by type: append `?type=<cli|skill|plugin|mcp>` to the URL.
- Filter by profession: append `?profession=<profession id>` to the URL. Separate several ids with commas; a resource matches when it suits any of them. Ids are listed at https://hebbmind.com/api/v1/professions
- Filter by tag: append `?tag=<tag>` to the URL. Separate several tags with commas; a resource must carry all of them. Tags are listed at https://hebbmind.com/api/v1/tags

Resources for Full-stack / Indie or ML / AI or Design, Tagged `figma`: 28 items.

> - Full-stack / Indie: General software work: coding-agent workflows, code review, debugging and Git collaboration.
> - ML / AI: Model training, evaluation and LLM application development.
> - Design: Interface, interaction, visual and brand design.

- [Figma MCP Server](https://hebbmind.com/mcp/mcp-server-guide.md): [MCP] Figma's official remote MCP: hands components, variables and layout from your designs to the agent to generate code, and can create and edit designs on the canvas. Needs Figma sign-in; Starter plans and View or Collab seats get only 6 read calls a month.
- [Framelink MCP for Figma](https://hebbmind.com/mcp/figma-context.md): [MCP] Simplifies Figma designs into layout and style data for coding agents, so UIs built from the design are more accurate than working from screenshots. Requires a Figma personal access token.
- [Figma (Codex)](https://hebbmind.com/plugin/figma.md): [Plugin] Figma's Codex plugin in OpenAI's official marketplace: implements UI from designs, generates Code Connect mappings, and creates or updates pages, component libraries, FigJam diagrams and slides in Figma. Needs a connected Figma account.
- [Talk to Figma MCP](https://hebbmind.com/mcp/cursor-talk-to-figma-mcp.md): [MCP] Uses a Figma plugin and a local WebSocket server so agents can read and directly edit designs: create frames and text, adjust auto layout and styles, and replace copy in bulk. Requires Bun; now maintained by Grab.
- [Figma Console MCP](https://hebbmind.com/mcp/figma-console-mcp.md): [MCP] Lets agents read and write Figma: extract variables, components and styles, create and edit screens, FigJam boards and slides on the canvas, and run accessibility checks and design-system audits. Needs a Figma personal access token, the Figma desktop app, Node.js and the companion plugin.
- [figma-generate-design](https://hebbmind.com/skill/figma-generate-design.md): [Skill] Builds editable Figma designs on the canvas from screens, modals or sidebars in your code, or from a text description, reusing components and variables from the file's published design system first. Maintained by Figma; needs the remote Figma MCP server and the figma-use skill.
- [Figma Design to Code](https://hebbmind.com/skill/figma-implement-design.md): [Skill] Turns Figma designs into production code in your project, using the design screenshot as the visual target and reusing existing components, design tokens and Code Connect mappings first. Maintained by Figma; needs the Figma MCP server (free plans get only 6 calls a month).
- [Figma MCP Server Guide](https://hebbmind.com/plugin/mcp-server-guide.md): [Plugin] Figma's official plugin: connects the remote Figma MCP server and bundles skills for design-to-code, Code Connect, and generating designs and libraries, letting agents read design context and write to the canvas. Needs a Figma account; Starter plans and View/Collab seats get 6 calls a month.
- [Figma Skills (mcp-server-guide)](https://hebbmind.com/skill/figma-skills.md): [Skill] Figma's official skill collection: implement designs as code, map components with Code Connect, generate design-system libraries from code, and build screens and FigJam diagrams on the canvas. Needs the Figma MCP server; canvas writes are in beta and currently free.
- [Figma Use](https://hebbmind.com/skill/figma-use.md): [Skill] Figma's official skill that teaches agents to run Plugin API scripts via use_figma, creating and editing nodes, components, variables and auto layout directly on the canvas. Load it before any use_figma call. Needs a Figma account and the remote MCP server.
- [figma-generate-diagram](https://hebbmind.com/skill/figma-generate-diagram.md): [Skill] Figma's official skill: the agent writes Mermaid, then uses the Figma MCP to build flowcharts and sequence, state, Gantt and ER diagrams in FigJam for you to tweak by hand. Unsupported types like pie charts and mind maps are flagged upfront. Needs a Figma account and the remote MCP server.
- [figma-use-figjam](https://hebbmind.com/skill/figma-use-figjam.md): [Skill] Figma's official skill for building FigJam boards through the Figma MCP: sticky notes, sections, connectors, shapes and tables for brainstorms, retros and meetings. Needs a Figma account, the remote MCP server and the figma-use skill; canvas writes are free in beta; usage pricing is planned.
- [Figma Code Connect](https://hebbmind.com/cli/code-connect.md): [CLI] Figma's official CLI that links Figma design-system components to real components in your code, so Dev Mode and the Figma MCP show production snippets instead of generated examples. Needs Node.js 18+, a Figma Organization or Enterprise plan, a full Design or Dev Mode seat and an access token.
- [Figwright](https://hebbmind.com/mcp/figwright.md): [MCP] Free two-way Figma MCP that needs no paid Dev Mode seat: turns designs into code that fits your existing project, or builds pages and components on the canvas from a description, with data staying on your machine. Needs Node.js 20.19+, the Figma desktop app and the companion plugin.
- [Claude Talk to Figma MCP](https://hebbmind.com/mcp/claude-talk-to-figma-mcp.md): [MCP] Lets Claude Code, Cursor and others read and edit Figma designs via a plugin bridge: batch-change colors and fonts, check contrast, generate component code. Free Figma accounts work. Needs Node.js, Figma Desktop, the local WebSocket server running and the plugin imported.
- [figma-use](https://hebbmind.com/cli/figma-use.md): [CLI] Read and write Figma from the terminal with commands or JSX: create frames and components, insert Iconify icons, set layout, and export nodes as JSX or Storybook; can also run as an MCP server. Needs Figma Desktop; version 126+ requires daemon --pipe mode.
- [Blueprint Animation](https://hebbmind.com/skill/blueprint-animation.md): [Skill] Creates a blueprint-style animation that explains UX decisions step by step for case studies and posts: rebuilds changed parts between Before and After screens, or annotates each module of one screen. Reproduces Figma frames 1:1; CC BY-NC 4.0, non-commercial only.
- [F2C MCP Server](https://hebbmind.com/mcp/f2c-mcp.md): [MCP] Hands Figma node layout, styles and images to AI coding tools to turn into high-fidelity HTML/CSS, React or Tailwind code, and downloads design images locally. Needs a Figma personal access token; sends basic usage stats; switch to the plugin version if you hit Figma API rate limits.
- [figma-export](https://hebbmind.com/cli/figma-export.md): [CLI] Exports Figma components (such as a full icon set) to SVG in bulk and styles like colors, text and shadows to Sass/SCSS variables or Style Dictionary tokens, keeping site icons and styles in sync with designs. Needs Node.js, a Figma token (FIGMA_TOKEN) and the matching output plugins.
- [Create Anatomy](https://hebbmind.com/skill/create-anatomy.md): [Skill] Renders a component anatomy annotation in Figma: numbered markers on an instance with an attribute table, plus a section per sub-component listing its internal elements, hidden ones included. Part of uSpec; needs the .md spec from create-component-md, a Figma MCP and a configured template.
- [Create Voice](https://hebbmind.com/skill/create-voice.md): [Skill] Renders a screen reader spec for a component directly in Figma: focus order plus per-state VoiceOver (iOS), TalkBack (Android) and ARIA (Web) property tables and announcements. Part of uSpec; reads the component .md spec from create-component-md and needs a Figma MCP and a configured template key.
- [Apply Design System](https://hebbmind.com/skill/apply-design-system.md): [Skill] Reconnects an existing Figma design to published design-system components. Backs up the frame, classifies each section as already connected, exact swap, compose from primitives or blocked, then replaces detached layers and local wrappers one section at a time. Needs Figma MCP.
- [Audit Design System](https://hebbmind.com/skill/audit-design-system.md): [Skill] Audits a Figma screen or component for design-system drift, read-only: shared primitives rebuilt as plain frames, hard-coded values instead of variables, and variant drift. Each finding cites structural evidence and may suggest a replacement. Outputs Markdown or JSON; needs Figma MCP.
- [Fix Design System Finding](https://hebbmind.com/skill/fix-design-system-finding.md): [Skill] Fixes one design-system finding in a Figma screen, typically from Audit Design System. Checks the fix is feasible, backs up only the affected node, applies the smallest change (swap instance, compose from primitives, bind tokens or align variant) and verifies it locally. Needs Figma MCP.
- [CC Figma Component](https://hebbmind.com/skill/cc-figma-component.md): [Skill] Reads a component-contracts contract JSON, derives component-scoped tokens and builds a fully variable-bound Figma component set with all variants. Requires cc-figma-tokens to have run first, plus the figma-use and figma-generate-library skills.
- [CC Figma Tokens](https://hebbmind.com/skill/cc-figma-tokens.md): [Skill] Syncs component-contracts token files in W3C DTCG format into native Figma variables, building Primitives and Semantic collections with role-based scopes and web code syntax after you approve a plan. Prerequisite for cc-figma-component.
- [Sync Figma Token](https://hebbmind.com/skill/sync-figma-token.md): [Skill] Syncs design tokens between code and Figma variables: normalizes both sides, reports drift by value, alias, mode and scope in a dry run, then stops for explicit approval before writing, archives rather than deletes, and saves JSON reports. Requires the Figma MCP server; invoked manually.
- [Balise UX Writing](https://hebbmind.com/skill/balise-ux-writing.md): [Skill] Reviews, rewrites, generates or harmonizes interface copy inside a Figma file, covering buttons, forms, errors, empty states, onboarding, confirmations and consent; edits only the selection, preserves components and Auto Layout, and never invents product facts.
