Figma
With the Figma source, you paste a frame’s link into your message and the agent reproduces it in your app. It reads its layers, copy, colors, fonts and spacing, and sees it as an image to match the result as closely as possible.
Figma is connected with a read-only personal access token: the agent can never edit your files.
What the agent can read
Section titled “What the agent can read”- A frame (link with
node-id): its layer tree with sizes, auto-layout, colors (with their style names), copy and fonts, plus a rendered image of the frame. - A whole file (link without
node-id): the list of its pages and frames. The agent then reads the frames to build, one at a time. - Accepted links:
figma.com/design/…,figma.com/file/…,figma.com/proto/…,figma.com/board/…, including a link to a branch.
It only reads files your Figma account can access, and only when you paste their link.
Connect Figma
Section titled “Connect Figma”Figma is connected with a token you create in your Figma account.
-
In Figma, open your account Settings → Security tab → Personal access tokens, then generate a new token.
-
Give it a name (for example “Highwind”) and choose these scopes, read-only:
- File content;
- Current user.
No other scope is needed.
-
Copy the token (it starts with
figd_). Figma only shows it once. -
In Highwind, open the Connectors page, find the Figma card (Context for the agent category) and open its details. The Create a token link leads to Figma’s help if needed.
-
Paste the token into the Personal access token field, then click Connect. Highwind checks the token with Figma.
-
The card shows Connected: “paste a frame link in your message and the agent will build it”.
Copy a frame’s link
Section titled “Copy a frame’s link”In Figma, select the frame (the whole screen, not a layer inside it), then right-click → Copy/Paste as → Copy
link to selection. The link then contains node-id=…, and the agent knows exactly which screen to reproduce.
Example requests
Section titled “Example requests”Build this page: https://www.figma.com/design/AbCdEf123/Showcase-site?node-id=12-345Bring the colors and fonts of this design into the site's theme, without changing the layout: https://www.figma.com/design/AbCdEf123/Showcase-site?node-id=12-345Here's my Figma file: https://www.figma.com/design/AbCdEf123/Mobile-app. List the screens, then build the "Home" screen.Add the Pricing section from this frame below the existing Testimonials section: https://www.figma.com/design/AbCdEf123/Showcase-site?node-id=40-12How the agent reproduces a design
Section titled “How the agent reproduces a design”- It starts by putting the design’s main colors and fonts into the site’s theme, so everything else follows.
- It reproduces the layout, copy and spacing faithfully, with the frame’s image as the visual reference.
- Figma layer names don’t become component names, and vector drawings are rebuilt as icons or simple shapes.
- For a whole file, it works frame by frame.
Limits
Section titled “Limits”- Read-only: the requested token only allows reading. The agent never edits your files.
- Access: if your account can’t access the file, or if the token has expired or was revoked, Figma refuses to read it. Check the file’s sharing, or reconnect Figma with a new token.
- Figma’s rate limit: if Figma says it’s getting too many requests, try again a minute later.
- Very large frames: the detail sent to the agent is capped (about 20,000 characters of structure, reduced image). For a very long page, send it section by section.
- Interactions and animations: the agent reproduces screens; describe a prototype’s animations or flows in words.
Disconnect or change the token
Section titled “Disconnect or change the token”Connectors page → Figma details → Disconnect: the token is erased from Highwind. To also disable it at Figma, delete it under Settings → Security → Personal access tokens. To use a new token, disconnect Figma and connect it again with the new token.