figma-variables-to-flutter-export

Files (11)

• SKILL.md
• openai.yaml · agents/
• figma-variables-to-flutter-export · scripts/
• __init__.py · scripts/figma_variables_to_flutter_export/
• cli.py · scripts/figma_variables_to_flutter_export/
• colors.py · scripts/figma_variables_to_flutter_export/
• dart_renderer.py · scripts/figma_variables_to_flutter_export/
• models.py · scripts/figma_variables_to_flutter_export/
• non_colors.py · scripts/figma_variables_to_flutter_export/
• pipeline.py · scripts/figma_variables_to_flutter_export/
• variables.py · scripts/figma_variables_to_flutter_export/

SKILL.md (first lines)

# Figma Variables To Flutter Export

Use this skill to convert design tokens into deterministic Flutter design-system files. Inputs can be exported Figma Variables JSON, variables read from Figma MCP/plugin, or plain text tokens supplied by the user.

If a repository-skill exists for the current Flutter project, use it before running this skill so output paths and naming match the codebase. If no repository-skill exists, ask the user or prompt must provide the target file path and conventions.

## Quick Start

For supported JSON exports, use the bundled CLI at `scripts/figma-variables-to-flutter-export`, resolved relative to this `SKILL.md`.

```bash
figma-variables-to-flutter-export file.json \
  --type colors \
  --output lib/core/design_system/app_colors.dart
```

With explicit project conventions:

```bash
figma-variables-to-flutter-export file.json \
  --type colors \
  --output lib/core/design_system/app_colors.dart \
  --class-prefix App \
  --light-mode light \
  --dark-mode dark
```

Then, from the Flutter app root:

```bash
dart format lib/core/design_system/app_colors.dart
flutter analyze
```

For Figma MCP/plugin input, export local variables from the current Figma file first, then feed supported JSON to the CLI.

For plain text input, parse the user's tokens and generate Dart directly in the output shape below. Do not create a temporary JSON file just to satisfy the CLI unless using the existing JSON pipeline is the shortest reliable path.

## Core Rules

1. Prefer the bundled script for supported JSON exports.
2. Do not scan the repository as part of this skill.
3. Use repository-skill or explicit prompt context for path, class names, architecture, and integration details.
4. Generate only requested variable groups.
5. Keep output idempotent: same JSON and options produce the same Dart file.
6. Do not write into handwritten files unless the user or repository-skill explicitly chooses that path.
7. Do not mix colors, shadows, radius, typography, and spacing into one hybrid Dart file.
8. Do not infer base/system color layers from vague input.

## Input Sources

### JSON file

Use the bundled CLI when the token type is supported. The CLI supports colors, typography, spacing, radius, and shadow JSON exports.

Use JSON color inputs with clear base/system separation, selected collections, or aliases to generate `app_color_base.dart` and `app_colors.dart` as appropriate.

### Figma MCP/plugin

When Figma MCP `use_figma` is available and connected to a Figma design file, read local variables with:

```js
await figma.variables.getLocalVariableCollectionsAsync()
await figma.variables.getLocalVariablesAsync()
```

If the user names a collection, export only that collection. If no collection is named, export all local variable collections and group them by token type.

For colors, use aliases, collection names, or explicit user instructions to decide whether base/semantic separation is unambiguous. If it is not, generate one `app_colors.dart` with literal `Color(...)` values.

### Plain text

When the user provides tokens in prose, markdown, CSV-like text, or bullet lists, parse the token names and values directly. Generate Dart directly in this skill's output shape. Do not guess base/system layers unless the user clearly labels them.

## Output Contract

Default file mapping:

- Base color palette: `app_color_base.dart`, only when explicitly clear.
- Semantic or flat colors: `app_colors.dart`.
- Shadows: `app_shadow.dart`.
- Radius/radii: `app_radius.dart`.
- Typography/typo/text styles: `app_typography.dart`.
- Spacing: `app_spacing.dart`.

For semantic colors and all non-color token groups, generate the same Dart shape:

- `import 'package:flutter/material.dart';`
- `// Generated by figma-variables-to-flutter-export. Do not edit by hand.`
- Static token class, such as `AppColors`, `AppShadow`, `AppRadius`, `AppTypography`, or `AppSpacing`.
- `ThemeExtension` class, such as `AppColorsTheme`.
- `static const light` and `static const dark` when dark values exist.
- `copyWith`.
- `lerp`.
- `BuildContext` accessor, such as `context.appColors`.

Multiple collections of the same token type may contribute to the same token-type file only when generated field names are unambiguous. If names collide, stop and ask for explicit naming or collection selection.

## Pipeline Architecture

For JSON color CLI behavior, read the implementation from the CLI inward:

```text
scripts/figma-variables-to-flutter-export
  -> figma_variables_to_flutter_export/cli.py
  -> figma_variables_to_flutter_export/pipeline.py
  -> figma_variables_to_flutter_export/variables.py
  -> figma_variables_to_flutter_export/colors.py
  -> figma_variables_to_flutter_export/dart_renderer.py
```

The pipeline mirrors Style Dictionary's shape without adding Node.js: parse raw JSON, normalize variables into color tokens, classify base/system layer, resolve aliases, validate unsafe output, then render Dart.

## Supported JSON Export

### Colors

The bundled CLI is the deterministic path for supported JSON color exports. Figma MCP/plugin and plain text inputs may still generate the same Dart output shape.

From dthuy62/mobile-app-config, MIT.

More from dthuy62/mobile-app-config