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

Ready to run

npx skills add https://github.com/AdhamHashim/Flutter_Base --skill design-tokens-adhamhashim

💬 Prompt for ChatGPT / Claude Chat▼

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.