Figma Config 2025で発表された新機能！Figma Sitesの魅力

はじめに

メンバーズルーツカンパニーのデザイナーの林です。

先日、Figmaの年次カンファレンス「Figma Config 2025」が開催され、Figmaの機能アップデートや新機能に関する発表がありました。発表された主な項目は以下の5つです。

• Figma Sites
• Figma Draw
• Figmaのグリッド
• Figma Buzz
• Figma Make

今回は、その中でもFigma Sitesについてご紹介します。

Figma Sitesについて

Figma Sitesは、StudioやWebflowなどのノーコードツールと同様に、コーディング不要でWEBサイトを構築できる機能です。※2025年5月現在、ベータ版として使用可能です。

Figma Sitesの特徴

• CMS機能を内蔵

CMS機能が公開予定ですが、現時点では未公開です。※2025年5月現在、未公開。

• デザインデータを元にした迅速なサイト構築

Figma Sitesでは、Figmaで作成したデザインデータを元にページ制作が行えます。作成したコンポーネントやローカルコンポーネントをライブラリとして公開することで、デザインデータの変更がFigma Sitesに自動的に反映され、迅速かつ統一感のあるWebページ制作が可能になります。

• デフォルトのアニメーション設定

ボタンのホバーアニメーションなどは、インタラクション設定のホバーエフェクトを設定するだけで可能です。アニメーション機能もデフォルトで利用できます。

• カスタムコードと動的データの埋め込み

headタグ内やbodyタグ内にコードを埋め込むことが可能で、動画データの埋め込みも行えます。

デザインデータとのライブラリの連携

Figma Sitesでスムーズにページ制作を進めるためのポイントをご紹介します。実際のFigma Sitesの画面を使って説明します。

Figmaでデザインしたコンポーネントやローカルスタイルをライブラリ化することで、ページ制作が効率的に行えます。まず、Figmaのデザインファイルでライブラリを公開します。これにより、デザインファイルで作成したコンポーネントやローカルスタイルをFigma Sitesでも使用できるようになります。

次に、Figma Sitesの画面に移り、ライブラリの管理から公開したライブラリをファイルに追加します。ライブラリの追加を行うことで、デザインデータの更新がFigma Sitesに反映され、最新の情報を常に保つことができます。

コンポーネントはデザインデータで設定したプロパティ情報も反映されるため、デザイン制作時と同じ手順でページ制作が可能です。

ノーコードツール（Studio）との比較

ここまでFigma Sitesについて説明してきましたが、機能として近しいノーコードWeb制作プラットフォームとの比較をしてみます。今回は、Figmaのデザインデータを活用してノーコードでWebサイトの制作が可能なStudioと比較しました。
※Figma Sitesは、現時点で発表されている内容に基づいています。

機能面では、Figma SitesはCMSが未実装であり、外部ツールとの連携についても現時点では明記されていません。そのため、運用を想定したサイト実装においては、Studioの方が汎用性が高いと考えられます。

LPやポートフォリオサイトなど、1ページで完結するページを作成する際には、スピード感の観点からFigma Sitesは相性が良いツールです。ただし、今後機能がアップデートされることが予想されるため、その際には改めて紹介したいと思います。

さいごに

Figma Sitesを実際に使用して感じたのは、デザインデータで定義したコンポーネントを活用してページ制作ができる点が非常に使いやすいということです。新たに実装用のパーツを定義する必要がなく、デザインで制作したパーツをそのまま使用できるため、デザインとページの統一性が保たれ、より迅速かつ簡単にWebサイトの実装が可能になってくると感じています。

関連サービス

弊社では本記事のようなノーコードを活用したソリューションを提供しております。もしご興味ありましたらご覧くださいませ。