レイアウトやデザインを作る基本的な要素
Framerにはレイアウトを構成するボックスとなるような基本的な要素があります。Frame、Stack、Gridです。デザインの構造を組み立てるうえで重要な役割を果たします。HTMLでいうdivのようなものです。
Frame（フレーム）
Frameは中に配置した子要素が自由配置（絶対配置）となるボックスです。子要素は上下左右の辺からの距離で位置が決まります。レスポンシブ実装をする時、親要素のサイズに応じて柔軟に配置したい場合に苦労することがあります。基本的には次で説明するStackやGridでの実装になるかと思われます。
Stack（スタック）
スタックはフレックスボックスに基づいた動作をします。Figmaで言うオートレイアウトです。子要素は自動的に縦並びと横並びにレイアウトできます。ギャップやパディングの設定も可能です。
中の子要素はposition: relative(相対配置)として配置されます。Sticky（追従）やAbsolute（絶対配置）、Fixedの設定も可能です。
特徴としては子要素がColumns（縦並び・カラム）とRows（横並び・ロー）のどちらかの振る舞いをします。
Columns（縦並び・カラム）
Rows（横並び・ロー）
Grid（グリッド）
グリッドはCSS Grid Layoutに基づいた動作をします。行と列を定義し、その中に子要素を配置する仕組みです。列（カラム）と行（ロー）の数を指定し、子要素がその中でどのくらいの幅になるか指定します。ウィンドウが小さくなってもレイアウトは変わらないので、工夫次第で複雑なレイアウトが可能になったり、レスポンシブ実装が楽に場合もあります。
各ボックスの追加方法
画面上部のツールバーより追加できます。もしくは、ショーカットキーを使えばFigmaのようにすぐにキャンバスに追加できます。
フレーム（Frame）→
Fロー（Rows）→
Shift + Rカラム（Columns）→
Shift + Cグリッド（Grid）→
Shift + G
←