🎨Skill + MCP
Figma → Drive handoff
Exports Figma frames, uploads PNGs to Drive, writes a handoff doc with specs and links.
- Surfaces
- skill · mcp
- Complexity
- advanced
- Trigger
- natural
- Est. tokens
- 8,400
- Requires MCP
- figma, google-drive
What It Does
Three-phase multi-MCP workflow: Figma exports frames as 2x PNGs, Drive creates a folder and uploads them, then a handoff doc is written linking each frame to its component spec, breakpoints, tokens, and accessibility notes.
When It Triggers
- ▸"Prepare the design handoff"
- ▸"Export Figma for the dev team"
- ▸"Generate design review doc"
Prerequisites
- ▸Figma MCP connected with read access
- ▸Google Drive MCP connected with write access to the target folder
SKILL.md
markdown
---
name: figma-drive-handoff
description: Exports Figma frames, uploads them to Drive, and produces a handoff document linking assets to component specs. Use when user says "design handoff", "export Figma to dev", or "prepare design review".
---
# Figma → Drive Handoff
## Requires
- Figma MCP + Google Drive MCP both connected
## Phases
### Phase 1: Figma export
1. `figma_getFile` to list frames in the page
2. `figma_exportImages` for each frame at 2x PNG
3. Capture component names, variants, and auto-layout specs
### Phase 2: Drive upload
1. `drive_createFolder` with the feature name
2. `drive_uploadFile` for each PNG, capture shareable links
3. `drive_createDoc` — the handoff document
### Phase 3: Write handoff doc
1. For each frame: title, screenshot link, Figma URL, component spec
2. Include breakpoints, tokens used, accessibility notes
3. Share doc link back to the user
Gotchas
- ▸Figma exports can hit rate limits on large pages — chunk into batches of 20 frames.
- ▸Drive folder permissions must allow the MCP's OAuth identity to write.
- ▸If a frame has auto-layout breakpoints, capture each variant separately.