figma.to.website でコードを書かずに Web サイトを公開する

この記事の概要

Figma のプラグインに figma.to.website というものがあります。

これを使うと Figma で作ったデータをそっくりそのまま Web サイトとして公開できます。

簡単な使い方と注意点をまとめてみました。

作ったもの

非常に簡単な作りではありますが、3 ページ作りました。
ヘッダーにあるリンクからページ移動ができます（Logotypeとある場所をクリックすると、トップへ戻ります）。

ページ 1	ページ 2	ページ 3

使い方

Figma データ作成

基本的には通常通りに作成するだけで OK なので、具体的な部分は省略します。

細かな点でいくつか気をつけた方が良いポイントもありますが、細かすぎるので後から補足します。

コンポーネント、スタイル、バリアブルなどの使用にも特に制限はありません。

データとパスとのマッピング

1. 作成したデータを、ページ単位でセクションに入れ込む
2. セクション名をパス名にする
   1. セクション名が/の場合 → example.com/で見られる
   2. セクション名が/aboutの場合 → example.com/aboutで見られる

/のセクションはトップページとなるので必須で、それ以外のページの有無や名前は任意です。

プラグインの起動

figma to websiteと検索すると出てきます。

起動するとこのような画面になるので、公開したいセクションを選んでStart with selected sectionをクリックします。

初回はアカウント登録が必要ですが、Figma アカウントで登録できるので数秒で終わります。
追加の情報も要りませんでした。

公開

アカウント登録が完了すると、このような見た目になります。
（これは既に公開済みなので多少違う部分もありますが、ほぼ一緒です）

Publishを押せば完了です。

データ作りの細かな注意点

試していて、いくつかだけ気をつけた方が良さそうな点を見つけました。

バリアブルの名前が被るとどちらかに統合される

例えばSpacingコレクションとFont sizeコレクションがあり、両方にsmallというバリアブルを登録するようなことはあると思います。

この場合、どちらかのバリアブルに値が統合されてしまいます。
↓のようなイメージです。

• Figma データ
  • Spacing small: 4
  • Font size small: 12
• Web での表示
  • 余白: 4px
  • font-size: 4px

どちらが適用されるのかはあまり分かっていませんが、とにかくコレクションをまたいでいても一意な名前をつけるようにした方が良いみたいです。

画像レイヤーに適当な名前をつけているとアクセシビリティが悪くなる

画像要素はレイヤー名が alt 文として自動で適用されます。
なのでImage 2041みたいなレイヤーばかりあると、アクセシビリティが低下します。

AI による自動リネーム機能もついたことですし、ちゃんとリネームしておいた方が良いです。

ちなみに Figma はレイヤー名を空白にはできないのでalt=""を再現する方法が分かりませんでした。
実現できるのかもしれませんが、今回は諦めました。

要素名をちゃんとつけておかないとアクセシビリティが悪くなる

見た目的にはヘッダーやナビゲーション、見出しであっても、コードとしてはすべて div や span で出力されます。

ただしレイヤー名に<header>などと入れればそのタグが適用されます。
そのため、ちゃんと名前をつけておくのが重要です。

ちなみに、レイヤー名に他の文字列が入っていても問題ないので、コンポーネントとして適切な名前をつけつつ、後ろにタグ名を書く、といった書き方で OK です。
具体的には AwesomeHeadingComponent <h1>もちゃんと h1 に変換されます。

レスポンシブ対応はバリアブルのモードを使う

min-width や max-width と auto layout で対応できるレイアウトであれば、モードの設定は不要です。
ただし、ディスプレイ幅に合わせて余白や要素サイズが変わるようなときはモードを準備する必要があります。

公式ドキュメントには次の通りに準備するよう記載があります。

• “Desktop” => viewport >= 1440 pixels
• “Laptop” => viewport >= 1024 pixels
• “Tablet” => viewport >= 768 pixels
• “Phone” => viewport < 768 pixels

ただ、試してみたところ、DesktopやLaptopという名前があっていれば、ブレイクポイントの値は変えてもちゃんと適用されるようでした。

感想

リキッドレイアウトやレスポンシブ対応まで Figma だけで完結するのは便利そうです。
特に難しいこともないので、コードがあまり書けない人でもこれだけで Web サイトを公開できるのではないでしょうか。
（もちろん、簡単めな内容の数ページのサイトに限りますが……）

Framer や STUDIO も同様に WYSIWYG 編集 → 公開ができますが、慣れの問題で手間取っている人を見かけます。
Figma であれば日頃から使っている人が多いので、結構早く使いこなせるかもしれません。

補足

公式ドキュメントがあるので、こちらも参考にしてください。