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.
With the Kasy MCP, a rebrand is a conversation. Ask "rebrand my app" and the rebrand_project tool asks the essentials (brand document, logo, typography, Figma file), shows a preview and only applies after your yes. The instructions come through the MCP, with an active subscription. They are not a public page and not a file in the project.
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, just ask: "rebrand my app from my Figma file: [URL]". The rebrand_project tool (designTool: "figma") asks what is missing, shows a preview and only applies after your yes.
Use the Kasy MCP tool rebrand_project, with designTool "figma".
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: with the Kasy MCP installed, ask "create the [name] screen like the Figma frame: [URL]". The create_screens tool builds immediately.
4. Check it in the app
kasy run --webHome → 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 --weband test it.
Information
What ships in the project
After kasy new:
| File | What it is |
|---|---|
DESIGN_SYSTEM.md | Design-system contract for AI/devs (not where you edit colors) |
The rebrand and screen-building instructions are not shipped in the project. They come through the MCP, with an active subscription.
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.
See also Colors and Design System.
Last updated on 11/03/2026