Skip to main content

Figma Make

Rules and conventions for working with Figma Make in the Seken project. For designers and developers who maintain the design-to-code pipeline.

What Is Figma Make?​

Figma Make is the AI-powered code generation tool used to scaffold the initial Seken codebase. It translates Figma designs directly into React components and project structure.

Project Origin

The main Seken repo was originally scaffolded by Figma Make from a Figma design file. The React code in /src/app/ and the initial backend structure were generated this way. The backend has since been fully rewritten to NestJS + Fastify + Drizzle. The docs site (this repo, SEKENDocs) was extracted separately from /docusaurus-docs/ inside that repo.

What Figma Make Generated​

OutputLocationStatus
React web appfrontend/Active, source of truth
Original Edge Function scaffoldsupabase/functions/server/Dead code — replaced by NestJS backend at backend/
React prototype at /docs/docs/ (main SEKEN repo)Visual preview only, not source of truth
Docusaurus docs site/docusaurus-docs/ → SEKENDocs repoActive, this site
/docs Is NOT Source of Truth

The main SEKEN repo has a React prototype at /docs. This is a visual preview generated by Figma Make and is not the live docs site. SEKENDocs (this repo, published at docs.pasarseken.id) is the real documentation.

Rules When Using Figma Make​

What to Preserve​

When running Figma Make exports, never overwrite these files without reviewing changes carefully:

FileWhy It Matters
app_config.dartBusiness rules, fees, deadlines, limits
shared-constants.tsxFrontend business-rule constants, must stay in sync with app_config.dart and backend config
routes-*.tsxAll frontend route handlers, hand-edited
Any .env fileSecrets, never overwrite
sidebars.ts (docs)Sidebar config, hand-maintained

What Is Safe to Regenerate​

  • UI components that have not been manually edited
  • Screen layouts that match the Figma design exactly
  • Theme token files (verify they match Brand Guidelines →)

Export Process​

  1. Open the Seken Figma file, ask the founding team for the link if you don't have access
  2. In Figma Make, select the target frame/screen to export
  3. Choose React as the output framework, do not use the Vue or plain HTML options
  4. Download the generated zip and extract into a temporary folder (not the repo root)
  5. Diff the generated files against the current repo, review every changed file before copying
  6. Copy only UI component files, never overwrite files listed in the What to Preserve table above
  7. Run pnpm preflight, fix any type errors before committing

Design-to-Code Rules​

Colors​

Figma Make generates color values from the Figma file. Ensure the Figma design uses the correct brand tokens, not hardcoded hex values:

Figma TokenCSS VariableHex
Primary/Tealvar(--primary)#006D77
Accent/Terracottavar(--accent)#E29578
Background/Linenvar(--background)#FAF8F5
Text/Darkvar(--dark)#1A1A1A
Border/Mutedvar(--muted)#EDECE9

If Figma Make generates hardcoded hex values, replace them with CSS variables before committing.

Typography​

Figma should use Plus Jakarta Sans for all text. If Figma Make generates a different font, update it, do not override in CSS.

After Every Figma Make Export​

  • Review diff, identify what changed vs. what was hand-edited
  • Verify app_config.dart and shared-constants.tsx are unchanged
  • Verify no hardcoded colors were introduced
  • Verify theme tokens still resolve correctly
  • Run pnpm preflight, must pass before committing
  • Test critical user flows: listing, checkout, orders

Known Figma Make Quirks​

No recurring issues documented yet. Update this section after each export, include the symptom, root cause, and workaround.