Figmaで作ったデザインを公開できる「figma.to.website」が話題!料金プランや具体的な使い方を紹介

Figmaで作ったデザインを公開できる「figma.to.website」が話題!料金プランや具体的な使い方を紹介

公開: 更新:

Figmaで作成したデザインをデプロイ(公開)できるプラグイン「figma.to.website」。Figmaだけでデザインからデプロイまで実行できることからSNSでも話題となっています。

LPの作成はもちろん、有料プランを利用することで独自ドメインを活用できるのも魅力。Figmaのドメインであれば無料で利用できます。

また、テキストの指示だけでワイヤーフレームを作成できるFigmaプラグイン「Wireframe Designer」と組み合わせることで、さらにデザインの効率を高めることが可能です。

FigmaのAIプラグイン「Wireframe Designer」とは?特徴と具体的な使い方を詳しく解説
FigmaのAIプラグイン「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回 あり あり なし

Python基礎・実践(Django)

企業・法人向けのPython研修では、基礎から応用まで体系的に学べます。

Python研修の詳細

DX社員研修

企業・法人向けのDX研修では、実務に繋がるリスキリングでITレベルを向上させます。

DX研修の詳細

Javaエンジニア育成研修

企業・法人向けのJavaエンジニア育成研修では、Javaの基礎から応用まで確実に習得できます。

Java研修の詳細

新卒・新入社員向け研修

企業・法人に新入社員・新卒社員に向けたプログラミング研修を提供しています。

新入社員研修の詳細

コードキャンプのIT研修を全て見る

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.to.websiteの使い方

Figmaより

トップページ内の「場所を指定して開く」をクリックしてください。

figma.to.websiteの使い方

Figmaより

最近使用したファイル情報が表示されるので、公開したいデザインが記載されているファイルをクリックします。

figma.to.websiteの使い方

Figmaより

上記画面が表示されるので「実行」をクリックします。

figma.to.websiteの使い方

Figmaより

作業画面上にある公開したいデザインカンプを選択し、「Use your own desing」欄の「Start with selected section」をクリックします。

figma.to.websiteの使い方

Figmaより

すると上記のように公開ページのURLとページ名が表示されます。公開するページ先は画面赤矢印の部分をダブルクリックして編集できます。

序期の作業が完了したあとは「Publish」をクリックして下さい。

figma.to.websiteの使い方

Figmaより

figma.to.websiteへのログイン画面が表示されます。FigmaアカウントかGoogleアカウントのいずれかでログインして下さい。

figma.to.websiteの使い方

Figmaより

上記画面が表示されたら、再度「Publish」ボタンをクリックすることで公開できます。実際に公開したWebページは下記のURLからアクセスできます。

https://annnora-5bdinru4s3.figweb.site/home/

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム


ITやプログラミングに関するニュース

ブログに戻る

コメントを残す

コメントは公開前に承認される必要があることにご注意ください。

コードキャンプIT・プログラミング研修事例/現場により近いところにデジタルを根付かせるDX基礎講座研修|株式会社ブリヂストン - ITやプログラミングを知って学べるコネクトメディア コードキャンプIT・プログラミング研修事例/業務の効率化・DX推進に向けたIT人材育成への第一歩|株式会社カナエ - ITやプログラミングを知って学べるコネクトメディア 企業・法人向けのIT・プログラミング研修 - ITやプログラミングを知って学べるコネクトメディア 中途採用者向けのIT・プログラミング研修 - IT・プログラミングを知って学べるコネクトメディア

新着記事

対象者別で探す

子供(小学生・中学生・高校生)向け
プログラミング教室検索する

子供(小学生・中学生・高校生)がロボットやプログラミング言語を学ぶことができるオフラインからオンラインスクールを検索、比較することが可能です。

子供(小学生・中学生・高校生)
プログラミング教室検索する

ITやプログラムなどの
最新情報を検索する

日々、新しいITやプログラミング言語の情報が流れていきますが、特定の情報を時系列でニュースやコラムを確認することができます。

ITやプログラムなどの
最新情報を検索する