TETRA2000/sync-from-figma
.claude/skills/sync-from-figma/SKILL.md
Fetch current Figma design state and apply changes back to React code. Use when user says "sync from Figma", "pull Figma changes", "update from Figma", "apply Figma changes", or wants to bring Figma edits into code.
development
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add TETRA2000/figma-web-studio sync-from-figmaInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 17, 2026, 8:39 AM6.8s1 file scanned
SKILL.md
- name:
- sync-from-figma
- description:
- Fetch current Figma design state and apply changes back to React code. Use when user says "sync from Figma", "pull Figma changes", "update from Figma", "apply Figma changes", or wants to bring Figma edits into code.
- allowed-tools:
- Bash, Read, Write, Edit, Glob, Grep, mcp__figma__get_design_context, mcp__figma__get_screenshot, mcp__figma__get_code_connect_map
Sync from Figma Skill
Parameters
- target (required): Component name to sync
- figmaUrl (required): Figma node URL (e.g.,
https://figma.com/design/FILE_KEY/...?node-id=NODE_ID)
Prerequisites
This skill requires the Figma MCP server (figma@claude-plugins-official).
If unavailable, report: "Figma MCP server not connected. Cannot fetch design context. Ensure the plugin is enabled and you are authenticated."
Workflow
1. Fetch Design Context
- Call
get_design_contextwith the Figma URL - The response contains React + Tailwind code natively — no translation needed
- Parse the output for:
- Tailwind class changes (colors, spacing, typography, layout)
- Structural changes (added/removed elements)
- Image asset references
2. Detect Changes
Compare the Figma design context with the current component source:
- Property changes: Tailwind classes, text content, spacing
- Structural changes: Added/removed children, reordered elements
3. Apply Changes
- Tailwind class changes: Apply directly to the TSX file
- Structural changes: Flag for manual review with description of what changed
- Output: "Structural change detected: [description]. Please review and apply manually."
4. Handle Image Assets
When design context includes image references:
- Read
shared/references/image-handling.mdfor workflow - Check
src/assets/images/asset-map.jsonfor existing assets - Download new images from Figma MCP URLs
- Save to
src/assets/images/{component-name}/with content-hash filenames - Update
asset-map.jsonwith new mappings - Update
<img>src attributes in the TSX to reference local paths
5. Visual Verification
After applying changes:
- Start dev server or Storybook
- Capture browser screenshot via
playwright-cli - Capture Figma screenshot via
get_screenshot - Compare the two screenshots and describe discrepancies
If visual discrepancies are detected:
- Describe the differences
- Attempt corrective edits
- Re-verify (up to 3 iterations)
Output
Report:
- Changes applied (list of property changes)
- Images downloaded (if any)
- Structural changes flagged for review (if any)
- Visual verification result
- Screenshot comparison
Error Handling
- Figma MCP unavailable: Report error, cannot proceed
- Expired image URLs: "Image URL expired. Re-run sync to get fresh URLs."
- Visual mismatch after 3 iterations: Report remaining discrepancies for manual resolution
Related Skills
TETRA2000/playwright-cli
tools
VerifiedTrustedCommunity
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.
SKILL.mdUpdated Apr 17, 2026
TETRA2000/import-project
testing
VerifiedTrustedCommunity
Import an exported project archive, placing assets into the correct directories. Use when user says "import project", "import bundle", "import package", "unpack project", or has a .tar.gz archive to import.
SKILL.mdUpdated Apr 17, 2026
TETRA2000/export-to-figma
tools
VerifiedTrustedCommunity
Push React components and pages to Figma using the Figma MCP server. Use when user says "export to Figma", "push to Figma", "create Figma design", "send to Figma", or wants to create a Figma design from code.
SKILL.mdUpdated Apr 17, 2026
TETRA2000/export-project
testing
VerifiedTrustedCommunity
Bundle a page and all its dependent components into a portable archive for sharing. Use when user says "export project", "bundle page", "package page", "export bundle", or wants to share a page with its dependencies.
SKILL.mdUpdated Apr 17, 2026