Canvas

Canvas (canvas.originkit.dev) is a free Figma-to-code converter that turns a Figma file into production-ready markup. It reads a design through the Figma REST API using a personal access token, a file key, and an optional node id, then maps the document tree—auto layout, constraints, typography, fills, effects—onto an editable node graph rendered with @xyflow/react. Every node is keyboard operable (select, move, delete, escape) and the resulting tree is emitted to nine targets: HTML/CSS, HTML with CSS classes, React JSX, React + Tailwind, Vue, Svelte, SwiftUI, Flutter, and Jetpack Compose. Tokens and canvas state persist to localStorage, so no backend holds user credentials or design data.

Build StackNext.js (App Router), React 19, TypeScript, Tailwind CSS, @xyflow/react, Zustand, Figma REST API

Challenges

  • Mapping Figma auto layout, constraints, and absolute positioning onto layout primitives that differ per target—flexbox, SwiftUI stacks, Flutter widgets, Compose modifiers.

  • Keeping the node graph interactive as the Figma document tree grows to hundreds of nested frames.

  • Emitting readable output instead of a wall of absolutely positioned divs, including deduplicated CSS classes and sane element naming.

  • Handling Figma REST API tokens client-side without a backend, while keeping rate limits and partial fetches recoverable.

Solutions

  • Built one intermediate representation per node and one emitter per target, so adding a codegen target is a pure function over that IR instead of a fork of the traversal.

  • Rendered the tree through @xyflow/react with viewport-only rendering and memoized node components, keeping pan and zoom smooth on deep documents.

  • Collapsed repeated style sets into shared classes and carried Figma layer names through as element and component names in the generated code.

  • Kept tokens and canvas state in localStorage only, fetching per node id so a partial import can be retried without refetching the whole file.