OpenPencil Files
Inspects, edits and exports Figma .fig files and controls OpenPencil.
Install
npx skills add open-pencil/open-pencil --skill open-pencil -g -a claude-code -y- Repository
- open-pencil/open-pencil9.5k
- Category
- Design
- Updated
- 3d ago
- License
- MIT
- Context cost
- Mediumabout 3,000 tokens
- Runs scripts
- No, instructions only
What it does
Work with Figma .fig design files and the running OpenPencil editor, inspect structure, query nodes, analyze design tokens, export PNG/SVG/PDF/JSX, and modify designs programmatically. Use when asked to open, inspect, export, analyze, or edit .fig files, or to control the running OpenPencil app.
OpenPencil
OpenPencil provides a CLI and MCP server for .fig design files and the running OpenPencil editor.
Use two modes:
- App mode, connect to the running OpenPencil editor by omitting the file argument.
- Headless mode, work with
.figfiles directly by passing a file path.
# App mode, operates on the document open in the editor
openpencil tree
# Headless mode, operates on a .fig file
openpencil tree design.fig
Use openpencil --help, per-command help, and the connected MCP server’s tool schemas to check the installed version’s capabilities. See the CLI reference and MCP guide for current documentation.
Variable formulas
Inside eval, use openpencil.setVariableFormula('Spacing', 'large', '{base} * 2') for numeric formulas or openpencil.setVariableFormula('State', 'visible', '{viewport} > 1024 and not {loading}') for Boolean formulas, which use and, or, not and number comparisons. Collections and variables must already exist. An optional fourth argument selects a mode by name; otherwise the default mode is edited. The call validates before mutation and returns the resolved value. Length formulas use stored pixels. The CSS stylesheet writes number formulas as calc(); design-token files hold the result with the formula in $extensions.
