Figma Sitesを使ってデザインをWebに公開

Figmaのコミュニティは何年もの間、デザインを簡単にWebサイトに反映する方法を求めてきました。「ワンクリック」リクエストと強力な機能を組み合わせたツールの作成に着手したのもそのためです。本日リリースされたFigma Sitesを使用すれば、Figmaのワークフローを離れることなく、Webサイトをデザイン、構築、公開することができます。レスポンシブなレイアウト、直感的なプロトタイプツール、カスタムカーソル、マーキー、パララックスエフェクトなどの組み込み機能を使用して、ダイナミックなアイデアを実現しましょう。

Figmaで直接デザインして公開

デザインをプロダクションに落とし込む一般的なプロセスには、コンテキストの切り替えと手作業が必要です。Figmaでデザインし、フローとインタラクションをプロトタイプ化し、手動でブレークポイントを構築し、デザインをエクスポートし、開発者と協力してデザインをコードに変換し、テストして公開する必要があります。Figma Sitesを使用すると、デザインと公開を1カ所で行うことができ、直線的なワークフローがより反復的で流動的なものに進化します。個人のポートフォリオを立ち上げるにしても、イベントサイトを作成するにしても、製品ランディングページを公開するにしても、Figma Sitesなら特別なツールを使わずに、インタラクティブなライブウェブサイトをすべて1か所で構築できます。

出発点を見つける

私たちは、デザインと開発のリソースが限られているチームでも、Figma Sitesを簡単に利用できるようにしたいと考えました。そのため、すぐに始められるように、テンプレート、事前に構築されたレスポンシブWeb要素、既成のインタラクションを含めています。さらに、近日中にFigma Makeが提供するチャットからコードへの新機能が利用可能になります。希望するインタラクションやアニメーションを記述すれば、私たちがそれを構築します。

デザインシステムの連携

デザインライブラリとリソースにアクセスしてより迅速に構築できます。挿入パネルを介して公開済みのライブラリをサイトに直接リンクすると、デザインシステムのコンポーネントやスタイルを追加できるようになります。デザインシステムがない場合は、ナビゲーション、ヒーローセクション、フルページなど一般的に使用されているいくつかのブロックをご利用いただけます。ゼロから始める必要はありません。

レスポンシブに構築する

Figma Sitesにはインタラクションとレスポンシブ機能が直接組み込まれているため、アスペクト比の調整に時間をかけることなく、より表現力豊かな体験の創造に集中できます。

あらゆるデバイスに対応

Figma Sitesは、異なるブレークポイントに対してレイアウト、テキスト、デザインを自動的に適用します。マルチ編集を使用すると、画面サイズ全体で変更をすばやく一括変更できます。テキストスタイルの作成では、バリアブルなしで各ブレークポイントに異なるサイズや間隔を設定できます。デザインはどのデバイスにもシームレスに適合し、より洗練させたい箇所があれば手動で調整することもできます。

迅速なプロトタイプの作成と改良

インタラクティブなライブウェブサイトのプロトタイプを作成し、コラボレーターと共有してフィードバックを集めます。サイトをプレビューすると、HTMLとCSSでレンダリングされたWebベースのプレビューが開き、Figmaプロトタイプで見るように、公開前に完全にレスポンシブなサイトを確認できますが、ウェブサイト特有のインタラクションが含まれています。ウィンドウサイズを変更して、レイアウトのリフローを確認したり、ブレークポイントを切り替えたりできます。

ビジョンを形に

Webは無限のカスタマイゼーションを提供します。私たちは、デザイナーがこの可能性を最大限に活用して、その瞬間に適切な濃厚でインタラクティブな体験を創造できるようFigma Siteを構築しました。

完全なカスタム体験を作成する

本日、Figma Sitesに特有で、Figma Designにはまだ存在しない新しいインタラクションをいくつかリリースします。スクロールパララックス、スクロール変換に加え、インタラクティブコンポーネントを使わずにホバーやプレス状態を作成する機能など、私たちのお気に入りの機能の一部です。

間もなく、デザインをインタラクティブな体験に変えるためのコードレイヤーが追加されます。プラグインやツールの切り替えは不要です。さらに、AIチャットを活用することで、ドラッグ可能なリストや地理的に正確な時計といったインタラクティブな要素を追加できるようになります。1つのフレームをデザインし、そのフレームをどのようにインタラクティブにしたいかを言葉で指示するだけで実現できます。Figma Designのデザインシステムライブラリと同様に、コードレイヤーを再利用可能で共有可能なコンポーネントやインスタンスに変換できます。

スライド1 / 41 / 4

あらかじめ用意されたインタラクションを使えば、デザインに動きを加えることができます。

Figmaのプロトタイプを見るときと同じように、公開前に完全にレスポンシブなサイトを確認できます。

作業を始めるのに役立つすぐに使用できるブロック。

間もなく、コードレイヤーでデザインをインタラクティブな体験に変えられるようになります。

Figma Sitesの実際の動作を見る

このツールの可能性をもっと広く知っていただくために、インタラクティブな要素や細部へのこだわりを体感できる2つの新しいサイトをご紹介します。ぜひ活用の参考にしてみてください。

Config.new: 機能性とインタラクティブ性の調和

毎年、私たちはConfigで発表した内容を共有しています。今回はFigma Sitesの発表にインスピレーションを受け、よりインタラクティブでストーリー性のある体験を構築することを目標にしました。私たちのブランドスタジオチームは、コンテンツ、トーン、レイアウトを同時に検討しながらインスピレーションや初期のスケッチを集めることで、プロジェクトを開始しました。ブレインストーミングを行った後、チームはデザインコンポーネントを直接Figma Sitesに取り込み、迅速にイテレーションを行いました。

Config 2025のWebエクスペリエンスから文字やボタンのスタイルを取り入れたものの、figma.comでは実現できない、より表現力の豊かなページを作成するためにFigmaウェブシステムの使用は断念しました。Figmaのウェブコンポーネントに依存する代わりに、各機能に特化したセクションをデザインし、カスタムボタンやインタラクションを作成し、既成のインタラクションを取り入れて、コードなしで実現できる範囲を示しました。

インタラクティブな要素

このサイトは、全体的に既成のインタラクションを活用しています。リビール、スクロールパララックス、スクロール変換は、ページを上下に移動するユーザーに洗練さを提供し、マーキーはさまざまなFigma Makeプロンプトを示す水平セクションに動きをもたらします。

モーション

チームは埋め込みブロックを使用して、Configモーションライブラリからカーソルを合わせるとアニメーションが再生されるカスタムRiveアセットを追加しました。ホバー時にはCTAのテキストにも動きが加わり、クリエイティブなエネルギーを演出します。さらに、この動きはConfigのウェブ表現とも視覚的につながっています。

カスタムカーソル

ユーザーがプル引用符にカーソルを合わせると、カーソルが一連のConfig字形に変わります。カスタムカーソルをサイトの特定の部分に制限することで、チームは特定のエリアに注意を集中させます。

これらの詳細により、モーション、マイクロインタラクション、あらゆるサイズのビューポート全体を使用して、機能の価値提案を適度に補完するレスポンシブな公開サイトが完成しました。

タイプ標本: 表現の限界に挑戦する

私たちはクリエイティブエージェンシーOther Meansと提携し、クラフトとデザインに関する『Practice』という本を制作し、おみやげの一部としてConfigの参加者に提供しました。出版のために、Other MeansチームはKia Tasbihgou氏と協働し、各記事のドロップキャップをデザインしました。完全な文字セットを紹介するために、Other Meansは、すべての文字を閲覧し、Open Type Font (OTF)をダウンロードしたりできる楽しく表現力豊かな標本サイトをデザインしました。チームは最初にAからZの文字をFigmaデザインファイルに取り込み、その後、各ドロップキャップでストーリーを伝える方法について取り組み始めました。彼らは、ひとつひとつ丁寧に作られた文字を驚きの方法で見せる体験を実現し、Figma Sitesのインタラクティブな力を最大限に活用しました。

スクロールエフェクト

チームは、サイトの多くの部分がスクロールに応じてインタラクティブになるようにしたいと考え、各セクションに異なる背景パターンを作成しました。これらのパターンは、指定されたレイヤーが閲覧されるときに現れ、ページを下にスクロールするとナビゲーションがフェードインするように設計されています。

既成のインタラクション

組み込みのホバーステート、マウスパララックス、バリアントにより、チームはカーソルを合わせると字形が表示される独自にカスタマイズされたキーボードを作成しました。ドラッグ可能な要素を使用すると、ユーザーはコピーブロックの上にある小石をドラッグしてつかむことができます。

インタラクティブコンポーネント

チームはインタラクティブコンポーネントを使用して、各ドロップキャップを強調表示する有名人名のカルーセルと、ページを下にスクロールすると展開する(文字通りの)スクロールを作成しました。

これらの機能とエフェクトの組み合わせによって字形の変換が実現し、静的な標本が、Figma Sitesならではの動的かつインタラクティブな体験へと向上します。

私たちはFigmaをブラウザで構築しました。それは、Webベースのツールだけが提供できるコラボレーション、透明性、アクセスを信じているからです。個人のポートフォリオを立ち上げるにしても、迅速なフィードバックを得るためにプロトタイプを作成するにしても、表現の幅を広げるにしても、Figma Sitesならデザイン、構築、公開をエンドツーエンドで効率化できます。皆さんが作るものを見るのを楽しみにしています。

Figma Sitesを構築する上でコミュニティからのフィードバックを得るために、Discordサーバーを開設しました。こちらから会話にご参加ください。