デザイナーの白川です。 主にプロダクトのUIをデザインしています。
前回はデザイナー向けに「Figma で実装イメージを効果的に伝えるためのデザインのコツ」という記事を書きました。
developers.play.jp
今回の記事ではエンジニアさん向けにFigmaのデザインを実装で再現するためのポイントをご紹介します。
デザイナーさんにも参考になる内容になっています
私が Figma を使う中で見えてきた課題や知見を活かしたデータの作り方を基にしています。
デザインデータ作成時に意識すべきポイントとして参考になるかと思いますので、前回書いた記事と併せて読んでいただけると嬉しいです。
Figmaのレイヤー構造とプロパティを再現する
Figmaのレイヤー構造は、WebのDOMツリーに似た階層構造を持っています。
- コンテンツ
- コンポーネント
- コンテンツやコンポーネントを包含するフレーム
これらがレイヤーとして階層化されており、すべてのレイヤーにプロパティが設定できます。
ここで大切なのはすべてのレイヤーに設定されたすべてのプロパティには意味があるということです。
画面の見た目だけを頼りに実装すると、デザインとのズレが生じる原因になります。
レイヤーごとのプロパティをきちんと確認し、もれなく実装することが大切です。
各レイヤーを開発モードで確認するとわかりますが、構造が適切でオートレイアウトが設定されたレイヤーであれば、各プラットフォーム(Web、iOS、Android)において見た目上はほぼそのまま利用できるコードが出力されます。
繰り返しになりますが、レイヤーの階層構造とプロパティをもれなく実装すれば、原則としてデザインとのズレは発生しません。
前回の記事では開発モードのコードは過信すべきではないと書きましたが、現在は積極的に活用していくべきだと考えています。
レイヤーを適切に構造化してプロパティとオートレイアウトを設定すれば、多くのケースにおいてデザインとズレのない画面が実装できると判断しました。
画面で使われているコンポーネントを確認する
すべての画面のすべてのレイヤーをひとつひとつチェックするのは大きな手間がかかります。
まずは画面単位で配置されたコンポーネントを確認し、コンポーネントごとに実装を進めます。
メインコンポーネントには基本的にすべての表示パターンが網羅されているはずなので、まずはそれをチェックします。
その後、インスタンスとして配置されている画面を確認して実装を進めます。
理想はFigmaのコンポーネントと実装されるコンポーネントがすべて一致していることですが、Figmaでのデザインの都合上、そうなっていないケースもあります。
Figmaのコンポーネント構成が実装とそぐわない場合は、実装時に分割・結合するか、難しければデザイナーに相談しましょう。
レイアウトの考え方
アプリのUIにおいて、文字や画像以外のオブジェクトは入れ子構造のボックスとして考えるとイメージしやすいです。
Figmaのオブジェクトもまた入れ子構造のボックスで構成されています。
入れ子構造の最下層にある文字や画像以外のオブジェクトには、オートレイアウトによって親ボックスに対して相対的な位置が指定されています。
親ボックスに対して上下はセンター、左右は左寄せといった具合に、位置関係が決定されます。
ここで重要なのがFigmaには外側のマージンを設定するプロパティが存在しないということです。
つまり開発モードで出力されるコードにおいて、オブジェクトの外側にマージンは設定されないというルールを理解しておく必要があります。
Figmaのデザインを正しく実装するためには、次のように間隔を調整します。
以下に、間違った実装と正しい実装の例を示します。
上のGIF画像にもありますが、Figmaの開発モードでも似たような出力になると思います。
HTML
<section> <h3>見出し</h3> <p>本文</p> </section>
❌ 間違った例
h3 + p { margin-top: 8px; }
✅ 正しい例
section { display: flex; flex-direction: column; gap: 8px; }
オートレイアウトを無視する場合
Figmaでは「オートレイアウトを無視」という機能があります。
これを使うと、レイヤーは親要素内にありながら、親要素からのレイアウト指定を受けなくなります。
CSSで言えば、absoluteで要素を固定する時などの挙動を再現できます。
位置は親要素からのx/y座標で指定されます。
レイヤーの幅と高さの指定
オートレイアウトが指定されたレイヤーには、幅と高さに関して3つの指定方法があります：
- 内包 - 中身の値に応じて幅や高さが変わる
- 固定 - 中身に関わらず幅や高さがピクセル値で固定される
- 拡大 - 親要素のサイズを最大値として幅と高さが拡大される
ブラウザやデバイスサイズに合わせてアプリの幅が変わることが一般的なので、最上位レイヤー以外の幅は基本的に固定にはならないと考えて良いと思います。
代わりに最小/最大サイズが指定されているケースがあるので見逃さないようにしましょう。
メインコンポーネントでは、最上位要素を拡大に指定していても開発モードのコード上では固定扱いになっているケースがあります。
インスタンスとして画面に配置された際には拡大になっているので、違和感を感じたらインスタンスも確認してみてください。
高さについての注意点
高さで注意しなければならないのは、2行目以降のテキストをどのように考慮しているのかです。
ケースとしては以下が考えられます。
- 1行で固定、画面幅を超えるような値は想定されないケース（固定文言ボタンなど）
- n行で固定、画面幅を最大幅としてそれ以上の値は行末で省略する
- 行数は固定せず、入力される値をすべて表示する
高さで忘れがちなのが行間の指定です。
余白やサイズの数値は行間によってできる余白も考慮して指定されています。
行間を指定しないと余白がずれてデザインが再現されません。
おわりに
今回ご紹介した内容のほとんどは、私個人が実務を通じて得た経験を基に書いたものです。
Figmaの進化も続いていますので「これがベスト」であるとは限りません。
上記をご理解いただきながら、今回ご紹介した内容がソフトウェアプロダクトの開発に関わる方々のお役に立てましたら幸いです。
