oimiragieo/figma
.claude/skills/figma/SKILL.md
Figma design-to-code workflow. Read Figma files, inspect components, extract design tokens, and translate designs to implementation. Use when working with Figma designs, extracting styles, or building design systems.
$ install --global
skillsauthnpx skillsauth add oimiragieo/agent-studio 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 7, 2026, 8:18 PM12.2s10 files scanned
SKILL.md
- name:
- figma
- description:
- Figma design-to-code workflow. Read Figma files, inspect components, extract design tokens, and translate designs to implementation. Use when working with Figma designs, extracting styles, or building design systems.
- version:
- 1.0.0
- model:
- sonnet
- invoked_by:
- both
- user_invocable:
- true
- tools:
- [Read, Write, Bash, WebFetch]
- agents:
- [frontend-expert, styling-expert, ui-components-expert]
- category:
- design
- tags:
- [figma, design, ui, design-tokens, design-system, components]
- error_handling:
- graceful
- streaming:
- supported
- verified:
- false
Figma
Extract design information from Figma files for implementation. Covers design token extraction, component inspection, and design-to-code translation.
When to Use
- Translating Figma designs into frontend code
- Extracting design tokens (colors, typography, spacing) from Figma
- Inspecting Figma component structure for implementation planning
- Building or updating a design system from Figma sources
- Mapping Figma auto-layout properties to CSS
Prerequisites
- Figma Personal Access Token (set as
FIGMA_ACCESS_TOKENenv var) - Figma file URL or file key
Core API Endpoints
Get File
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY"
Get File Nodes (specific components)
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/nodes?ids=NODE_ID1,NODE_ID2"
Get Image Exports
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/images/FILE_KEY?ids=NODE_ID&format=svg"
Get File Styles
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/styles"
Get File Components
curl -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/components"
Design Token Extraction Workflow
Step 1: Fetch File Styles
# Get all published styles
curl -s -H "X-Figma-Token: $FIGMA_ACCESS_TOKEN" \
"https://api.figma.com/v1/files/FILE_KEY/styles" | jq '.meta.styles'
Step 2: Map to CSS Variables
/* Colors */
:root {
--color-primary: #2563eb; /* From Figma: Primary/500 */
--color-secondary: #7c3aed; /* From Figma: Secondary/500 */
--color-surface: #ffffff; /* From Figma: Surface/Default */
}
/* Typography */
:root {
--font-heading: 'Inter', sans-serif;
--font-body: 'Inter', sans-serif;
--text-xl: 1.25rem; /* From Figma: Heading/XL */
--text-base: 1rem; /* From Figma: Body/Base */
--leading-tight: 1.25;
--leading-normal: 1.5;
}
/* Spacing */
:root {
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-4: 1rem; /* 16px */
--space-8: 2rem; /* 32px */
}
Step 3: Auto-Layout to CSS Mapping
| Figma Auto-Layout | CSS Equivalent |
| ----------------- | ---------------------------------------- |
| Horizontal | display: flex; flex-direction: row; |
| Vertical | display: flex; flex-direction: column; |
| Space between | justify-content: space-between; |
| Packed (start) | justify-content: flex-start; |
| Gap: 16 | gap: 1rem; |
| Padding: 16,24 | padding: 1rem 1.5rem; |
| Fill container | flex: 1; or width: 100%; |
| Hug contents | width: fit-content; |
Step 4: Component Inspection
For each Figma component, extract:
- Name - Component name and variant properties
- Structure - Child node tree (frames, text, images)
- Styles - Applied color, text, and effect styles
- Constraints - Responsive behavior rules
- Variants - All component variants and their properties
Iron Laws
- ALWAYS extract design tokens before building components — building without tokens leads to hardcoded values that break when the design system updates.
- NEVER hardcode Figma colors/spacing — always map to CSS variables or design token constants that reference the Figma source.
- ALWAYS map Figma auto-layout to CSS flexbox — auto-layout is a direct 1:1 mapping to flexbox; using other layout methods loses design intent.
- NEVER export raster images when SVG is available — SVGs scale cleanly and reduce bundle size; only use PNG/JPEG for photographs.
- ALWAYS preserve Figma component naming in code component names — divergent naming breaks the design-development feedback loop.
Anti-Patterns
| Anti-Pattern | Why It Fails | Correct Approach | | --------------------------- | -------------------------------- | ---------------------------------------------- | | Hardcoded hex colors | Breaks on design system update | Use CSS variables mapped from Figma tokens | | Ignoring auto-layout | Layout doesn't match design | Map auto-layout 1:1 to flexbox/grid | | Pixel-perfect obsession | Wastes time, ignores responsive | Match design intent, not exact pixels | | Skipping component variants | Missing states (hover, disabled) | Extract ALL Figma variants | | Manual token extraction | Error-prone, doesn't scale | Use Figma REST API for programmatic extraction |
Figma MCP Server Tools (figma/mcp-server-guide)
When the official Figma MCP server is running, these 12 tools are available:
| Tool | Purpose |
| ---------------------------- | -------------------------------------------------------------------- |
| get_design_context | Get full design context for a file/node (components, styles, layout) |
| generate_figma_design | Generate new designs from natural language description |
| get_variable_defs | Extract all design tokens (colors, spacing, typography variables) |
| get_screenshot | Capture rendered screenshot of a frame/component |
| code_connect_map | Map Figma components to their code counterparts |
| create_design_system_rules | Auto-generate design system documentation |
| get_figjam | Access FigJam board content and sticky notes |
| generate_diagram | Generate Figma diagram from Mermaid input |
| get_components | List all published components in a file |
| get_styles | Extract all defined styles (color, text, effect) |
| export_assets | Export assets as PNG/SVG/PDF with scale options |
| get_annotations | Retrieve design annotations and spec notes |
| get_metadata | Get XML layer representation of a file/node for programmatic parsing |
| whoami | Get current user identity, plan tier, and available seat count |
MCP Setup: Install Figma Desktop app -> Settings -> Enable MCP server
Auth: Uses active Figma session (no API key needed for local MCP)
Key workflow: get_design_context -> code_connect_map -> export_assets for design-to-code
Identity check: Use whoami to verify plan tier before calling enterprise-only tools
Memory Protocol (MANDATORY)
Before starting:
Read .claude/context/memory/learnings.md
After completing:
- New pattern ->
.claude/context/memory/learnings.md - Issue found ->
.claude/context/memory/issues.md - Decision made ->
.claude/context/memory/decisions.md
ASSUME INTERRUPTION: If it's not in memory, it didn't happen.
Related Skills
oimiragieo/neurokit2
tools
VerifiedTrustedCommunity
Comprehensive biosignal processing toolkit for analyzing physiological data including ECG, EEG, EDA, RSP, PPG, EMG, and EOG signals. Use this skill when processing cardiovascular signals, brain activity, electrodermal responses, respiratory patterns, muscle activity, or eye movements. Applicable for heart rate variability analysis, event-related potentials, complexity measures, autonomic nervous system assessment, psychophysiology research, and multi-modal physiological signal integration.
24SKILL.mdUpdated Apr 15, 2026
oimiragieo/networkx
tools
VerifiedTrustedCommunity
Comprehensive toolkit for creating, analyzing, and visualizing complex networks and graphs in Python. Use when working with network/graph data structures, analyzing relationships between entities, computing graph algorithms (shortest paths, centrality, clustering), detecting communities, generating synthetic networks, or visualizing network topologies. Applicable to social networks, biological networks, transportation systems, citation networks, and any domain involving pairwise relationships.
24SKILL.mdUpdated Apr 15, 2026
oimiragieo/molfeat
data-ai
VerifiedTrustedCommunity
Molecular featurization for ML (100+ featurizers). ECFP, MACCS, descriptors, pretrained models (ChemBERTa), convert SMILES to features, for QSAR and molecular ML.
24SKILL.mdUpdated Apr 15, 2026
oimiragieo/modal
development
VerifiedTrustedCommunity
Run Python code in the cloud with serverless containers, GPUs, and autoscaling. Use when deploying ML models, running batch processing jobs, scheduling compute-intensive tasks, or serving APIs that require GPU acceleration or dynamic scaling.
24SKILL.mdUpdated Apr 15, 2026