Figma (rebrand and screens)

Duplicate the Kasy design system in Figma, change the brand, and ask an AI to implement it in Flutter.

Kasy ships its design system as a Figma file. You duplicate it into your account, edit the variables (colors, font), and the editor's AI applies it to Flutter.

Duplicate into your account: https://www.figma.com/design/S083trj2ctFrEFNjcavtpC/Kasy-Design-System/duplicate

Figma is one of two design tool options for Kasy — the other is Pen (pen.dev). Both deliver the exact same design system, and both have their own MCP, usable from any IDE. Pick whichever you prefer; this page covers the Figma path.

Figma is only one piece. The in-app Design System screen mirrors the code; DESIGN_SYSTEM.md is the AI contract. Roles of all three: Design System.

Implementation

Duplicating the design system

Open the duplicate link above (free Figma account).
Save it to your Drafts.
Open it in Figma desktop or web.

Rebrand in 4 steps

1. Open Variables

In Figma: Local variables → Kasy Colors (Light and Dark modes).

The 01 Tokens page in the file mirrors Home → Design System in the app.

2. Change your brand

color/accent/accent: the main color. Start here.
color/background/background: background (also affects the splash).
color/foreground/foreground: text.
Default font: Inter.

3. Prompt for the AI

With the Kasy MCP installed, the design-system-guide resource already reads AGENTS.md and docs/figma-workflow.md on its own, so the assistant knows this workflow even without pasting the whole prompt. You can still just say something short like "rebrand this project based on my Figma: [URL]" and it takes it from there.

Read AGENTS.md and docs/figma-workflow.md.

My Figma file: [URL OF YOUR DUPLICATED FILE]
Use Figma MCP get_variable_defs on the 01 Tokens page.

Sync ALL colors in lib/core/theme/colors.dart
(KasyColors.light() and KasyColors.dark()), not just accent.

If the background changed, update the splash in pubspec.yaml.

Check the Design System in the app (light and dark).
flutter analyze with no errors.

New screens follow the same principle: with the Kasy MCP installed, just ask "build the [name] screen matching this Figma frame: [URL]", the assistant already knows (via design-system-guide) that a new screen also starts in Figma, not just a rebrand.

4. Check it in the app

kasy run --web

Home → Design System. Toggle light/dark in Settings.

Only create new screens after the rebrand is correct.

Creating a new screen

Design it in your Figma file using the same variables.
Ask the AI to implement the frame (faithful, functional, Kasy components, i18n).
Run kasy run --web and test it.

Information

What ships in the project

After kasy new:

File	What it is
`docs/figma-guia.md`	This offline guide, in the project's language
`docs/figma-workflow.md`	Rules for the AI (English)
`docs/pen-guia.md`	Same guide, for Pen instead — the project ships with both
`docs/pen-workflow.md`	Rules for the AI about Pen (English)
`DESIGN_SYSTEM.md`	Design-system contract for AI/devs (not where you edit colors)
`design/README.md`	The design system's link + an overview of the pages

The design system doesn't ship as a local file: it lives in Figma's cloud. Use the duplicate link above to get your own copy.

Screens for your product live in a separate Figma file, e.g. My App.

Useful commands

Command	For what
`kasy new`	Creates the project (includes Figma docs)
`kasy run --web`	Runs it in the browser
`flutter analyze`	Should come back clean

Common mistakes

Problem	What to do
The app is still blue	Sync all colors, not just accent
The AI used raw Material	Ask for `KasyButton`, `KasyCard`, `KasyTextField`
Color outside the mockup	Check the design system before the code
MCP on master	Duplicate first; edit your copy

Summary

Rebrand in Figma variables → AI → lib/core/theme/.
Screens in the app's file → AI → faithful and functional.
Color outside the DS → the AI flags it, doesn't hardcode it.

Figma (rebrand and screens)

On this page