はい、できます！FigmaにはFigma Sitesという新しいウェブビルダーが登場し、ノーコード環境でウェブサイトをデザインして公開できるようになりました。
Figmaのデザインを活用して、レスポンシブで見栄えのするランディングページやポートフォリオ、社内向けのプロジェクトページなどを作成できます。しかし、リアルタイムのソーシャルプルーフを使って、ページをもっとダイナミックにしたいと思ったことはありませんか？
これからは、InstagramフィードやGoogleクチコミスライダー、TikTokのメンションギャラリーなど、あらゆるEmbedSocialのウィジェットを、Figma Siteに直接埋め込むことができます。
Figma Sitesとは？
Figma Sitesは、Figmaのデザインを開発者の手を借りることなく、ライブで共有可能なウェブページへと変換できる、軽量な公開ツールです。
既存のデザインシステムを使って、マイクロサイトやキャンペーンページ、プレゼンテーションを公開するための手段だと考えてください。さらに埋め込み機能のサポートにより、EmbedSocialのライブウィジェットでページを強化できるようになりました。
Figma SitesにInstagramやGoogleクチコミウィジェットを埋め込む手順
Figma Sitesでサポートされているのはiframeコードのみです。つまり、EmbedSocialウィジェットのiframe埋め込みオプションを使う必要があります。手順は以下の通りです。
ステップ1：ウィジェットのiframeコードをコピーする
- EmbedSocialアカウントにアクセスします。新規ユーザーの方は新しいアカウントを作成してください。
- 「ウィジェット」に移動し、新しいウィジェットを作成するか、埋め込みたいウィジェット（Instagramフィード、Googleクチコミ、TikTokなど）を選択します。
- エディター画面で、左側の設定パネルにある「埋め込み（Embed）」タブをクリックします。
iframeコードをコピーします（JavaScript版は使わないようご注意ください）。
ステップ2：Figma SitesにHTMLブロックを追加する
以下の手順で、Figma Siteにコードを貼り付けます。
- Figma Siteのプロジェクトを開きます。
- 左側のパネルから、➕ボタンをクリックして新しいブロックを追加します。
- ブロックの選択肢から「Embeds」を選びます。
- 次に「URL or HTML」ブロックを選択します。コードを埋め込みたい場所に合わせて、ブロックの位置を調整する必要があります。
- 右側に新しいHTMLパネルが表示されるので、そこに
iframeコードを貼り付けます。
ステップ3：位置を調整して公開する
- 埋め込み後は、ブロックの位置、幅、高さを調整できます。
- ウィジェットはFigma Siteのレイアウト内でライブ表示されるので、プレビューしながら他のコンテンツのスタイルを合わせて整えることができます。
- 「Publish」をクリックすると、変更がライブで反映されます。
こちらが、EmbedSocialのInstagramウィジェットを埋め込んだFigmaサイトのライブ例です。実際の動作をご覧ください。
始めましょう
これで、Figma Siteの中にフル機能のEmbedSocialウィジェットを設置できました。Instagramの UGC、お客様の声、配送可能なウィジェット、リアルタイムのGoogleクチコミなど、どんな内容でも表示できます。静的なデザインを、本物のコンテンツが息づく体験へと変える、シンプルな方法です。
