Framer + RemixでWebサイトをつくる #11 - 再利用可能性のあるものをコンポーネントにまとめる（後編）
引き続き開催しているもくもく会「Kamakura MokMok Hack」のサイトをFramer + Remixでつくっていきます。サイトの要件などに興味ある方は1日目の記事をご覧ください。
11日目 - コンポーネントにまとめる （後編）
前回まででSmart Componentsの作成と変数の設定まで説明しました。
今回は表示上の状態と任意のオブジェクトを作成したSmart Componentsに差し替える話です。
表示上の状態
表示するオブジェクトには場合によっては「状態」が存在します。「Hover」や「Pressed」などのマウスイベントもそのうちの一つですし、コンテンツや値の内容によって表示・非表示の切り替えもです。それらを表現・定義するのにFigmaではVarianatsがありますが、もちろんFramerにもVariantsはあります。
Framerの場合はオブジェクトをSmart Componentsにすると次の様にVariantsを設定できるようになります。
Framerの場合はVariantsの設定はGUIとしてわかりやすくなっています。親切ですね。
- Hover/Pressed設定したければ下の「➕Hover/Pressed」ボタンをクリック
- 表示上の状態を設定したければ右の「➕Variant」ボタンをクリック
NavItem（Component） のVarinatsを設定してみました。
（注）NavItemは背景色がなく編集しにくいので一時的に色をつけています
尚、Variantsの「No-icon」はアイコンなしの状態にするには、Icon(Stack)のVisible: Falseにします。また、共通する部分のデザインなど編集するには「Primary」に編集を加えると全ての「Instance」に反映されます。
任意のオブジェクトをSmart Componentsに差し替え
というわけで、Smart Componentsで表示の状態も定義できました。一通り作成できたのでナビゲーションメニューの「イベント」も**NavItem(Smart Components)**に差し替えます。
差し替えるには、Layersから「イベント」のStackを選び右クリック（Option + クリック）でオプションメニューから Replace With... > Project から「NavItem」を選択することで差し替えられます。
差し替えるとラベルがデフォルト値になってしまうので 右のコンパネにある Label プロパティに「イベント」と入力することで変更できます。
試しにアイコンなしの状態に変更してみます。さきほどVariantsで「No-icon(Variants)」を追加しておいたので右のコンパネの Variants から No-icon を選択することで変更できます。
また、画面遷移も「イベント(Screen)」に変更する必要があります。こちらもこれまで同様に右のコンパネにある Interaction の onTap を変更して設定します。
ここまでFramerのGUI上だけで色々作ってきました。さきほども少し触れましたが、FramerはReact.js（TypeScript）ベースで作られています。次回はTypeScriptのコードを記述することでイベントにさらに詳細な表現や状態管理ができることを紹介したいと思います。
Discussion