@dannote/figma-use 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -9
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# figma-use
|
|
2
2
|
|
|
3
|
-
Control Figma from the command line.
|
|
3
|
+
Control Figma from the command line. Built for AI agents to create and manipulate designs programmatically.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Inspired by [agent-browser](https://github.com/vercel-labs/agent-browser) (browser automation) and [bird](https://github.com/steipete/bird) (Twitter CLI) — fast CLIs that save tokens and give agents direct control.
|
|
6
6
|
|
|
7
7
|
## Why not the official Figma MCP?
|
|
8
8
|
|
|
@@ -246,22 +246,39 @@ figma-use is designed to work with AI coding agents like [Claude Code](https://d
|
|
|
246
246
|
|
|
247
247
|
### Using with Claude Code
|
|
248
248
|
|
|
249
|
-
|
|
249
|
+
Copy the included skill to teach your agent how to use figma-use:
|
|
250
250
|
|
|
251
251
|
```bash
|
|
252
|
-
#
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
#
|
|
252
|
+
# From npm package
|
|
253
|
+
cp node_modules/@dannote/figma-use/SKILL.md ~/.claude/skills/figma-use/SKILL.md
|
|
254
|
+
|
|
255
|
+
# Or download directly
|
|
256
|
+
mkdir -p ~/.claude/skills/figma-use
|
|
257
|
+
curl -o ~/.claude/skills/figma-use/SKILL.md \
|
|
258
|
+
https://raw.githubusercontent.com/dannote/figma-use/main/SKILL.md
|
|
256
259
|
```
|
|
257
260
|
|
|
258
261
|
Then just ask:
|
|
259
262
|
|
|
260
263
|
```
|
|
261
|
-
|
|
264
|
+
Create a card component with an avatar, title, and description in Figma
|
|
262
265
|
```
|
|
263
266
|
|
|
264
|
-
|
|
267
|
+
### Minimal Setup
|
|
268
|
+
|
|
269
|
+
For agents that don't support skills, add to your project's `CLAUDE.md` or `AGENTS.md`:
|
|
270
|
+
|
|
271
|
+
```markdown
|
|
272
|
+
## Figma Automation
|
|
273
|
+
|
|
274
|
+
Use `figma-use` for Figma control. Run `figma-use --help` for all 73 commands.
|
|
275
|
+
|
|
276
|
+
Quick workflow:
|
|
277
|
+
1. `figma-use status` - Check plugin connection
|
|
278
|
+
2. `figma-use create-frame --x 0 --y 0 --width 400 --height 300 --fill "#FFF" --name "Card"`
|
|
279
|
+
3. `figma-use create-text --x 20 --y 20 --text "Title" --fontSize 24 --fill "#000" --parentId "1:2"`
|
|
280
|
+
4. `figma-use screenshot --output preview.png` - Verify result
|
|
281
|
+
```
|
|
265
282
|
|
|
266
283
|
## License
|
|
267
284
|
|