> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brew.new/llms.txt
> Use this file to discover all available pages before exploring further.

# Figma

> Connect Figma so you can paste any frame URL into chat and turn it into a responsive email.

Connect Figma to Brew so you can paste any frame URL into chat and get back a responsive email template that matches your design.

## What You Can Do

* **Convert frames to email.** Paste a Figma frame URL and Brew turns it into a responsive HTML email
* **Keep design fidelity.** Typography, colors, and layout carry over
* **Iterate in chat.** Ask Brew to tweak spacing, swap copy, or add CTAs without leaving the conversation

## Setup

<Steps>
  <Step title="Connect your Figma account">
    In Brew, go to **Integrations** and click the **Figma** card. You'll be redirected to Figma to authorize the connection. Once connected, paste any Figma frame URL into chat and Brew will convert the design.

    <Note>
      Brew only reads frames you share a URL for. It doesn't crawl your full Figma workspace.
    </Note>
  </Step>
</Steps>

## Using Figma in Brew

Paste a Figma frame URL (with the `node-id` parameter) into any Brew chat:

* *"Turn this frame into a welcome email: [https://figma.com/file/.../?node-id=](https://figma.com/file/.../?node-id=)..."*
* *"Match this hero design but make the copy shorter."*
* *"Use this layout for our monthly newsletter."*

Brew converts the frame into a responsive email you can keep editing in chat or export to your ESP.

<Tip>
  Right-click any frame in Figma and choose **Copy link to selection** to grab the exact node URL Brew needs.
</Tip>

## From the API

The same conversion is available programmatically, running the exact same transpiler as chat:

* **API**: `POST /v1/emails/figma` with `{ "figmaUrl": "...", "format": "jsx" }`. Returns the new `emailId`, the `emailVersionId` to pin in sends and automations, and the requested JSX or HTML in `content`.
* **TypeScript SDK**: `brew.emails.importFigma(...)`
* **MCP**: the `import_figma_design` tool, so an agent can pull a frame into Brew as one step of a larger workflow.

Two things worth knowing:

* **It is free.** The conversion is deterministic, with no model in the loop, so the same frame always converts the same way and no credits are charged.
* **The brand integration is required.** API, SDK, MCP, and chat all use the same Figma account connected above. Credentials never travel in a conversion request. Without a usable connection, the call returns `422 FIGMA_NOT_CONNECTED`.
* **Choose the returned source.** `format` is optional and defaults to `jsx`. Set it to `html` when you need rendered email-safe HTML instead. The selected representation is returned in `content` and the same conversion is saved as an editable Brew design.

```bash theme={null}
curl -X POST "https://brew.new/api/v1/emails/figma" \
  -H "Authorization: Bearer $BREW_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"figmaUrl":"https://www.figma.com/design/AbC123/Campaigns?node-id=42-1337","format":"jsx"}'
```

Figma carries no link data, so button hrefs come across as `#`. `warningCount` tells you how many need real URLs, which you can fill in with a follow-up `brew.emails.edit(...)`.

## Requirements

* A Figma account with access to the file you want to convert
* The Figma integration connected for the API key's brand
* Frames designed at email-friendly widths (600-700px work best)

## Need help?

Our team is ready to support you at every step of your journey with Brew. Choose the option that works best for you:

<Tabs>
  <Tab title="Self-Service Tools">
    <CardGroup cols="2">
      <Card title="Search Documentation" icon="magnifying-glass" color="#c44925">
        Type in the "Ask any question" search bar at the top left to instantly find relevant documentation pages.
      </Card>

      <Card title="ChatGPT/Claude Integration" icon="robot" color="#c44925">
        Click "Open in ChatGPT" at the top right of any page to analyze documentation with ChatGPT or Claude for deeper insights.
      </Card>
    </CardGroup>
  </Tab>

  <Tab title="Talk to Our Team">
    <CardGroup cols="2">
      <Card title="Schedule a Call" icon="calendar" color="#c44925" href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ1iYoRUG1J792XQpbuQLjSRRDupr7MwraFK-HQRCtTYdBmrQi8nZu2qXfzKQigb8gbKJK3KN3-R">
        Book time with our founders for personalized guidance on strategy, best practices, or complex implementation questions.
      </Card>

      <Card title="Call Us Directly" icon="phone" color="#c44925">
        Need immediate assistance? Reach us at **+1-(332)-203-2145** for urgent issues or time-sensitive questions.
      </Card>

      <Card title="Slack Channel" icon="slack" color="#c44925">
        Our preferred support channel. You'll receive an invite after signup for direct founder support and fast responses.
      </Card>

      <Card title="Email Support" icon="envelope" color="#c44925" href="mailto:support@brew.new">
        Contact us at **[support@brew.new](mailto:support@brew.new)** for detailed inquiries or if you prefer not to use Slack.
      </Card>
    </CardGroup>
  </Tab>
</Tabs>