Agent skill · design visual · membranedev
figma
Figma integration. Manage Files, Projects, Teams. Use when the user wants to interact with Figma data.
Why this skill is useful
Adds specific commands and workflows for integrating with Figma that the AI wouldn't reliably generate on its own.
What it needs
Requires @membranehq/cli installed locally. Requires membrane account access. About 5k tokens when loaded. Last updated 2026-04-28. 253 stars on the source repository.
What this skill does
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: Authentication This will either open a browser for authentication or print an authorization URL to the console, depending on whether interactive mode is available. Headless environments: The command will print an authorization URL. Ask the user to open it in a browser. When they see a code after completing login, finish with: Add --json to any command for machine-readable JSON output. Agent Types : claude, openclaw, codex, warp, windsurf, etc. Those will be used to adjust tooling to be used best with your harness Connecting to Figma Use membrane connection ensure to find or create a connection by app URL or domain: The user completes authentication in the browser. The output contains the new connection id. This is the fastest way to get a connection. The URL is normalized to a domain and matched against known apps. If no app is found, one is created and a connector is built automatically. If the returned connection has state: "READY", skip to Step 2. 1b. Wait for the connection to be ready If the connection is in BUILDING state, poll until it's ready: The --wait flag long-polls (up to --timeout seconds, default 30) until the state changes. Keep polling until state is no longer BUILDING. The resulting state tells you what to do next: READY — connection is fully set up. Skip to Step 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills membranedev/figma