# Understanding get_design_context Output Formats and Customization in the Figma MCP Server

> Customize get_design_context output formats in Figma MCP Server. Learn to modify React and Tailwind code using prompts, component mapping, or design system rules.

- Repository: [Figma/mcp-server-guide](https://github.com/figma/mcp-server-guide)
- Tags: deep-dive
- Published: 2026-03-30

---

**`get_design_context` returns React and Tailwind code by default, but you can customize the output format through natural language prompts, component mapping, or design system rules without modifying the server code.**

The `get_design_context` tool is the central data extraction utility in the **figma/mcp-server-guide** repository. It transforms Figma node selections into structured design data that AI agents can convert into implementation code. While the default output targets React with Tailwind CSS, the architecture intentionally supports multiple customization paths that let you reshape the generated code to match your project's framework and conventions.

## Default React and Tailwind Output Format

When you invoke `get_design_context` with a Figma file key and node ID, the MCP server returns a JSX representation that mirrors the visual hierarchy, layout, and styling of your selection. According to the repository's [[`README.md`](https://github.com/figma/mcp-server-guide/blob/main/README.md)](https://github.com/figma/mcp-server-guide/blob/main/README.md) and [[`figma-power/POWER.md`](https://github.com/figma/mcp-server-guide/blob/main/figma-power/POWER.md)](https://github.com/figma/mcp-server-guide/blob/main/figma-power/POWER.md) (lines 36-37), this default format includes:

- **JSX elements** that match the Figma node hierarchy
- **Tailwind utility classes** encoding layout (`flex`, `gap`, `padding`), typography (`text-2xl`, `font-bold`), colors, and spacing
- **Minimal component wrappers** that serve as placeholders for your project-specific components

```tsx
export default function Component() {
  return (
    <div className="flex flex-col gap-4 p-4">
      <h1 className="text-2xl font-bold">Title</h1>
      <p className="text-base text-gray-700">
        Lorem ipsum dolor sit amet…
      </p>
      <button className="px-4 py-2 bg-primary-500 text-white rounded">
        Click me
      </button>
    </div>
  )
}

```

As documented in [[`skills/figma-implement-design/SKILL.md`](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-implement-design/SKILL.md)](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-implement-design/SKILL.md) (lines 110-118), the MCP server treats this output as a **starting point representation** rather than final production code.

## Architecture and Source Documentation

The behavior of `get_design_context` is defined across three key locations in the repository:

| Component | Purpose | Source Location |
|-------------|---------|-----------------|
| **Tool definition** | Declares the tool and its React + Tailwind output type | [[`README.md`](https://github.com/figma/mcp-server-guide/blob/main/README.md)](https://github.com/figma/mcp-server-guide/blob/main/README.md) (Tools and usage suggestions section) |
| **Skill implementations** | Describes how agents should treat and reshape the output | [[`skills/figma-implement-design/SKILL.md`](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-implement-design/SKILL.md)](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-implement-design/SKILL.md) |
| **Power steering table** | Concise summary of tool capabilities | [[`figma-power/POWER.md`](https://github.com/figma/mcp-server-guide/blob/main/figma-power/POWER.md)](https://github.com/figma/mcp-server-guide/blob/main/figma-power/POWER.md) (lines 36-37) |

## Customizing the Output Format

The Figma MCP server uses a **prompt-driven architecture** that allows you to customize `get_design_context` results without forking or modifying the server code. You can steer the output through four primary mechanisms:

### Changing the Target Framework

To generate code for a different framework, include a natural language instruction in the same prompt that calls `get_design_context`. As shown in [[`README.md`](https://github.com/figma/mcp-server-guide/blob/main/README.md)](https://github.com/figma/mcp-server-guide/blob/main/README.md) (lines 7-11), simply append your framework preference:

```bash
User: Generate my Figma selection in Vue.
Assistant: #get_design_context fileKey="kL9xQn2VwM8pYrTb4ZcHjF" nodeId="42-15"

```

The agent receives the default React output, then rewrites it to Vue syntax while preserving the layout structure:

```vue
<template>
  <div class="flex flex-col gap-4 p-4">
    <h1 class="text-2xl font-bold">Title</h1>
    <p class="text-base text-gray-700">Lorem ipsum …</p>
    <button class="px-4 py-2 bg-primary-500 text-white rounded">
      Click me
    </button>
  </div>
</template>

<script setup />

```

### Reusing Existing Code Components

You can map the generated UI onto components already present in your codebase by referencing them in your prompt. According to [[`README.md`](https://github.com/figma/mcp-server-guide/blob/main/README.md)](https://github.com/figma/mcp-server-guide/blob/main/README.md) (lines 13-17), instruct the agent to query `get_code_connect_map` (or its suggestions) to locate matching components before rendering:

```bash
User: Generate the card using my existing Card component from src/components/ui.

```

The agent workflow becomes:
1. Call `get_design_context` to extract the Figma node data
2. Call `get_code_connect_map` to find the mapping between the Figma node and your `Card` component
3. Render JSX that imports your existing component instead of generating new markup

```tsx
import { Card } from "@/components/ui/Card";

export default function CardFromFigma(props) {
  return (
    <Card title="Title" description="Lorem ipsum…">
      <button className="px-4 py-2 bg-primary-500 text-white rounded">
        Click me
      </button>
    </Card>
  );
}

```

### Applying Design System Rules

For project-specific styling conventions, use the `create_design_system_rules` tool to generate constraint files. As documented in [[`skills/figma-create-design-system-rules/SKILL.md`](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-create-design-system-rules/SKILL.md)](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-create-design-system-rules/SKILL.md) (steps 1-5), these rules can force different CSS-in-JS approaches, replace Tailwind classes with custom tokens, or enforce naming conventions.

After establishing rules, when you request implementation:

```bash
User: Implement the button, respecting our token system.

```

The agent translates the raw `get_design_context` output accordingly:

```tsx
export default function Button() {
  return (
    <button
      className="px-4 py-2 rounded"
      style={{ backgroundColor: theme.colors.primary }}
    >
      Click me
    </button>
  );
}

```

### Fine-grained Prompt Modifiers

You can add specific constraints directly in your prompt to control output formatting. Add modifiers like *"use only atomic components,"* *"avoid inline Tailwind,"* or *"output plain HTML + CSS."* The LLM interprets these cues and rewrites the snippet while preserving the layout extracted by `get_design_context`.

## Implementation Workflow

The complete data flow when using `get_design_context` follows this sequence:

1. **User prompt** provides a Figma URL (e.g., "Implement this button")
2. **Agent extracts** the `fileKey` and `nodeId` from the URL
3. **Agent calls** `get_design_context` with those identifiers
4. **MCP server translates** the node tree into JSX + Tailwind representation
5. **Agent checks** for custom rules (if `create_design_system_rules` was previously run) and **applies user-provided modifiers**
6. **Final code returns** to the user or writes back into the project via `use_figma` or `send_code_connect_mappings`

This workflow is detailed in the 7-step implementation guide within [[`skills/figma-implement-design/SKILL.md`](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-implement-design/SKILL.md)](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-implement-design/SKILL.md).

## Summary

- **`get_design_context`** returns structured design data as **React and Tailwind** code by default, serving as a visual representation of the Figma node hierarchy.
- The tool definition lives in **[`README.md`](https://github.com/figma/mcp-server-guide/blob/main/README.md)**, skill behaviors are documented in **[`SKILL.md`](https://github.com/figma/mcp-server-guide/blob/main/SKILL.md)** files, and capabilities are summarized in **[`figma-power/POWER.md`](https://github.com/figma/mcp-server-guide/blob/main/figma-power/POWER.md)**.
- You can **change frameworks** (Vue, Svelte, plain HTML) through natural language prompts without server modifications.
- **Component reuse** works by combining `get_design_context` with `get_code_connect_map` to map Figma nodes to existing codebase components.
- **Design system rules** created via `create_design_system_rules` allow you to enforce token-based styling, CSS-in-JS patterns, or custom class naming conventions.
- The full API reference for building custom scripts around these tools is available in [[`skills/figma-use/references/api-reference.md`](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-use/references/api-reference.md)](https://github.com/figma/mcp-server-guide/blob/main/skills/figma-use/references/api-reference.md).

## Frequently Asked Questions

### What is the default output format of get_design_context?

By default, `get_design_context` returns a **React component** written in JSX with **Tailwind CSS** utility classes. According to the source code in [`figma-power/POWER.md`](https://github.com/figma/mcp-server-guide/blob/main/figma-power/POWER.md) (lines 36-37), the tool fetches structured design data and renders it as a React + Tailwind representation that mirrors the Figma node's layout, spacing, typography, and colors.

### How do I convert the output from React to Vue or another framework?

Include a framework request in your natural language prompt when calling the tool. As documented in [`README.md`](https://github.com/figma/mcp-server-guide/blob/main/README.md) (lines 7-11), phrases like *"Generate my Figma selection in Vue"* instruct the agent to rewrite the default React output into your target syntax while preserving the structural layout extracted from Figma. The MCP server itself always returns the React format; the conversion happens in the agent layer.

### Can I use get_design_context with my existing component library?

Yes. Reference your existing components in the prompt, and the agent will use `get_code_connect_map` to find mappings between Figma nodes and your local components. Instead of generating new divs and buttons, the agent imports your existing components (e.g., from `src/components/ui`) and passes the extracted Figma properties as props, as described in [`README.md`](https://github.com/figma/mcp-server-guide/blob/main/README.md) (lines 13-17) and the `figma-implement-design` skill documentation.

### What are design system rules and how do they affect the output?

Design system rules are constraint files created via the `create_design_system_rules` tool that instruct the agent how to transform raw `get_design_context` output. Stored in your project, these rules can replace Tailwind classes with custom CSS variables, enforce a CSS-in-JS approach, or mandate specific naming conventions. When active, the agent post-processes the default React output to match your team's token system and styling architecture before returning the final code.