figma

# Figma

Figma is a web-based collaborative design tool used for creating user interfaces, prototypes, and vector graphics. It's primarily used by UI/UX designers, web developers, and product managers to design and iterate on digital products.

Official docs: https://www.figma.com/developers/api

## Figma Overview

- **Design**
  - **File**
    - **Component**
    - **Page**
    - **Node**
  - **Comment**
- **User**
- **Team**
  - **Project**

## Working with Figma

This skill uses the Membrane CLI to interact with Figma. Membrane handles authentication and credentials refresh automatically — so you can focus on the integration logic rather than auth plumbing.

### Install the CLI

Install the Membrane CLI so you can run `membrane` from the terminal:

```bash
npm install -g @membranehq/cli
```

### First-time setup

```bash
membrane login --tenant
```

A browser window opens for authentication.

**Headless environments:** Run the command, copy the printed URL for the user to open in a browser, then complete with `membrane login complete <code>`.

### Connecting to Figma

1. **Create a new connection:**
   ```bash
   membrane search figma --elementType=connector --json
   ```
   Take the connector ID from `output.items[0].element?.id`, then:
   ```bash
   membrane connect --connectorId=CONNECTOR_ID --json
   ```
   The user completes authentication in the browser. The output contains the new connection id.

### Getting list of existing connections
When you are not sure if connection already exists:
1. **Check existing connections:**
   ```bash
   membrane connection list --json
   ```
   If a Figma connection exists, note its `connectionId`


### Searching for actions

When you know what you want to do but not the exact action ID:

```bash
membrane action list --intent=QUERY --connectionId=CONNECTION_ID --json
```
This will return action objects with id and inputSchema in it, so you will know how to run it.


## Popular actions

| Name | Key | Description |
| --- | -...