# Figma — an integration for Buff

> Designs as context: parameters, tokens and screen structure for any model, the picture for one that can see. Questions in design comments.

[Marketplace](https://buff.systems/en/marketplace) Figma

# Figma

Design · publisher buff · version 1.1.0

Designs as context: parameters, tokens and screen structure for any model, the picture for one that can see. Questions in design comments.

[Download the connector](https://buff.systems/en/downloads) [How to install](https://buff.systems/en/marketplace/figma#usage) 7 of 8 tools only read

- An answer in Buff relies on the design: the button colour is named by its style, not guessed.
- The setup form: the address, files or projects, the API key.
- The connection is live: eight tools, one marked “picture”.
- The connection check says who signed in, how many files are in scope and whether variables can be read on this plan.
- What the integration will get is written on its card in the connector’s catalogue.

Click a screenshot to open it in full. All screenshots are from a working installation.

## Overview

A design describes a screen more precisely than a task does: sizes, spacing, colours, fonts, which components it is built from and how its auto layout behaves. The integration lets Buff read Figma files in the connection’s scope the way the inspector panel shows them — as parameters and token names — and takes questions right in design comments. Only a model that can read images gets a picture of the design; everything else works with any model.

Not every model sees pictures — and that is accounted for

Most models Buff runs on read only text. So the integration is built around parameters: position and size, auto layout, colours in hex, typography, styles and variables by name, components and their properties — the model gets all of this without a single picture. The only tool that returns an image (render\_node) is marked specially: the platform offers it only to a model that reads images and does not show it to a text model at all. If your model does not read pictures, answers about designs will still be precise — by parameters and tokens.

## Use cases

The situations it is installed for.

- ### Build the screen as in the design, not as it seemed A developer takes the task “build the sign-in screen”. The task has one line and a link to Figma. Spacing, corner radii, font sizes and the button colour are usually judged by eye and rounded. Result. The bot reads the screen’s frame with a tool and answers with parameters: vertical auto layout with 24 padding and 16 spacing, a button 48 high with a 12 corner radius, fill — the “Button/Malachite” style, #0FA37F. There is something to build from, and the numbers match the design.
- ### Design system: which tokens exist and what they mean A third shade of green appears in the project because nobody remembers which one is the “primary”. The tokens are written in Figma — as styles and variables — but people rarely look there from the code. Result. The get\_styles tool returns the published styles with their values and the variables by mode: “Colour/Accent” is #0FA37F in the light theme and #33CC99 in the dark one. The answer refers to the token names, and they are what goes into the code, not yet another hex.
- ### A question right on the design A designer leaves a comment on a screen in Figma: “what happens if the email is already taken?”. Such a question used to go to the chat and get lost between two tools. Result. They mention the bot in the comment. The bot answers in the same thread, relying on the project code and the design itself: what error text the code has, and whether the field component has a state for it. The discussion stays where the design is.
- ### Review: the design and the code differ At review people argue about whether the field border is the right thickness and the heading the right line height. A screenshot against a screenshot is a weak argument, and opening Figma to measure by hand takes a while. Result. The bot compares: in the design the border is 1, colour #D1D5DB, the heading Inter Semi Bold 24/32 with −0.5 tracking. In the code — 2 and 28. The difference is named in numbers, and the argument is closed in one comment.

## Examples

What to write and what comes back. How the bot is addressed is set in the connection settings — here it is “@buff”.

1. @buff what are the padding and colour of the “Sign in” button on the sign-in screen? a design comment or a question in the Buff app tool: `search_nodes + get_node` The “Sign in” button is an instance of the “Button/Primary” component, 342×48. Horizontal auto layout, padding 12 top and bottom, 24 at the sides, spacing 8. Fill — the “Button/Malachite” style (#0FA37F), corner radius 12, shadow 0/4 with a blur of 12. The label is Inter Semi Bold 16, white, centred.
2. @buff show the colour tokens in this file a design comment tool: `get_styles` Published fill styles: “Background/Surface” #FFFFFF, “Text/Primary” #111827, “Button/Malachite” #0FA37F; the text style “Heading/H1” is Inter Semi Bold 24/32. Variables cannot be read on your Figma plan — their names are visible in node bindings, and the values come from the styles.
3. /research how the sign-in screen in the design differs from the one in the code a comment on the screen’s frame tool: `get_node + project code` The word after the mention picks the work: without it — a short answer, “research” — research with a document, “task” — a draft development task. Research reads the design as parameters and checks it against the layout in the repository.
4. @buff what is called “Email field” in the design and what is it made of? a question in the Buff app tool: `search_nodes + get_node` The “Email field” frame, 342×56, on the sign-in screen: horizontal auto layout with 16 padding, corner radius 8, a white fill and a 1 border of colour #D1D5DB. Inside is the placeholder text “Email”, Inter 16, colour #6B7280.

## What it does

### Reads the design as parameters, like the inspector panel

get\_file shows the structure: pages, frames, sizes. get\_node returns a node with its subtree and everything the editor knows about it: position and size, auto layout (direction, padding, spacing, alignment, width and height behaviour), fills and strokes in hex, corner radii, effects, typography and the text itself. Nothing is cut off: a frame with forty layers has forty layers in the answer.

### Tokens by name, not by identifier

A node in Figma refers to styles and variables by identifiers; the integration turns them into names — “Button/Malachite”, “Colour/Accent” — because the name is in the design system documentation, and nobody reads an identifier. get\_styles returns the published styles with their values (colours, fonts, effects, grids) and the variables with their values by mode, where the Figma plan allows reading them.

### The picture only for a model that can see

render\_node renders a node to PNG. This tool is marked as answering with a picture, and the platform gives it only to a model that reads images; a text model does not see it and cannot call it. So a model that cannot look never gets a picture it would “read” at random. All of a node’s parameters are available without it.

### Answers where the question was asked

A mention of the bot or a slash command in a design comment starts a question, research or a draft task; the answer arrives in the same comment thread. A thread is a root comment pinned to a place on the design, so a second question in it continues the same conversation. The only writing tool is the comment, and it is not given to the model at any stage.

### Files and projects are the access control

The bot works only in the listed files and in the files of the listed projects — it reads and writes only there. If both lists are empty, the bot reads any file open to its account, and answers mentions in comments only with a webhook set up in Figma (see “Events”). The permissions of the bot’s account in Figma are the outer boundary, the list is the inner one.

### Plainly about the Figma plan

Figma returns variables through the API only on the Enterprise plan. On other plans the integration takes tokens from the published styles and from node bindings, and the connection check says plainly whether variables can be read — instead of an empty list with no explanation.

## How to use it

Everything happens on the machine where the connector runs. At no step do you need to open access to your network from outside.

1. Step 1 ### Installation takes one click Open the “Marketplace” section on the connector’s local page. Before installing you can see what the integration will get: the addresses it will be able to reach (the Figma API and the image store), which credentials it will ask for and which tools the model will see — with a mark on the one that answers with a picture. **Connector** ← scroll the frame → The access limits are written on the catalogue card.
2. Step 2 ### Setup: a token and a list of files or projects The API address is already filled in (\`https://api.figma.com\`); there is no need to change it. A file’s key is visible in its address: \`figma.com/design/KEY/…\`; a project’s number in the project address: \`figma.com/files/project/NUMBER/…\`. You can use one of the lists or both. If both are empty — any file open to the bot’s account, but questions from comments then arrive only through a webhook. A personal access token is issued in the Figma account settings and stored on your machine: the integration does not see it. **Connector** ← scroll the frame → The setup form: the address, files or projects.
3. Step 3 ### Create a separate account for the bot Give it view access to the files needed and permission to comment. The integration needs nothing more: it does not edit designs, publish libraries or change permissions.
4. Step 4 ### The same from the command line Installing without a GUI is an equal option: \`connector install figma\`, then \`connector instance add figma --config projects=4815162342\` — the API address fills itself in.
5. Step 5 ### How the bot learns about questions If the connection lists files or projects, polling reads their comments itself — every 20 seconds by default; the interval can be changed in the connection settings, and no ports are needed; a FILE\_COMMENT webhook to the link issued by the connector only speeds up the answer. If both lists are empty, polling does not know which files to watch: the bot learns about a question in a comment only from the webhook and only in the files it is set up for. In that case the connector’s event receiver must be reachable from the internet — Figma calls it from its cloud. Without a webhook such questions do not reach the bot. **Connector** ← scroll the frame → Each connection has its own set of tools and its own allowed address.

## Access limits

The connector shows the same on your machine before installation. The list comes from the signed catalogue, not written here by hand.

Goes out to

only the addresses from the fields `base_url` `images_base`

Credentials

api — the values stay in the connector, the integration does not see them

Webhooks

deliver — you open the port, if you choose to

| Tool | What it does | Access |
| --- | --- | --- |
| list\_files | List the connected design files — when the question is about design but no file is named; with no list in the connection, the files where the bot was mentioned | read only |
| get\_file | Structure of a design file — its pages, frames, sizes, styles and components | read only |
| get\_node | A node with its parameters — position, auto layout, colours in hex, typography, styles and variables by name | read only |
| get\_styles | The file’s styles with their values, and variables by mode, if the Figma plan allows reading them | read only |
| search\_nodes | Find nodes by words in a layer name or text — when the name is known but not the id | read only |
| get\_comments | Design discussions — comment threads, which node they are pinned to, whether they are resolved | read only |
| render\_node | Render a node to PNG — only for a model that reads images | read only picture |
| add\_comment | Write a comment in a design discussion | writes |

The integration runs as a separate process under its own operating system user: it does not see the connector’s key, does not read the files of other connections and cannot reach the network past the connector. More in the [security section](https://buff.systems/en/security).

## Requirements

- Figma on any plan; variables can be read only on Enterprise — other plans get styles and node bindings.
- A personal access token of the bot’s account with view access to the files needed and permission to comment.
- Network access from the connector’s machine to api.figma.com and to Figma’s image store. If the lists of files and projects are empty, you also need the connector’s event receiver with an address reachable from the internet: otherwise questions from comments will not reach the bot.
- Connector 0.6 or later: the integration declares a picture tool and default values in its settings, which older versions do not understand.
- A connector run with the right to create a separate OS user for the integration (root or CAP\_SETUID).
- A model that reads images — only if you need the render\_node tool; everything else works with any model.

## Questions

- **Our model cannot look at pictures. Is the integration useless?**: No — it is built for exactly this case. The model gets the design as parameters: sizes, auto layout, colours in hex, typography, names of styles and variables, components and their properties. The one picture tool is simply not offered to it, and answers are worked out from parameters and tokens.
- **How does Buff know whether the model sees pictures?**: From the model’s description — at the provider or on the dedicated machine: it states which input types the model accepts. If images are among them, the render\_node tool is offered; if not, it is not. There is nothing to set up by hand.
- **Will you copy our designs to your side?**: No. The integration reads nodes at the model’s request when an answer requires it, and transfers or indexes nothing in advance. What is read enters the context of a specific answer, not a store.
- **Why can variables not be read?**: Because that is how the Figma API works: access to variables is available only on Enterprise plans. On other plans the integration takes tokens from the published styles and shows variable names from node bindings; the connection check says so plainly.
- **Will the bot be able to change anything in the design?**: No. It reads nodes and writes comments; it cannot edit layers, publish libraries or change permissions — the integration has no such tools at all.
- **Does a big file mean a big bill?**: Only what the model asked for is read: the structure to a given depth, a specific node, the styles. The answer is not cut — a frame with forty layers has forty layers in the answer — but the model goes for the whole file only when searching by name, and that is visible in the list of tool calls.

At a glance

- **Version**: 1.1.0
- **Publisher**: buff
- **Updated**: 2026-10-05
- **Size**: 36 KB
- **Tools**: 8, 7 read only
- **Credentials**: api
- **Webhooks**: deliver
- **Platforms**: linux-x86\_64, linux-aarch64

[Connector documentation](https://buff.systems/en/docs/connector) [How it works from an information security standpoint](https://buff.systems/en/security) [Ask a question about the integration](https://buff.systems/en/contact)

On this page

- [Overview](https://buff.systems/en/marketplace/figma#overview)
- [Use cases](https://buff.systems/en/marketplace/figma#use-cases)
- [Examples](https://buff.systems/en/marketplace/figma#examples)
- [What it does](https://buff.systems/en/marketplace/figma#abilities)
- [How to use it](https://buff.systems/en/marketplace/figma#usage)
- [Access limits](https://buff.systems/en/marketplace/figma#access)
- [Requirements](https://buff.systems/en/marketplace/figma#requirements)
- [Questions](https://buff.systems/en/marketplace/figma#faq)

Next

## Connect Figma

Install the connector in your network, open its local page and install the integration from the catalogue. Nothing needs to be rebuilt.

[Download the connector](https://buff.systems/app) [Write to us](mailto:info@buff.systems)

Companies and sole traders can pay by bank transfer and receive closing documents