TeleportHQとは

FigmaのデザインファイルをNext.jsのコードに変換します。
無料です。
（他にもたくさん便利な機能があります。）

サイト

TeleportHQ
Low-code Front-end Design & Development Platform | TeleportHQ
https://teleporthq.io/
デザインのコード化ツール
無料 (3プロジェクトまで)

Figma
https://www.figma.com/
デザイン設計ツール
無料 (3つのFigmaファイルと3つのFigJamファイルまで)

Next.js by Vercel - The React Framework
https://nextjs.org/
無料 (オープンソース)

Figmaの基本的な使い方を知っており、デザインを一通り書けてプロトタイプまで作ることが出来る。
Figmaプラグインの基本的な使い方を知っている。
Next.jsのインストールをしたことがある。
VSCodeを使える。

まず最初にFigmaでデザインを書き、プロトタイプまで作ります。
デザインの一部のみをコード化することも可能です。
TeleportHQはフレームもコンポーネントも区別なくコード化出来ます。

※ 今回利用した自分がデザインしたファイルは

Figma上の右クリックメニューからTeleportHQのプラグインを探します。

検索キーワードは「TeleportHQ」と入力し、見つけたらインストールします。

Figmaの右クリックメニューから
プラグイン＞TeleportHQを選択。
そうすると、コード化するエレメントを選択してくださいと出ます。
コード化したい部分を選択します。

そうすると、上図のような画面に変化をし、
選択すると上図のように、一部分を選択しコピーするか、全体をコピーしTeleportHQに新しいプロジェクトを作るかを選択します。

今回は右側の「Export as a new project」を選択します。

（ここでGoogleアカウントか、Githubのアカウント認証が求められるはず・・・（忘れた））

※ここでブラウザ上のTeleportHQのサイト（プレイグラウンド）に移動します。
プレイグラウンド（＝サンドボックス）とはブラウザ上で色々操作できる場所を提供してくれるサービスです。

ブラウザ上でTeleportHQサイトに来ました。
そしてうまくいっていればFigmaでデザインしたものがTeleportHQのプレイグラウンドで見ることが出来ているはずです。

次に、コード化したいフレームorコンポーネントを選択します。
※重要：選択を間違えた場合、Next.jsのプロジェクト画面が真っ白になったり404ページが見つかりませんとなったりします。

デザインの選択を確認しましたら、
右上メニューの青い「Publish」公開ボタンの左隣にダウンロードボタンがあります。
（その隣はコード表示ボタンになります。）
ダウンロードボタンを押します。

ここでどのフロントエンドのコードをダウンロードするかの選択が出来ます。

選択しましたら、下の「Export Code as ZIP」ダウンロードボタンを押します。

後はダウンロードしたファイルを解凍して、
VSCodeで開きます。

npm install
or
yarn
でインストールをします。

npm run dev
or
yarn dev
でローカルサーバーを立ち上げます。

成功していれば、デザインしたファイルが
http://localhost:3000/
上に表示されているはずです。