skills.rest
AdhamHashim
AdhamHashimCOMMUNITY
Explore all skills by this author →
GitHub

figma-mcp-mapping

Map Figma design elements to Flutter tokens for color, size, padding, radius, and font.

1|Updated May 22, 2026
Search Tags:#figma#mcp#design consistency#flutter#token mapping
One-click install
npx skills add https://github.com/AdhamHashim/flutter_clean_arch_base --skill figma-mcp-mapping
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma-mcp-mapping
Source: https://github.com/AdhamHashim/flutter_clean_arch_base/tree/main/.claude/skills/figma-mcp-mapping
Command: npx skills add https://github.com/AdhamHashim/flutter_clean_arch_base --skill figma-mcp-mapping

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps in accurately mapping Figma MCP design elements to Flutter tokens, ensuring design consistency across platforms.

Core Features & Use Cases

  • RTL Conversion: Converts Figma Right-to-Left (RTL) elements to Flutter's RTL rules.
  • Screen Padding Adjustment: Adjusts padding/margin values for screen-level design elements.
  • RTL Section Verification: Ensures Figma sections are correctly mirrored for RTL reading.
  • Icon Usage: Guidelines for using icons without color or wrapper changes.
  • Widget Mapping: Mapping Figma elements to Flutter widgets for consistent development.
  • Quick Start: Automate the mapping process using the figma-mcp-mapping skill.

Quick Start

Use the figma-mcp-mapping skill to map the Figma MCP design elements for your Flutter app.

Frequently Asked Questions about figma-mcp-mapping

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

FAQPage Schema
How do I map Figma design elements to Flutter tokens for consistent rendering?▼

Mapping Figma design elements to Flutter tokens requires a Figma file and an existing Flutter project setup. This process translates colors, sizes, padding, radius, and fonts to ensure consistent cross-platform rendering.

What is the best way to convert Figma RTL elements to Flutter rules?▼

Converting Figma RTL elements to Flutter rules involves verifying that Figma sections are correctly mirrored for RTL reading. This ensures accurate screen-level padding and margin adjustments for Right-to-Left layouts.

Do I need a Figma file and Flutter project setup to use Figma MCP mapping?▼

Yes, mapping Figma MCP design elements to Flutter tokens requires both a Figma file and an active Flutter project setup. These environments are necessary to execute accurate color, size, padding, radius, and font mappings.

How are Figma widgets mapped to Flutter for design consistency?▼

Figma widgets are mapped to Flutter widgets by applying specific guidelines for icons, colors, and wrappers. This translation ensures the developed Flutter application maintains strict design consistency with the original Figma layout.

Can Figma MCP mapping handle screen padding adjustments for Flutter?▼

Yes, Figma MCP mapping handles screen padding adjustments by modifying padding and margin values for screen-level design elements. This ensures the Flutter UI accurately reflects the intended Figma spacing and layout.

What are the limitations of mapping Figma MCP to Flutter tokens?▼

Limitations of mapping Figma MCP to Flutter tokens include strict icon usage guidelines that prevent color or wrapper changes, and the need for manual verification to ensure Figma sections are correctly mirrored for RTL reading.

Related Skills

Explore More Software Engineering Skills→
791994545791994545
4

figma

Convert Figma design elements into React and Tailwind code.

Community
Advanced
AdhamHashimAdhamHashim
1

design-tokens

Map Figma design values to Flutter token classes in Flutter_Base.

Community
Intermediate
333-333-333333-333-333

flutter-design-tokens

Define centralized Flutter design tokens for spacing, sizes, and radii.

Community
Intermediate
rmjamesrmjames
1

Brand Guidelines

Enforce design system tokens for spacing, color, and typography in web interfaces.

Community
Basic