bernaferrari/FigmaToCode

これは何？

主な機能

• 01Figmaの選択内容からHTML、React、Svelte、styled-components、Tailwind、Flutter、SwiftUIのコードを生成します。
• 02Auto Layout、ネストされたフレーム、配置、絶対配置と組み合わせたレイアウトに対応します。
• 03Tailwind 3とTailwind 4の出力に対応し、クラスプレフィックスも任意で指定できます。
• 04Figmaのカラー変数を使用し、HTML出力では画像をBase64として埋め込みます。
• 05ライブプレビューを表示し、うまく変換できない要素には警告を表示します。
• 06ローカルアセットを含むVite、Next.js、Flutter、SwiftUIのスタータープロジェクトを出力します。

ユースケース

• 完成したFigmaコンポーネントを、初期実装として開発者に引き渡す。
• アプリケーションのロジックを組み込む前に、ページの一部をTailwindやReactでプロトタイプする。
• 既存のモバイルデザインから、FlutterまたはSwiftUIの出発点を作成する。
• デザインファイルを外部のAIサービスやクラウドサービスに送信できない環境で作業する。

クイックスタート

1. 1

   Figma Communityから無料プラグインをインストールします

2. 2

   Figmaでフレーム、コンポーネント、グループ、またはレイヤーを選択してプラグインを実行し、変換先を選びます

使う前に知っておきたいこと

• !Figmaが必要です。このプラグインはFigmaのプラグイン環境内でのみ動作します。
• !生成されるコードは見た目の骨組みです。セマンティクス、アクセシビリティ、アプリケーションロジックについて、人による確認が必要です。
• !ライセンスはGPL-3.0です。コピーレフトライセンスのため、派生コードの配布方法に影響します。

収録されている特集

トピック

よくある質問

FigmaToCode とは？

選択したデザインを、ローカルで編集可能なHTML、React、Svelte、Tailwind、Flutter、SwiftUIのコードに変換するFigmaプラグイン。 Figma to Codeは、選択したフレーム、コンポーネント、グループ、レイヤーを、Webやネイティブアプリ向けのベースコードに変換するFigmaプラグインです。出力形式はHTML、React（JSX）、Svelte、styled-components、Tailwind CSS（Tailwind 3および4の構文）、Flutterウィジェット、SwiftUIビューに対応しています。生成したコードとローカルの画像アセットをまとめ、Vite、Next.js、Flutter、SwiftUIなどの簡易スタータープロジェクトとして出力することもできます。

FigmaToCode は無料で使えますか？ライセンスは？

FigmaToCode は GPL-3.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

FigmaToCode は今もメンテナンスされていますか？

半年以内に更新あり。FigmaToCode の最終コミットは 2026年8月5日 です。

FigmaToCode は何に使えますか？

完成したFigmaコンポーネントを、初期実装として開発者に引き渡す。 アプリケーションのロジックを組み込む前に、ページの一部をTailwindやReactでプロトタイプする。 既存のモバイルデザインから、FlutterまたはSwiftUIの出発点を作成する。 デザインファイルを外部のAIサービスやクラウドサービスに送信できない環境で作業する。

FigmaToCode のインストール方法は？

Figma Communityから無料プラグインをインストールします Figmaでフレーム、コンポーネント、グループ、またはレイヤーを選択してプラグインを実行し、変換先を選びます

FigmaToCode はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/bernaferrari/FigmaToCode