Figma Sites CMS機能が登場してたので触ってみた
はじめに
全然気づかなかったのですが、Figma Sites CMSが登場していたので今回は簡単に試してみたいと思います
Figma Sitesの準備
プロジェクトの作成
まずはFigma Sitesにアクセスして、空のプロジェクトを作成します
Card Listの配置
今回は例題として以下のようなカードリストを用いたいと思います
テンプレートとしてあらかじめ用意されている(機能 > Cards Pattern)のでそちらを使用します
使用する画像の生成
本題と少しそれますが、今回使用する画像もFigmaを使って用意しておきます
早くもFigmaではGemini 3 Pro(Nano Banana)を使用して画像を生成することができます
意外と知られていないので軽く紹介していきます
(もしかしたら有料プランでしか使えないかもです...)
画面下のメニューバーからアクション(⌘K)から、画像を作成を選択
モデルをGemini 3 Pro(Nano Banana搭載)を選択
あとは好きなように画像を生成してエクスポートしてください
CMSの準備
コレクションの追加
画面左側のメニューにCMSが追加されてるのでそちらをクリックします
その後コレクションを作成します
今回は新しく作成しましたが、CSVからインポートすることもできるみたいです
フィールドの編集
続いてフィールドを編集していきます
画面右上あたりにフィールドを編集ボタンがあるのでそちらをクリックします
今回は画像をいれたいので、画像フィールドを追加します
データの追加
フィールドの準備までできたので、実際にデータを入れていきます
新規アイテムをクリックすると右側にアイテム編集の画面が出てくるのでそこでデータを入力します
一旦３つほどデータを入れておきます
接続
データまで追加できたら、あらかじめ準備しておいたCard Listと接続していきます
接続タブに移動し、今回はページの一部を選択します
ページのどのエリアと接続するか選択できるようになるので、任意の部分を選択します
今回はCard Listエリアしかないので、そちらを選択します
続いて、フィールドとどの部分を接続させるかを選択していきます
接続が成功するとCMS内のデータを元にCard Listが表示されるはずです
後にCMS側でデータを追加した場合もそれに伴って自動でCardも追加されます
おわりに
画像と文字だけではわかりづらい部分もあると思うので、気になった方はぜひ触ってみて下さい
Discussion