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.

Vous préférez rester dans Figma ?Obtenir le plugin Figma gratuit

Gratuit pour commencer · Sans carte bancaire · Compatible avec l'offre gratuite de Figma

Le nouveau plugin Figma

Une application entière depuis votre fichier Figma, pas écran par écran

Le plugin Codia, entièrement refait, lit vos vrais calques, images et vecteurs, puis vous rend un projet qui tourne.

  • Plusieurs frames, une app avec routes

    Cochez jusqu'à 20 frames : chacun devient une page. Renommez les pages et définissez leurs routes avant de générer.

  • Conversion rapide, sans tokens de modèle

    Obtenez du HTML, React ou Vue avec CSS directement depuis la mise en page. Passez à l'AI Agent pour aller plus loin.

  • Construit avec vos vrais assets

    Les remplissages d'image et les vecteurs SVG sont exportés tels quels depuis Figma, pour un code fidèle au design au lieu d'une approximation.

  • Aperçu, copie et ZIP dans Figma

    Voyez l'app tourner, lisez le code fichier par fichier, copiez-le ou téléchargez un ZIP sans quitter le plugin. L'historique garde chaque version.

  • Prêt dans le Dev Mode

    Les développeurs ouvrent le Dev Mode et voient le code déjà généré pour ce design, sans nouvelle génération ni crédits en plus.

  • Continuez sur le web

    Un clic ouvre le projet dans Codia Code, où l'agent continue de l'améliorer et où vous pouvez le publier sur une vraie URL.

Huit cibles

Les aperçus web tournent dans le plugin. Les cibles natives fournissent le code source et les instructions d'exécution.

  • HTML
  • React
  • Vue
  • iOS
  • Android
  • Flutter
  • React Native
  • macOS
Obtenir le plugin Figma gratuitOu partez d'un lien Figma

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

Un seul design. Six sorties natives du framework .

Le même composant, parfaitement idiomatique dans chaque framework. Cliquez sur un onglet pour naviguer, ou laissez défiler automatiquement.

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}

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.

Commencez gratuitement, sans carte bancaire. Fonctionne avec les maquettes que vous avez déjà.

Obtenir le plugin Figma gratuitEssayer Codia gratuitement