デザインからコードへ ──デザインのデータの見方を覚えてコーディングしてみよう！
デザインに貢献できる開発者になろう！ Figmaを通じたデザインの始め方 第2回
レイアウトの情報の見方
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で他のプロパティに変えたらどうなるのか、状態ごとの差分も気軽に確認することができます。
この記事は参考になりましたか？
- デザインに貢献できる開発者になろう！ Figmaを通じたデザインの始め方連載記事一覧
-
- プログラミングでFigmaを操作しよう！ —デザインにまつわる仕事を自動化する方法
- Figmaの新機能「Variables」とは？──デザインとコードの同期に大活躍の機能を解...
- デザインからコードへ ──デザインのデータの見方を覚えてコーディングしてみよう！
- この記事の著者
-
seya（セヤ）
Figma に詳しいフロントエンドエンジニア。NY州立大学 Stony Brook Computer Science 科卒業後、ソフトウェアエンジニアとして働き始める。フロントエンドエンジニアとして働く傍ら、エンジニアにとってもあらゆるメリットを持つ Figma に魅せられ、エンジニア目線でデザインプロセスの改善やデザインからコードへの自動化などを手がける。＜Figma 公式グローバルカンファレンス「Figma Config 2022」登壇。Comm...
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
