ノーコードでWebサイトを作れるツールをずっと探していたのですが、FigmaのサービスでFigma Sitesなるものが良さそうだったので思い切ってプロプランを契約。
気になっていた機能を一通り触ってみたのでまとめました。Figma Designの機能と被る部分もあります。
Figma Sitesの概要
Figmaで作ったデザインをそのままWebサイトとして公開できるサービス。公開／非公開の制御、独自ドメイン、headタグの編集、カスタムフォント、favicon設定、JavaScriptのイベントを設定することができ、Webサイトに必要なものが揃ってそうです。デザインもテンプレートから作成できたり、AI生成機能があります。
では、実際に細かい部分を触っていきます。
Figma Sitesの機能レビュー
新規作成
まずは新規作成。まっさらな状態で始めるかテンプレートから作るか選べます。せっかくなのでテンプレートを選びました。
↑ホーム画面にはDesktop、Tablet、Mobileの３つのデザインが表示されていますが、これは３つそれぞれ独立したオブジェクトになっているわけではありません。つまり、例えばBrand Guidelinesのテキストを３つのうち１つを書き換えれば同時に他のデバイスも変わります。
ボタンやテキストのレイアウト
各オブジェクトを選択すると右のサイドバーに幅や色、位置といったCSSで設定できる設定が出てきます。デザインでよく使う設定は大体揃ってそうですが、もしピンポイントで指定したいスタイルがあってもここになければ設定できなさそうです。
ただし、少し手間ですがMakeからReactコンポーネントを作ると独自のパラメータを定義して自由度が高いものが作れます。
ドキュメントを読んでいて便利そうに感じたのが、テキストスタイルの一部を３つのデバイス毎に定義できるところ。
これはHTML的にいうh1やaタグ、pタグのようなテキストの種類をデバイス毎にフォントサイズや行間を調整できるというもののようです。
↑のように、Desktopでは行間を広めに取り、文字も少し大きくしています。TabletとMobileではそれぞれ少し小さく設定できます。
システムチックな振る舞い
Variable（変数）を使うとページを跨いでも共通の値を参照できます。変数の型は文字列、数値、真偽値、色の４つ。
変数を扱えるということで、ボタンをクリックして適当にレイアウトを変更してみようと思ったんですが、ボタンというオブジェクトはありません。Rectangle（長方形）で右メニューからタグをbuttonにすれば良いのでは？と思ったんですがテキスト入力できず、どうも違うようです。
答えはFigma Designの公式ドキュメントにありました。
テキストを作り、フレーム化したオブジェクトに対してレイアウトを加えればボタンの見た目が作れます。加えてアクセシビリティのタグをbuttonにすればHTML的に言うbuttonタグになります。こんな感じ。
ボタンが出来たのでFrameを選択し、右サイドバーのインタラクションタブを選択すると色んな処理が出てきます。なんか色んなことが出来そうでワクワクしますね。
検証した流れを全て説明すると長くなるので、結果のみ書いていきます。
まず、別の画面に遷移するには「リンク」から遷移先のパス（またはhttpから始まるURL）を設定します。するとHTML上はaタグでhrefにパスが設定されますが、この時の挙動は画面を再読み込みせずHistoryAPIで遷移するようです。また、「戻る」はブラウザの履歴に残っていればHistoryを使って再読み込みをせず遷移しますが、外部サイトから遷移してきて「戻る」を実行するとブラウザバックと同じ挙動になります。
「次にスクロール」はテンプレートの挙動を見た感じだとアンカーリンクっぽいです。
「条件つきアクション」はif文形式で処理を分岐する機能。
条件の設定は↓みたいな感じで、Variable（変数）の値かリテラル値しか記述できないっぽくてノーコード系のツールにしては少し使いにくいかもしれません。
処理の部分は下記の３つしか設定できませんでした。変数を動的に変更できるならシステム的にレイアウトを変えることもできるわけですが、ちょっと物足りないかも。ちなみにif文のネストもできないみたいです。
次に「バリアブルを設定」、これは名称の通り前述の変数の値を変更することができます。
これで「ボタンをクリックされたらXXXフラグをtrueにしてdisplay: blockとnoneを切り替えて〜」みたいなことができるはず・・・と思ったら案外そうでもなく。
表示／非表示の切り替え自体はできるんですが、それを変数の真偽値から参照ってのが右サイドバーにありませんでした。いまいちノーコードのセオリーがよくわかりませんね。
そこで、同じく右サイドバーのデザイン→コードを編集をクリックしてコードから切り替えてみます。
元のコードはこちら↓
Makeで作った適当なコンポーネントのコードを読む限り、これに引数を追加して関数コンポーネントの中のPropsで制御することができそうです。↓こんな感じ。
Propsで定義した引数はさっきの非表示アイコンと違い、変数の値を参照できるようなのでこれで実現できました。
ちなみにインタラクションにある「表示する」は初期表示でアニメーションつけて表示したり、スクロールするときに表示させることができるようです。つまりボタンクリックなどのイベント発生時に表示／非表示の制御はできないっぽい。
WebAPIで取得したデータを表示する
コンポーネントがReactならfetchしてデータを動的に取得＆表示できるのでは？とつい考えますよね。
先ほどのコンポーネントのコードにあるfigma:reactのパッケージはnpmとGitHubにも見当たらず、非公開っぽいようです。しかし、コードの補完を見ていくとuseEffectやuseStateが使えるみたいで、↓このような記述でデータ取得自体はできました。
ただし、API側でクロスドメインを許可する必要があります。プレビュー時はFigma内でiframeを使って外部URL（カスタムドメインとも違う）で画面を開くため、プレビューでWebAPIを叩くときはAccess-Control-Allow-Originは*を指定します。URLのドメインの中にUUIDっぽいものが入っていたので*が無難でしょうね。
ちなみにFigmaのデスクトップアプリはElectronで動いており、⌘+⌥+Iでブラウザの開発者コンソールを表示すればクロスドメインのエラーが起きてもログを覗けます。
はい。ということで、ページにボタンやらテキストを設置し、レイアウトを整えて動きのある画面を作れそう、というところまで触ってみました。（少し強引ですが）
料金
プロフェッショナルプランの料金は12ヶ月の年額払いで税込¥31,680。1ヶ月あたりにすると¥2,640とちょっと高いです。
自分はこのSites以外にも使いたい機能があったので加入しましたが、エンジニアでFigmaに課金する人ってどのくらいいるのか気になりますね。最近はAI特化のサブスクに入ってる人が多いと思うので少数派かもしれません。
まとめ
SitesにはCMS機能がもうすぐリリースされるようで大変待ち遠しいです。
おそらく外部APIとデータをやり取りする仕組み、またはFigmaがSaaS的にCMS機能を提供してくれると思ってるんですが、これができると一気に実用的になります。でも、Figma上でCognitoやFirebaseとかと連携する未来はさすがに来ないかな。
今までFigmaをデザインの確認にしか使ってなかったんで、その分覚えることがあってなかなか楽しいです。
ここまで記事を書いてて思ったんですが、こういったGUIのツールって文章で書くより動画で観た方が100倍理解早いんですよね。コードの要素もあったので気づきませんでした。
長くなったので一旦これで終わり。
