FigmaでUIデザインをおこし、それを実装する人にハンドオフ(デザインデータを共有する)ときに、どのようなことに気をつけると良いかを書いてみます。多くの方がこの手の「実装者にやさしいデザインデータの作り方」のような記事を書いてくれていると思いますが、この記事ではFigmaに特化した内容となります。 Frame + Auto Layoutで構造的につくる実装を意識したデザインにおいては「構造化」というのは重要なポイントです。下記に並んでいるヘッダーは一見どちらも同じものです。 ですが、Figma上ではそれぞれのつくりが異なります。片方はGroupによって構成されたもの、片方はFrameとAuto Layoutでつくられたものです。 単純に一枚絵をつくるのであればどちらでも良いかもしれないですが、これらをコードへと変換していくことを考えると、後者のように情報の構造がわかりやすいことが重要です
![デザイン仕様が伝わるFigmaのデザインの作り方|Hiroki Tani](https://cdn-ak-scissors.b.st-hatena.com/image/square/fb322bbc93ebcb8b746d2559c8716d70a1333e94/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F124920367%2Frectangle_large_type_2_878aa12cdc26cb0073704c6f7a7b8860.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)