Figma plugin for Grok Build
Official Figma MCP server and skills for design-to-code workflows. Read design context from Figma files, implement designs, use Code Connect, write to the canvas, and generate Figma designs from web pages.
How to install Figma in Grok Build
grok plugin install figma --trustSource for this command: https://x.ai/news/grok-plugin-marketplace
Inside Grok Build: type /marketplace, find the plugin, press i to install.
--trust is required for skills, hooks and MCP servers to activate. Review a plugin before trusting it.
What it contains
MCP servers (1)
figma— http
Skills (16)
figma-code-connect— Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user m…figma-code-workflows— Import or upload local HTML or project files into Figma, choose editable Design frames, runnable Code Layers or standal…figma-create-new-file— Always use this skill when the user wants to create a new Figma Design, FigJam, or Slides file. You MUST invoke this sk…figma-design-to-code— **MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUS…figma-generate-design— Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layou…figma-generate-diagram— MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` direc…figma-generate-library— Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variable…figma-generative-plugins— **MANDATORY prerequisite** — load this skill before calling `create_generative_plugin` or `update_generative_plugin`. U…figma-implement-motion— Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion f…figma-shaders— **MANDATORY prerequisite** — load this skill before calling `create_shader` or `update_shader`. Use when the user asks…figma-spec— This skill is required to create, read, edit, review, or comment on Figma specs. You must read it when working on a PRD…figma-swiftui— SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction…figma-use— **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` dire…figma-use-figjam— This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has…figma-use-motion— Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles,…figma-use-slides— This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has…
About this listing
Figma is listed in xAI's official Grok Build plugin marketplace, so it shows up in Grok Build's built-in /marketplace browser and installs with a single command. According to the catalog's component index it bundles 1 MCP server, 16 skills. The marketplace pins it to commit f2789420e7e8 of its source repository, version 2.2.157. It's one of 133 listings in the Development category on GrokStacks.
Details
- Type
- Plugin
- Category
- Development
- Source
- Official Grok Build marketplace
- Version
- 2.2.157
- Keywords
- figma mcp
- Source repo
- https://github.com/figma/mcp-server-guide
- Pinned commit
f2789420e7e8- Listed in
- catalog file
- Tested by GrokStacks
- Not yet
Listed on GrokStacks badge
Maintain Figma? Add the badge; it links to this page.
Markdown
[](https://grokstacks.com/p/figma/)HTML
<a href="https://grokstacks.com/p/figma/"><img src="https://grokstacks.com/badge.svg" alt="Listed on GrokStacks" width="164" height="28"></a>Related development listings
Base44
Build and deploy Base44 full-stack apps with CLI project management and JavaScript/TypeScript SDK development skills.
Browser Use
Give Grok a real browser — the user's own Chrome, with their logins, or an isolated Browser Use Cloud browser. Use it whenever a task involves a website or web app: browsing, scraping and data extraction, filling forms, testing sites, taking screenshots, automating web workflows. Runs locally via uvx; no API key needed for local Chrome.
Bruin
Grok integration for Bruin — MetTel's Connectivity Management System for telecom expense, network monitoring, mobility, procurement, and IT ticketing across thousands of sites and 2,200+ vendors. Ships an expert Bruin Public API skill: OAuth 2.0 client-credentials, ticket creation with per-product note schemas for Smart Phones, Cable, Ethernet, Business Line, Starlink, SD-WAN, and PIAB, inventory/site/user endpoints, ticket-lifecycle webhooks, and multi-call workflows.
Chrome DevTools
Chrome DevTools integration. Control and inspect a live Chrome browser. Record performance traces, analyze network requests, check console messages with source-mapped stack traces, and automate browser actions.
Clerk
Official Clerk integration. Add Clerk authentication and user management with framework-specific setup, organizations, billing, webhooks, and testing guidance, and manage Clerk applications, users, and instance configuration.
Cloudflare
Skills for the Cloudflare developer platform: Workers, Durable Objects, Agents SDK, MCP servers, Wrangler CLI, and web performance.