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デザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Imanishi Emi

UIデザイングループリード。
制作会社でプロモーションサイトや広告のデザイン制作、受託開発会社にてサービスのUIデザインを経験し、Gaji-Laboに参加。ユーザーが使いやすいインターフェースデザインづくりと、フロントエンドで実現するUIデザインの橋渡しについて考えます。
実際にインターフェースを試したりフィクションの世界のUIにヒントをえたりしながら、心地よく使えるデザインを考えるのが好き。