🐴

Framer + RemixでWebサイトをつくる #6 - Stackに子要素を差し込む

2021/12/19に公開

Figma

引き続き開催しているもくもく会「Kamakura MokMok Hack」のサイトをFramer + Remixでつくっていきます。
サイトの要件などに興味ある方は1日目の記事をご覧ください。

6日目 - Stackに子要素を差し込む

やっと6日目ですが書いているのは12/19です。13日のビハインド… アドベントカレンダー的には残り6日。いや、無理だろこれ…。といっても別に25日分埋めることが目的ではないので粛々と書いていきます。はやくRemix触りたい…。

会の目的をつくる

というわけで、前回HeadingとBodyのセクションのセットに「会の目的」のテキストを流し込み、ついでにTextの調整とStackでレイアウトの調整を行いました。今回は「会の雰囲気」のセクションをに追加していきます。

# この会の雰囲気とやってること

もくもく会としていますが、OMO（オンライン・オフライン両方ありな）もくもく会の開催や時々ビアバッシュなどのMeetupの開催もあります。

リアル（オフライン）もくもく会は疫病・災害がなければ鎌倉で開催しています。
リアル開催の時はランチを鎌倉の地元向けや観光客向けのお店へ行ける人でいくおまけもあります。
鎌倉ランチ・鎌倉観光ついでに都内から参加される方もいます。

というわけで、見出しと本文という構成は前回作成した「会の目的」と同じですので流用します。

前回までにつくった「会の目的」

追加ー🥳

Sectionの親をStackにする

ただSection（Stack）をコピーしてテキストを入れ替えただけだと「会の目的」とかぶるので意図的に「会の雰囲気」のPosition Topを「会の目的」の下に来る様に指定しています。

しかし、これだとセクションが増えたり、何か他のデザインオブジェクトが増える度にPosition Topを変更せねばなりません。そこで二つのSection（Stack）をラップする親Stackを作ります。

親をStackにする方法

親をStackにする場合は次の方法でラップすることができます。

Stackの子要素にしたいもの（FrameやStack、Text）をFramerの左パネルにあるLayersから選択します。
- 今回の場合は二つのSectionを選択
選択状態のまま Control + マウスクリック でオプションメニューを表示させます。
オプションメニュー下部にある「Add Stack」を選択。

ちなみにこれと同じ方法で「Add Frame」にすると親をFrameでラップすることもできます。
また逆にStackでラップした後にやっぱりやめたい場合は「Remove Stacks」にすると解除されます。

Sectionの親のStackを使ってレイアウトを調整する

前回の記事同様に親のSectionでレイアウトを調整します。

今回はSectionとSectionの間を40pxのスペースを追加したいので Gap: 40px と設定しました。

Stackで並び替えを試してみる

Stack内の子要素の並びはFramerの左パネルにあるLayersの順番で変更することができます。

Stackの要素に他のものを差し込む

Stack内の子要素は後からでも追加できます。試しに区切り線をつくって追加してみます。
まずは適当なところに区切り線（Separation）をFrameで作ります。

Layersの方をみると先ほどつくったSectionの親のStackと同じ階層にあるのでStackによる配置の影響を受けていません。というわけで、Stackの中のSectionの間に区切り線（Separation）を入れてみます。

という感じで、FramerでのレイアウトはStackを使いこなすことによって、規則性や差し込みなどの対応も簡単にできるようになります。ちなみにこれはFigmaのAuto Layoutと同じなので特別目新しい機能ではないです。が、Auto Layoutという名前に比べてStack（積む）という方が意味が通りやすいので個人的にはこういう細かいところがFramerは親切であり、よりFramer自体のUIデザインは考えられてつくられているなーと思います。

そんなわけでここまででおおよそのレイアウトやスタイルの調整はやったので、次回は他の画面をつくり画面遷移の話をしたいと思います。