Figmaを使うようになって変わったこと

Figmaを主なデザインツールとして使うようになったのはGaji-LaboでUIデザインを始めたころで、今年の3月でFigmaを使うようになって2年経ちました。
Figmaをデザインで使うことによって、UIデザインの進め方も影響を受けたことがありそうなので簡単に振り返ります。

デザインするときのレイヤー習慣になったこと

• 作業中からレイヤー名をつけるようになった
• 情報構造とレイヤーの階層を近づけるようになった
• グループをあまり使わなくなった

Figmaを使い始めたときに思ったことは Flexbox や文字の扱いがCSSのスタイリングに近い動きをするところがある、でした。
HTML/CSS でコーディングした経験があるので、そう思うとオブジェクトを並べていくときに「この要素はこの塊でまとめる」「これはあの要素の内部の要素に入れる」と構造を一致させてたくなってくる。
その構造的なグルーピングも Group や Frame ではわからないので、ちゃんと名前をつけながらデザインを進めるようになりました。

またFigmaではデザインのデータがそのままハンズオフされるので、レイヤーが Inspect パネル上でこれが何かを伝える情報にしたくなる。
そのような流れでレイヤー名はあまり後回しにせず、作業中からレイヤーができたら名前をつけるようになりました。

レイヤーについてもFigmaのオブジェクトのレイアウト・整列の構造では、グルーピングされた内部の子要素が揃う配置のしやすさからGroup よりも Frame を使うようになりました。
Group は一時的なオブジェクトの移動時に主に使用していて、移動してしまえば解除してすることが多いです。

UIはビジュアル上のデザインじゃなく、情報構造を持つものとしてデザインのデータも作りたい。
FigmaでデザインをするようになってUIデザインの情報としての意味を意識するようになったと思います。

ツールによって習慣化されている

デザインデータのレイヤー名を意識するようになったきっかけは、PhotoshopでWebサイトのデザインをしていた時で画像書き出しに「画像アセット」使うようになったときだったような気がします。
（古のWebデザインあるあるですがデザイン・コーディング両方やっている場合だとレイヤー名はなあなあになりがちでしたよね…。）
スライスではなくレイヤーやグループにアセット名を設定していくのが面白くて、あわせて全体的なデザインデータでのレイヤー名を付けるようになっていきました。 だ逆に、デザイン内容に直接関係のないファイル拡張子やパラメーターがレイヤー名に入るのがちょっと気になるというのもあったりしました。レイヤー名が長いし読みづらい。 こういうことを考えると Photoshop がデザインデータの現場に Zeplin がやってきたのはデザインデータとしても開発も良かった気のではと思いますね。

ツールや機能の特徴的なことから、習慣ができていくようになってきているのがおもしろいです。
Figmaにはデザインも開発もデータを共有することがアプリの思想にあるように思います。だからこそ、デザインのデータとしての情報も大事。
デザインと開発のチームの共有するものとしてFigmaのデザインデータがそれ自体で「共通言語」になる。その点も意識しながら、デザイナーはデザインをリードしていきたいですね。

Gaji-Laboでのデザインツールの使いかたを紹介した記事をまとめました。UIデザインのプロジェクトでどんなふうにツールを活用しているのか、他のデザイナーのやりかたや実際に行っている作業内容などが知りたい方におすすめの内容です。