Codia

Figma Communityで150,000+ユーザー · 2,300+いいね

Figmaをコードに変換：React・HTML・Flutterなどに書き出し

Figmaでフレームを選んで無料のCodiaプラグインを実行するか、ブラウザでスクリーンショット、PDF、Figmaファイルをアップロード。React、Vue、HTML、Flutter、SwiftUI、Androidのコードをプレビュー、コピー、ダウンロードできます。

Figma の中で作業したいなら無料のFigmaプラグインを入手

無料で始められます · クレジットカード不要 · Figmaの無料プランでも利用可能

新しい Figma プラグイン

画面ごとではなく、Figma ファイルからアプリ全体を

生まれ変わった Codia プラグインは実際のレイヤー、画像、ベクターを読み取り、そのまま動くプロジェクトを返します。

  • 複数フレームを、ルーティング付きの1つのアプリに

    最大 20 フレームを選ぶと、それぞれが1ページになります。生成前にページ名とルートを編集できます。

  • クイック変換はモデルトークン不要

    レイアウトから HTML、React、Vue＋CSS を直接生成。もっと必要なら AI Agent に切り替えられます。

  • 実際の素材から生成

    画像の塗りと SVG ベクターを Figma からそのまま書き出すので、推測ではなくデザインどおりのコードになります。

  • Figma 内でプレビュー・コピー・ZIP

    プラグインを離れずに動作を確認し、ファイルごとにコードを読み、コピーや ZIP ダウンロードができます。履歴にすべてのバージョンが残ります。

  • Dev Mode ですぐ使える

    開発者が Dev Mode を開くと、そのデザインで生成済みのコードが表示されます。再生成もクレジット消費もありません。

  • Web で開発を続ける

    ワンクリックで Codia Code にプロジェクトを開き、エージェントが改善を続け、公開 URL にデプロイできます。

8 つの出力先

Web はプラグイン内でプレビュー。ネイティブはソースと実行手順を提供します。

  • HTML
  • React
  • Vue
  • iOS
  • Android
  • Flutter
  • React Native
  • macOS
無料のFigmaプラグインを入手Figma リンクから始める

アップロードからコードベースへ、 3ステップ.

レイヤーのタグ付け、プラグイン調整、プロンプト設計は不要。

ステップ1

デザインを投入

PNG・JPG・PDFをドロップするか、Figmaリンクを貼り付け。Codiaプラグインはfigma上の選択範囲も直接読み取ります。

PNG / JPG
PDF
Figma
Sketch

デザインをドロップ、またはFigmaリンクを貼り付け

ステップ2

ターゲットを選ぶ

React、Vue、HTML、SwiftUI、Flutter、Androidを選び、スタイル（Tailwind、CSS、styled-components、Swift styles、Compose）を指定。

React
Vue
HTML
SwiftUI
Flutter
Android
スタイル：TailwindCSS · styled-components · モジュール
ステップ3

コードを出す

結果をプレビューし、コードをコピーするかプロジェクトをダウンロードして、いつものエディタで開発を続けましょう。

~/src/components/PricingCard.tsx
1export functionPricingCard()
2 return(
3 <div className="pricing-card">
4 <h3>Pro</h3>
5 <p>$29/mo</p>
6 ...
コピー、ダウンロード、エディターで開けますエクスポート

1つのデザインから、 6種類のフレームワーク ネイティブ出力。

同じコンポーネントが各フレームワークで慣用的な書き方に。タブで切り替え、あるいは自動再生で。

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}

Figmaユーザーの声

プラグインの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 ·
Figma Communityですべてのコメントを見る

料金プラン

すべての製品で透明な料金。無料で始めて、ビジネス成長に合わせてアップグレード。

Figmaからコードへの変換 FAQ

FigmaデザインをReact、HTML、Flutter、モバイルアプリのコードに変換する際のよくある質問です。

Codiaのその他のFigmaプラグイン

次の画面を 数分.

無料で始められ、クレジットカード不要。今あるデザインでそのまま使えます。

無料のFigmaプラグインを入手Codiaを無料で試す