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

design-tokens

Map Figma design values to Flutter token classes in Flutter_Base.

1|1|Updated Jun 21, 2025
Search Tags:#typography#design system#figma#design tokens#flutter#ui development#color mapping
One-click install
npx skills add https://github.com/AdhamHashim/Flutter_Base --skill design-tokens-adhamhashim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-tokens
Source: https://github.com/AdhamHashim/Flutter_Base/tree/main/.claude/skills/design-tokens
Command: npx skills add https://github.com/AdhamHashim/Flutter_Base --skill design-tokens-adhamhashim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the process of translating design specifications from Figma into usable Flutter code tokens, ensuring design consistency and reducing manual mapping errors.

Core Features & Use Cases

  • Color Mapping: Translates Figma colors to AppColors constants, enforcing reuse policies.
  • Size & Spacing Mapping: Converts Figma dimensions (height, width, padding, margin) to AppSize, AppPadding, and AppMargin constants.
  • Typography Mapping: Maps Figma font sizes and weights to FontSizeManager and FontWeightManager constants, with automatic adjustments for Flutter rendering.
  • Border Radius Mapping: Converts Figma border radii to AppCircular constants.
  • Use Case: A designer provides a Figma file with specific colors, font sizes, and spacing. This Skill helps a developer quickly and accurately implement these design elements in the Flutter app by providing clear mapping rules.

Quick Start

Use the design-tokens skill to map the Figma color #FF5733 to the appropriate AppColors constant.

Frequently Asked Questions about design-tokens

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

FAQPage Schema
How do I map Figma design tokens to Flutter UI constants?▼

To map Figma design tokens to Flutter UI constants, you translate design values like colors, sizes, fonts, and spacing into predefined token classes such as AppColors, AppSize, and AppPadding. This enforces design consistency and reduces manual mapping errors.

Why do my Flutter font sizes look different from the Figma designs?▼

Flutter font sizes look different from Figma designs due to rendering engine variations between platforms. This Skill applies automatic adjustments to font sizes during the typography mapping process, ensuring visual consistency between your Figma designs and the final Flutter UI.

Can I enforce color reuse policies when translating Figma colors to Flutter?▼

Yes, you can enforce color reuse policies when translating Figma colors to Flutter. The Skill enforces strict reuse policies by mapping Figma colors directly to AppColors constants, preventing duplicate color definitions and maintaining a consistent design system.

What is the best way to convert Figma spacing and border radii into Flutter code?▼

The best way to convert Figma spacing and border radii into Flutter code is by mapping dimensions to predefined constants in the lib/src/config/res/ directory. It converts Figma padding and margin to AppPadding and AppMargin, and border radii to AppCircular constants.

Does this design tokens mapping approach work with any Flutter project structure?▼

This design tokens mapping approach is specifically tailored for the Flutter_Base project structure. It relies on utilizing predefined constants located in the lib/src/config/res/ directory, meaning it requires your project to follow this exact structural setup to function correctly.

Related Skills

Explore More Design & Creative Skills→
phananhtuan09phananhtuan09

frontend-design-figma-extraction

Extract design tokens, component specs, layout grids, and assets from Figma MCP.

Community
Advanced
lapc506lapc506
4

stitch_to_flutter

Converts Google Stitch HTML/Tailwind designs into Flutter/Dart UI code with Material 3 theming and Atomic Design structure.

Community
Intermediate
333-333-333333-333-333

flutter-design-tokens

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

Community
Intermediate
cris-achiardicris-achiardi
62

figma-component-generator

Generate Figma component sets from TSX/CSS source files and metadata.

Community
Advanced