Codia
150 000+ utilisateurs · 2 300+ j'aime sur Figma Community

Figma en code : exportez vos maquettes en React, HTML, Flutter et plus

Sélectionnez un frame dans Figma et lancez le plugin gratuit de Codia, ou importez une capture d'écran, un PDF ou un fichier Figma dans votre navigateur. Obtenez du code React, Vue, HTML, Flutter, SwiftUI ou Android à prévisualiser, copier et télécharger.

Essayer gratuitementObtenir le plugin Figma gratuit

10 crédits gratuits chaque mois · Sans carte bancaire · Compatible avec l'offre gratuite de Figma

1import { CheckIcon } from 'lucide-react'
2
3export function PricingCard() {
4  return (
5    <div className="rounded-2xl border border-zinc-200 bg-white p-8 shadow-sm">
6      <h3 className="text-sm font-medium text-zinc-500">Pro</h3>
7      <div className="mt-3 flex items-baseline gap-1">
8        <span className="text-4xl font-semibold tracking-tight">$29</span>
9        <span className="text-zinc-500">/mo</span>
10      </div>
11      <p className="mt-3 text-sm text-zinc-600">
12        Everything you need to ship production UIs, faster.
13      </p>
14      <button className="mt-6 w-full rounded-lg bg-zinc-900 py-2.5 text-sm font-medium text-white hover:bg-zinc-800">
15        Start free trial
16      </button>
17      <ul className="mt-6 space-y-2 text-sm text-zinc-700">
18        {['Unlimited projects', '6 framework targets', 'Priority support'].map((f) => (
19          <li key={f} className="flex items-center gap-2">
20            <CheckIcon className="h-4 w-4 text-emerald-500" />
21            {f}
22          </li>
23        ))}
24      </ul>
25    </div>
26  )
27}

De l'import au code prêt à commit en trois étapes.

Sans annotation de calques, sans calibrage de plugin, sans prompt engineering.

Étape 1

Importez votre design

Déposez un PNG, JPG, PDF ou collez un lien Figma. Le plugin Codia lit également votre sélection active directement dans Figma.

PNG / JPG
PDF
Figma
Sketch

Déposez un design ou collez un lien Figma

Étape 2

Choisissez votre cible

Sélectionnez React, Vue, HTML, SwiftUI, Flutter ou Android — ainsi que votre approche de style (Tailwind, CSS, styled-components, styles Swift, Compose).

React
Vue
HTML
SwiftUI
Flutter
Android
Style :TailwindCSS · styled-components · Modules
Étape 3

Livrez le code

Prévisualisez le résultat, puis copiez le code ou téléchargez le projet pour continuer dans votre propre éditeur.

~/src/components/PricingCard.tsx
1export functionPricingCard()
2 return(
3 <div className="pricing-card">
4 <h3>Pro</h3>
5 <p>$29/mo</p>
6 ...
Prêt à copier, télécharger ou ouvrir dans l'éditeurExporter

Conçu pour du code que vous mergez vraiment.

De vrais composants dans votre framework, pas une simple image exportée. Une première version que votre équipe peut relire, refactoriser et fusionner.

Composants propres et idiomatiques

Props nommées, HTML sémantique, interfaces typées et conventions propres à chaque framework — sans soupe de divs imbriquées.

+ interface Props { variant: 'primary' | 'ghost' }
- const div = <div style={{...}} />

Des mises en page issues de l'Auto Layout

Les frames en Auto Layout deviennent flexbox, stacks et rangées dans le framework cible : un fichier bien structuré donne des mises en page qui s'adaptent plutôt que des positions fixes.

Le style que votre équipe utilise déjà

Tailwind, CSS, CSS Modules ou styled-components sur le web, styles natifs en SwiftUI, Flutter et Compose. À la relecture, remplacez les couleurs générées par les tokens de votre thème.

Nommé d'après vos calques

Les noms de composants et de classes reprennent les noms de vos calques Figma : un fichier bien rangé et bien nommé donne un code plus facile à lire et à refactoriser.

Dans Figma ou dans le navigateur

Lancez le plugin sur un frame dans Figma, ou importez une capture d'écran, un PDF ou un fichier Figma dans l'application web Codia. Dans les deux cas, vous obtenez du code à prévisualiser, copier ou télécharger.

Assez rapide pour faire partie de la boucle de design

Un écran typique se convertit en quelques secondes, ce qui fait de la génération de code une étape naturelle du cycle de conception.

Ce qu'en disent les utilisateurs de Figma

Commentaires cités mot pour mot depuis la page du plugin sur Figma Community.

I am very impressed by this tool!! it does 75% of the job. Of course, it needs adjustments and cleanup as individual classes are created for every element and it better to consolidate that. But, it would have taken me hours to get even closer to that 75%. … I will be using this tool a lot! Thanks!
JJorge Tardio Urquidi@jorgetardiourqu ·
I checked out a few code generators for Vue.js in the community, and Codia is hands down the best one I've come across
FFlorin Kissi@florinkissi ·
oh my god, is this perfect plugin. For me, it's the best Android export plug-in in history
박박재웅@1d749f4c_4f86_4 ·
Lire tous les commentaires sur Figma Community

Tarifs

Des tarifs clairs pour chaque produit. Démarrez gratuitement, évoluez selon vos besoins.

Questions fréquentes sur Figma en code

Réponses sur la conversion de maquettes Figma en code React, HTML, Flutter et d'applications mobiles.

Plus de plugins Codia pour Figma

Livrez votre prochain écran en quelques minutes.

10 crédits gratuits chaque mois, sans carte bancaire. Fonctionne avec les maquettes que vous avez déjà.

Essayer Codia gratuitementObtenir le plugin Figma gratuit