Figma Sitesでデザインツールを使用 – Figma Learn - ヘルプセンター

Figma Sitesは、オープンベータとしてConfig 2025でリリースされました。現在、すべての有料プランで利用可能であり、スタータープランでの限定的な体験は近日公開されます。ベータ版に含まれる内容に関する詳細はこちらをご覧ください。

この機能を使用できるユーザー

ファイルへの編集アクセス権が必要です

Figma Sitesを使うと、Figma Designの強力なツールを使って、Webサイトを作成し、公開できます。

Figma Sitesでデザインを作成する

Figma Sitesで作業する際、ウェブページ内で直接デザインすることも、キャンバスをアイデアを探求するためのスペースとして使用することもできます。

デザイン要素を作成する。デザインファイルと同様に、まずフレーム、シェイプ、テキスト、またはその他のデザイン要素をファイルに追加します。
それらをレスポンシブにする。オートレイアウトと制約を使用して、さまざまな画面サイズに適応するサイトを作成します。
デザイン要素を再利用する。コンポーネント、スタイル、バリアブルを作成するか、ライブラリの既存のアセットを使用して、サイトの一貫性を保ちます。
ライブラリを公開する。コンポーネント、スタイル、バリアブルを共有して、ユーザーが他のファイルでアクセスできるようにします。
インタラクションを追加する。Figma Designでのプロトタイプ作成のように、インタラクションを使ってデザイン要素に動きやアニメーションを加えます。

Webページにデザインを追加したら、プレビューして公開できます。コーディングは不要です。

一般的に、Figma DesignとFigma Sitesの間で作業を行き来することは、スムーズで問題のない体験であるべきです。

デザインは両方の製品でまったく同じように表示され、より複雑な機能は自動的に両製品間で変換されます。例えば、Figma Designのプロトタイプのコネクションは、Figma Sitesの対応するインタラクションに自動的に変換されます。

Figma Sitesでデザインする場合、Figma Designで利用可能なほとんどの機能にアクセスできます。各機能の使用方法についてのドキュメントは、以下のリンクで確認できます。

	Figma Designで利用可能	Figma Sitesで利用可能
フレーム	✓	✓
シェイプ	✓	✓
イメージ	✓	✓
テキスト	✓	✓
Googleフォント	✓	✓
カスタムフォント	✓	コンピュータにインストールされたカスタムフォントは、現在Figma Sitesでは使用できませんが、将来使用可能になります。
ベクターオブジェクト	✓	✓
プール演算を含む、ベクトルパスの編集	✓	✓
マスク	✓	✓
オブジェクトの一括編集	✓	Figma Sites には複数のブレークポイントをまたいで編集するための追加機能があります。
ウィジェットとプラグイン	✓	現在は利用できませんが、将来使用可能になります。
Dev Mode	✓	X
描画ツール	✓	X
ブランチ	✓	X
ファイルのバージョン履歴	✓	✓
AIツール	✓	Figma Designとの共通機能があります。詳細はこちら。
アクションメニュー	✓	✓
セクション	✓	セクションにはデザインを含めることができますが、ウェブページは含められません。
Webページ	X	✓
ブレークポイント	X	✓
アノテーション	✓	X
プロトタイプ作成	✓	X
インタラクション	X	✓

	Figma Designで利用可能	Figma Sitesで利用可能
コメント	✓	✓
スポットライト	✓	スポットライトは、作成や設定のような全画面表示の状態では人をフォローしません。
音声通話	✓	X

	Figma Designで利用可能	Figma Sitesで利用可能
コンポーネント	✓	Figma Designのようにコンポーネントを作成および管理することができます。Webページで使用できるのはインスタンスのみです。
バリアントのあるコンポーネント	✓	✓
スタイル	✓	✓
ブレークポイントのあるテキストスタイル	X	✓
バリアブル	✓	✓
ライブラリをファイルに追加	✓	✓
ライブラリの公開	✓	✓
Webに公開	X	✓
コミュニティに公開	✓	X