AI-Ready Figma Design Guidelines for Kajoo

Kajoo transforms Figma designs into high-quality front-end code and structured CMS components.
To ensure accurate generation and minimize rework, please follow the guidelines below.

1. Use a Structured Design System

Consistency significantly improves the accuracy of Kajoo’s design-to-code engine.

• Use Color Styles / Variables for all colors (avoid raw hex codes).
• Use Text Styles for headings, body text, and labels.
• Follow a consistent 4px or 8px spacing scale.
• Reuse shared radius, shadow, and stroke styles.
• Use existing components from your design system where possible.

2. Build with Components and Variants

Kajoo converts components into reusable code.

• Build UI using components, not one-off groups or frames.
• Use variants for primary/secondary states, hover, focus, disabled, and error states.
• Name components clearly, e.g. Button / Primary, Card / Product.
• Keep components clean and free of hidden or unused layers.

3. Use Auto Layout Consistently

Auto Layout helps Kajoo infer Flexbox/Grid rules accurately.

Apply Auto Layout to:

• Buttons
• Cards
• Lists & tables
• Navigation
• Forms
• Page sections

Ensure padding and spacing values are consistent across the file.

4. Use Clear Layer Names and Hierarchy

Kajoo reads the semantic structure of the layer tree.

• Name layers based on function, not appearance.
  • Examples: Hero / Title, Card / Image, Form / Email Input
• Group related elements logically within frames.
• Reuse the same component for repeating patterns like lists and grids.
• Label images, icons, text layers, and interactive elements clearly.

5. Include Realistic Content and Key UI States

Kajoo models CMS fields and logic from the content and structure in Figma.

• Use realistic text instead of lorem ipsum.
• Include examples of both short and long text.
• Show important UI states:
  • Hover
  • Focus
  • Disabled
  • Error / Success
  • Open / Closed
• Provide valid and error form states.

6. Provide Responsive Variants

For better responsive code generation:

• Include desktop and mobile versions of key screens.
• Show how elements stack or reflow on smaller screens.
• Maintain consistent spacing behavior between breakpoints.

7. Annotate CMS Areas and Logic

Annotations help Kajoo map design to content and business rules.

Use short notes such as:

• [CMS] Page title
• [CMS] Card list items
• [Logic] Show only for logged-in users
• [Behavior] Carousel auto-plays every 5s
• [Responsive] Stacks vertically on mobile

Place annotations near relevant elements or on an overlay layer.

8. Keep the Figma File Clean and Organized

A tidy file produces more accurate results.

• Remove unused or hidden layers.
• Move exploration concepts away from production-ready screens.
• Organize pages clearly:
  • 01 Foundations
  • 02 Components
  • 03 Templates
  • 04 Screens & Flows
• Ensure consistent naming conventions across variables and tokens.

9. “Ready for Kajoo” Preflight Checklist

Before sending your designs to Kajoo:

• All colors, text, spacing, and effects use styles or variables.
• All UI is built from components (with variants).
• Auto Layout is applied consistently and correctly.
• Components and layers are semantically named.
• Key interaction states and responsive layouts are included.
• CMS-driven areas and logic are annotated.
• The file is clean, structured, and free of unused layers.

Summary

Following these guidelines ensures:

• Faster and more accurate code generation
• Reduced design-to-development clarification cycles
• Cleaner, scalable component libraries
• Better alignment with Kajoo’s Agentic workflow
• A smoother, more predictable design-to-delivery process