Figmaで作成したデザインをデプロイ（公開）できるプラグイン「figma.to.website」。Figmaだけでデザインからデプロイまで実行できることからSNSでも話題となっています。
これは変態。
— Taiyo | AIで遊ぶ大学生 (@Taiyo_AiAA) June 29, 2024
Figmaから直接デプロイできるプラグインが登場しちゃった。。
簡単なLP作るだけだったらペライチとかstudioいらん。。 pic.twitter.com/XqtiFZmOQR
LPの作成はもちろん、有料プランを利用することで独自ドメインを活用できるのも魅力。Figmaのドメインであれば無料で利用できます。
また、テキストの指示だけでワイヤーフレームを作成できるFigmaプラグイン「Wireframe Designer」と組み合わせることで、さらにデザインの効率を高めることが可能です。
そこで今回は、figma.to.websiteを使ってFigmaで作ったデザインを公開してみました。
figma.to.websiteでできることや実際の使い方を詳しく解説しているので、FigmaでLPを作成する機会の多い方はぜひ参考にしてみて下さい。
figma.to.websiteでできること
figma.to.websiteでできることは下記の通りです。
- .figweb.siteドメインの使用
- グローバルCDN
- SEOへの最適化
- Googleフォントの利用
- カスタム404ページ
- ファビコンの利用
また、figma.to.websiteには有料プランもあり、各プランによってできることが異なります。
figma.to.websiteのプラン内容
| プラン | 価格（月額） | ページ数 | 画像数 | ストレージ | フォーム送信数 | カスタムドメイン | バッジなし | パスワード保護 |
|---|---|---|---|---|---|---|---|---|
| 無料プラン | 無料 | 10 | 100 | 128MB | 月30回 | なし | なし | なし |
| Level 1 | 5ドル | 10 | 100 | 512MB | 月30回 | あり | あり | なし |
| Level 2 | 10ドル | 100 | 1,000 | 1GB | 月300回 | あり | あり | あり |
| Level 3 | 20ドル | 200 | 2,000 | 2GB | 月3,000回 | あり | あり | なし |
figma.to.websiteの使い方
はじめに「figma.to.website」のプラグインページを開きます。
figma.to.websiteの公式URL:https://www.figma.com/community/plugin/1329237288766226289/figma-to-website-make-websites-directly-from-figma-publish-or-export-responsive-web-html-css-js
Figmaより
トップページ内の「場所を指定して開く」をクリックしてください。
Figmaより
最近使用したファイル情報が表示されるので、公開したいデザインが記載されているファイルをクリックします。
Figmaより
上記画面が表示されるので「実行」をクリックします。
Figmaより
作業画面上にある公開したいデザインカンプを選択し、「Use your own desing」欄の「Start with selected section」をクリックします。
Figmaより
すると上記のように公開ページのURLとページ名が表示されます。公開するページ先は画面赤矢印の部分をダブルクリックして編集できます。
序期の作業が完了したあとは「Publish」をクリックして下さい。
Figmaより
figma.to.websiteへのログイン画面が表示されます。FigmaアカウントかGoogleアカウントのいずれかでログインして下さい。
Figmaより
上記画面が表示されたら、再度「Publish」ボタンをクリックすることで公開できます。実際に公開したWebページは下記のURLからアクセスできます。
https://annnora-5bdinru4s3.figweb.site/home/
※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。
ITやプログラミングに関するコラム
オンラインホワイトボート「FigJam」の使い方。FigJamとMiroの比較結果や料金プランも併せて解説
AI搭載のプレゼンツール「gamma」の使い方。料金プランや日本語対応の有無も併せて解説
ChatGPT搭載のスマートグラス「Solos AirGo 3」登場！言語翻訳やメッセージ読み上げなど豊富な機能を搭載
Figmaの新機能「Figma Slide」の使い方を機能別に詳しく紹介
Luma Dream Machineの新機能「キーフレーム」を使ってみた。2枚の写真から中割り動画を作成可能
