お好みの開発環境向けのコードを瞬時に生成
FigmaのレイヤーをTeleportHQにコピーするだけで、React、Next、Vue、Nuxt、Angular、またはプレーンなHTMLとCSSのコードをすぐに生成できます。Figmaプラグインを使えば、プロトタイプやデザインからクリーンなコードへのスムーズな移行が可能です。
Reactにエクスポート
次へエクスポート
Angularにエクスポート
Vueにエクスポート
Nuxtにエクスポート
FigmaからHTML・CSSに変換する方法（動画チュートリアル）
FigmaのデザインをHTMLとCSSに変換する方法を、短い動画チュートリアルでご覧ください。簡単な手順に沿って進めれば、すぐにFigmaのデザインをエクスポートできます。TeleportHQを使って、React、Angular、Vueなど、5種類のJavaScriptフレームワーク向けのコードを生成できます。
TeleportHQのデザインをコードに変換する 機能
Figmaエクスポートプラグインを使えば、デザイナーから開発者への引き継ぎを重視しながら、FigmaのデザインをHTMLとCSSに簡単に変換できます。
コードを即座に生成
アセット一覧
CodeSandboxにエクスポート
FigmaからTeleportHQにエクスポート
プロジェクトをウェブサイトとしてVercelにデプロイ
FigmaのデザインをHTMLコードに書き出す方法
Figmaから作業内容をエクスポートするには、まずTeleportHQ Design to Codeをインストールする必要があります。プラグインをインストールしたら、4つの簡単な手順に従って、あらゆるFigmaデザインをHTMLに変換できます。ステップ1
プラグインを起動する
以下の手順に従って、Figmaエクスポートプラグインを起動します。 右クリック > プラグイン > TeleportHQ Design to Code
ステップ2
フレームを選択
次の手順に従って、Figmaエクスポートプラグインを起動します：
右クリック ＞ プラグイン ＞ TeleportHQ Design to Code
ステップ3
デザインをエクスポート
Figmaのデザインをコードに変換するには、「TeleportHQにエクスポート」ボタンをクリックしてください。出力結果を含むプロジェクトがTeleportHQに自動的に作成されます。
既存のプロジェクトを更新する場合は、「レイヤーをクリップボードにコピー」ボタンを使ってコピーし、既存のTeleportHQプロジェクトに貼り付けてください。
FigmaのフレームをHTMLとCSSにエクスポートし、デザインを数分で検証
TeleportHQを使えば、HTMLやCSSへの素早いエクスポートや、FigmaデザインのReact、Vueなど開発者向けの対応コード形式への変換が可能になり、デザイナーと開発者の連携が簡単になります。 デザインを本番環境で使えるコードに自動変換し、開発者への引き継ぎをスピーディーにします。
