skills.rest
aramark-destinations
aramark-destinationsOFFICIAL
Explore all skills by this author →
GitHub

eds/figma-map

Maps a Figma design node to local EDS blocks using CSS tokens.

Updated Aug 27, 2026
Search Tags:#audit#figma#mcp#blocks#scss#token-mapping#design-to-block
One-click install
npx skills add https://github.com/aramark-destinations/aramark-mb --skill eds-figma-map
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: eds/figma-map
Source: https://github.com/aramark-destinations/aramark-mb/tree/main/.agents/skills/eds/figma-map
Command: npx skills add https://github.com/aramark-destinations/aramark-mb --skill eds-figma-map

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Maps Figma design nodes to local EDS blocks by extracting design data via the Figma MCP, enabling consistent token mapping and audit generation.

Core Features & Use Cases

  • Extract design data from Figma via MCP and map to CSS tokens.
  • Generate a {block}-figma-audit.md with token alignment and gaps.
  • Update the block SCSS to reflect token usage and add audit notes.
  • Produce an inline analysis report for review and handoff.

Quick Start

Provide the Figma file key and node-id of the target component and run the Figma map workflow.

Frequently Asked Questions about eds/figma-map

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I map Figma design specs to local EDS blocks and CSS tokens?▼

Mapping Figma designs to EDS blocks involves extracting design node data via the Figma MCP, aligning the specs with project CSS tokens, updating the block SCSS, and producing a token alignment audit report.

How does Figma MCP extract design data for token mapping?▼

Figma MCP extracts design data by reading a specific Figma file key and node-id, pulling component layout and style specifications to map them directly against your project's root and brand CSS tokens.

Do I need access to Figma MCP to map designs to EDS blocks?▼

Yes, access to mcp__figma__get_figma_data is required to extract design specifications. The workflow also reads from your local blocks directory and CSS token files to generate the audit and SCSS updates.

What files are generated when mapping a Figma node to an EDS block?▼

The workflow generates a {block}-figma-audit.md file in the blocks/{block} directory, updates the block SCSS with token usage notes, and produces an inline analysis report for review and handoff.

Can I audit Figma design tokens against my existing brand CSS tokens?▼

The workflow reads from styles/root-tokens.css and brands/{brand}/tokens.css to compare extracted Figma specs against existing tokens, creating an audit markdown file that highlights token alignment and gaps.

What's the best way to align Figma components with EDS block SCSS?▼

The best way is to use the Figma MCP to extract design data, map the specs to your project's CSS tokens, and automatically update the block SCSS with the correct token usage and audit notes.

Related Skills

Explore More Design & Creative Skills→
SalesforceCommerceCloudSalesforceCommerceCloud
51

b2c-metadata

Create and validate B2C Commerce site metadata XML for system-object extensions, custom objects, and site preferences.

Official
Basic
payloadcmspayloadcms
44.1k

ui4

Automate Payload CMS UI reskinning from Figma designs with SCSS to CSS migration.

Official
Advanced
guichefferguicheffer
3

figma-researcher

Extract design specifications and implementation details from Figma designs via MCP.

Community
Intermediate
mrgreenishmrgreenish

figma-to-code-design-system

Sync Figma design tokens into DTCG tokens.json and regenerate CSS, Tailwind, or SCSS outputs.

Community
Advanced