レイアウトの情報の見方
flexboxの場合のレイアウトや、マージンやパディングの値はFrameのレイヤーを選択することによって確認できます。(デザインでAuto Layoutという機能が使われていることが前提となります。)
左のようにグラフィカルに確認することもできますし、よりコードのような情報もLayoutセクション内から確認・コピペすることができます。
テキストについて
次にテキストですが、テキストのレイヤーを選択すると、テキスト関連のプロパティやテキストの値を確認できます。
ちなみにですが、右ウィンドウの情報はホバーするとコピペすることができます。
また、今回はCSSで表示していますが、こちらはSwiftUIやJetpack Composeのものに書き換えることができます。
また、CSSではpxではなくremで書きたい時は、Codeセクションから変更することができます。
「Set unit scale……」を選択するとremのベースとなるフォントサイズを指定することができます。これはConfig以降追加された機能で、一々計算する必要もなく便利です。
画像の書き出し
画像の書き出しも右ウィンドウからです。選択したフレーム内にある画像たちがAssetsのセクションに表示されています。
また、Figma本体はWebPなどのフォーマットでの出力に対応していないのですが、Dev Modeプラグインである「Figma Exporter」を使えば実現できます。
コンポーネント
コンポーネントとそれをまとめたものであるVariantsに対しても、それ専用の情報を閲覧することができます。これまでと同じようにコンポーネントのレイヤーを選択すると下記のように表示されます。
また、Playgroundで他のプロパティに変えたらどうなるのか、状態ごとの差分も気軽に確認することができます。
