• React logo
    React
  • Vue logo
    Vue
  • Angular logo
    Angular
  • Svelte logo
    Svelte
  • and many more

The Figma code generator that understands your repository

Import your repo and export code that uses your existing components, without any setup or custom mapping.

Try for free
Codex

Code just like you wrote it yourself

Codex will adapt its code generation to the conventions and code style used across your repo. It will read config files and use the same libraries and frameworks you are already using.

Refine your export further

Need to use a specific component? Instruct Codex to change your code and get a refined result, without losing the context. You can also do this multiple times, until you’re 100% happy.

Learns your repository with a one-click-import

You don’t have to map your figma components to your design system. Codex automatically recognizes which components you have implemented or installed and will use those for generating code.

Generates code in any framework or language

Any language, library or framework you are using in your repo will be used by Codex to generate code from Figma.

Learns from your feedback

As you refine your exports, Codex will remember your feedback and apply it to future code generations.

Stack-O-Rama

If you can make UIs with it, we support it. Due to the nature of our stack-agnostic generation technique, we support literally any framework.

  • HeadlessUI HeadlessUI
  • VueJS VueJS
  • PHP PHP
  • Chakra UI Chakra UI
  • Semantic UI Semantic UI
  • Less Less
  • Ruby on Rails Ruby on Rails
  • Java Java
  • Flask Flask
  • Dart Dart
  • Embed Embed
  • Swift Swift
  • Angular Angular
  • Ocaml Ocaml
  • Bootstrap Bootstrap
  • CSS CSS
  • Tailwind Tailwind
  • Preact Preact
  • SolidJS SolidJS
  • PandaCSS PandaCSS
  • AlpineJS AlpineJS
  • BackboneJS BackboneJS
  • HTML HTML
  • Gatsby Gatsby
  • Python Python
  • Android Android
  • React React
  • Shadcn Shadcn
  • Element UI Element UI
  • BlueprintJS BlueprintJS
  • NuxtJS NuxtJS
  • NextJS NextJS
  • Radix UI Radix UI
  • Django Django
  • Ruby Ruby
  • MaterialUI MaterialUI
  • SASS SASS
  • Rust Rust
  • Typescript Typescript
  • Svelte Svelte
  • Laravel Laravel
  • Electron Electron
  • Remix Remix
  • Astro Astro
  • Flutter Flutter
  • Ionic Ionic
  • JavaScript JavaScript
  • HeadlessUI HeadlessUI
  • VueJS VueJS
  • PHP PHP
  • Chakra UI Chakra UI
  • Semantic UI Semantic UI
  • Less Less
  • Ruby on Rails Ruby on Rails
  • Java Java
  • Flask Flask
  • Dart Dart
  • Embed Embed
  • Swift Swift
  • Angular Angular
  • Ocaml Ocaml
  • Bootstrap Bootstrap
  • CSS CSS
  • Tailwind Tailwind
  • Preact Preact
  • SolidJS SolidJS
  • PandaCSS PandaCSS
  • AlpineJS AlpineJS
  • BackboneJS BackboneJS
  • HTML HTML
  • Gatsby Gatsby
  • Python Python
  • Android Android
  • React React
  • Shadcn Shadcn
  • Element UI Element UI
  • BlueprintJS BlueprintJS
  • NuxtJS NuxtJS
  • NextJS NextJS
  • Radix UI Radix UI
  • Django Django
  • Ruby Ruby
  • MaterialUI MaterialUI
  • SASS SASS
  • Rust Rust
  • Typescript Typescript
  • Svelte Svelte
  • Laravel Laravel
  • Electron Electron
  • Remix Remix
  • Astro Astro
  • Flutter Flutter
  • Ionic Ionic
  • JavaScript JavaScript
  • HeadlessUI HeadlessUI
  • VueJS VueJS
  • PHP PHP
  • Chakra UI Chakra UI
  • Semantic UI Semantic UI
  • Less Less
  • Ruby on Rails Ruby on Rails
  • Java Java
  • Flask Flask
  • Dart Dart
  • Embed Embed
  • Swift Swift
  • Angular Angular
  • Ocaml Ocaml
  • Bootstrap Bootstrap
  • CSS CSS
  • Tailwind Tailwind
  • Preact Preact
  • SolidJS SolidJS
  • PandaCSS PandaCSS
  • AlpineJS AlpineJS
  • BackboneJS BackboneJS
  • HTML HTML
  • Gatsby Gatsby
  • Python Python
  • Android Android
  • React React
  • Shadcn Shadcn
  • Element UI Element UI
  • BlueprintJS BlueprintJS
  • NuxtJS NuxtJS
  • NextJS NextJS
  • Radix UI Radix UI
  • Django Django
  • Ruby Ruby
  • MaterialUI MaterialUI
  • SASS SASS
  • Rust Rust
  • Typescript Typescript
  • Svelte Svelte
  • Laravel Laravel
  • Electron Electron
  • Remix Remix
  • Astro Astro
  • Flutter Flutter
  • Ionic Ionic
  • JavaScript JavaScript
  • HeadlessUI HeadlessUI
  • VueJS VueJS
  • PHP PHP
  • Chakra UI Chakra UI
  • Semantic UI Semantic UI
  • Less Less
  • Ruby on Rails Ruby on Rails
  • Java Java
  • Flask Flask
  • Dart Dart
  • Embed Embed
  • Swift Swift
  • Angular Angular
  • Ocaml Ocaml
  • Bootstrap Bootstrap
  • CSS CSS
  • Tailwind Tailwind
  • Preact Preact
  • SolidJS SolidJS
  • PandaCSS PandaCSS
  • AlpineJS AlpineJS
  • BackboneJS BackboneJS
  • HTML HTML
  • Gatsby Gatsby
  • Python Python
  • Android Android
  • React React
  • Shadcn Shadcn
  • Element UI Element UI
  • BlueprintJS BlueprintJS
  • NuxtJS NuxtJS
  • NextJS NextJS
  • Radix UI Radix UI
  • Django Django
  • Ruby Ruby
  • MaterialUI MaterialUI
  • SASS SASS
  • Rust Rust
  • Typescript Typescript
  • Svelte Svelte
  • Laravel Laravel
  • Electron Electron
  • Remix Remix
  • Astro Astro
  • Flutter Flutter
  • Ionic Ionic
  • JavaScript JavaScript

FAQ

Who is it for?

Codex is targeted at professional front end developers to speed up their workflows.

Does my figma file need special preparation?

No, but it works much better if all frames use auto layout.

Which frameworks are supported?

Codex is framework-agnostic. This means it can generate code in any language, for any framework. However, popular frameworks like React and Vue work best, as LLMs have more training data on them.

Can I use it without a repository?

Currently, no. But you can create a repository and initialize it with an empty skeleton in the framework of your choice, then Codex will generate code for that framework.

Does it work with monorepos?

If there is only one frontend package in the repo, likely yes. Better monorepo support is on the roadmap.

Does it only work in dev mode/design mode?

Codex works in both figma modes.

Does it only work with Github?

Currently, yes. If you need support for other git providers, send us an email.

Codex

The repository-aware figma code generator plugin. Try it for free now!

  • No credit card required
  • 5 free code generations included
  • Cancel anytime
Try for free