こんにちは。
最近、デザインも勉強したいと思い、Figmaを使い始めました。
その中で、Figmaで作成したデザインからソースコードを自動生成できるプラグインがあるみたいで、使っていきたいと思います。
TeleportHQというサービスを使っていきます。
TeleportHQ は、統合された UI 開発ツールとコンテンツ モデリング ツールを備えた共同フロントエンド プラットフォームです。
ヘッドレスの静的 Web サイトを即座に作成して公開するための強力なビジュアル ビルダーということです。
Figmaで簡単にデザイン作成してみました。。
Nucleus UI を使用し簡単に作成しました。
Figmaのデザイン方法については、これからもっと学んでいきたいですね。
1. Figma上で右クリックしメニューから「プラグインをさらに探す」をクリック。
2. 「TeleportHQ」と検索し「実行」
3. 今回は、一部ではなく全体的にコードかしたいので右側の「Export as a new project」を選択します。
4. TeleportHQのサイトに移動（アカウント登録がまだの場合アカウント登録する必要があるかもしれないです。）
TeleportHQのサイトに移動できたら、先ほど作成したデザインが表示されています。
早速コード化していきたいと思います。
コード化したいフレームorコンポーネントを選択し、右上メニューのダウンロードボタンを押します。
(↓のアイコンです。)
作成したいフロントエンドを選択します。
HTMLだけではなく、Next.jsやNust.js,Gatsbyと色々選択肢がありますね。
今回は、Gatsbyを選択してExport Cord as の横にあるZIPアイコンをクリックすると、自動生成されたソースコードをZIP形式でダウンロードできます。
ダウンロードしたフォルダをVScodeで開いてみました。
Gatsbyの場合スタイルは、cssModuleで書いてあったりと色々使えそうな予感がしました。
TOPページは「index.js」にしないといけないので、そこだけ修正しました。
開発環境も整っているので、npmでローカルサーバを立ち上げれば確認できると思います。
npm install
npm run develop
http://localhost:8000/
(選択したフロントエンドよって立ち上げ方は変わります。)
TeleportHQの画面まで、少し戻ります。
TeleportHQでそのまま公開できるみたいなので、公開してみたいと思います。
「Pubulish」ボタンから、webのTeleportHQ domainを選択し、Pubulish!
少し待つとTeleportHQが用意したdomainで公開されます。
https://nucleus-ui-mobile-app-ui-component-library-lite-vers-f5ehq0.teleporthq.app/
https://nucleus-ui-mobile-app-ui-component-library-lite-vers-f5ehq0.teleporthq.app/about
(TOPページ（ルートディレクトリ）は、topにするデザインを「index」という名前にしないと、TOPページにならないのでご注意ください)
場合によっては、ノーコードで作成しても良いと思います。
ただ今回やった方法だと、ある程度はコードを自動生成し、そこから調整や修正を加えることもできるので、すごく便利なんじゃないかなと思いました。
figmaをもっと使いこなせば、もっと便利なやり方があったりすると思うので、使いこなせるようにしていきたいです。
