Figmaで知った実装とデザインの世界、隔絶と歩み寄り

はじめに

筆者は元々フロントエンドエンジニアでしたが、副業中心にここ最近の半年程度でFigmaでUIデザインをする仕事の割合が一気に増えてきました。

昔はインブラウザ手法（コーディングと共に行う）でデザインすることも時折ありましたが、それでもデザインツールを使うことで今までとは全く違う景色が見えてきました。

そしてデザイナーの作業感が見えてきたことで、外側からデザインツールを見ていたときの「なぜデザイナーは◯◯なのか…」という疑問も違った視点で想像できるになりました。

前提

デザインツールはFigmaが登場しますが、他のツールでもある程度共通項はありそうなで補充して読み進めてください。

実装はフロントエンド分野を指します。

実装の強みとFigmaの強み

デザイン作成を目標にする上で、実装とFigmaではそれぞれ強みとしている領域が異なります。実装はどちらかというと精密に調整を行えて、Figmaは幅広く俯瞰して見れるメリットがある印象を受けました。

例えばCSSを書いているときは「これは何pxに調整する？」という思考だったのが、Figmaでは「これは視覚的に何文字分に調整する？」のように変わってきます。

なおかつ実装と比べてビルドやホットリード等の待ち時間がないので、やはり餅は餅屋という意味でデザインツールでデザインを行うべきだと強く感じさせられました。

デザインに優しいコーディングが必要？

巷ではよく「コーディングを考えたデザインをするように」とよく言われますが、元々FE寄りだった自分としては逆の感想を覚えました。それは、「このコーディングはFigmaで翻訳しやすいだろうか？Figmaでも考えやすいデザインか？」ということです。

例えばそれぞれのアイテムを等間隔に整列とき、今まで自分が主導権を握る場合では* + * > margin-top: {n}pxという書き方を好んでいました。

一方Figmaだとオートレイアウトに対応する考えがflex+gapなので、そっちの方が互換性があるという考えに行き着きます。

それからflexを使うよう心がけてみたのですが、上記以外にも「Devtoolsを見ても読みやすい・CSSのコードがHACK的でない」という利点に今更ながら気が付きました。

特段flexが良い/悪いという訳ではなく、また一段階視野が広がったことが良い体験でした。

実装とFigmaのずれ

Figmaはデザインツールとしてかなり使い勝手が良い方ではありつつ、実装の保守性よりはFigmaの方が大分落ちる印象です。

例えば複数の箇所に変更を加える時は少し緊張感がありますし、コンポーネントに状態を増やすときもマウスクリックの力技感を覚えるのでより慎重な気分になります。

また実装で簡単に考えられる表現もちょっとやりづらいです。（transitionとかoutlineとか）

そしてこの体験を通して、なぜデザイナーが静的な部分にピクセルパーフェクトで拘る（そんなに見たことはないですが）のか、動的なUIを放置してエンジニア任せにするのかが分かりました。

なぜならツールが想定していないものは、ツールを弄っていてもそれを気に掛ける思考にはなりづらいからです。例えばVSCodeのマークダウンエディタで稟議書を作るようなものだと思います。

Figmaは中間生成物で実装が完成品とはよく言われますが、それを悲しいながら実感した出来事でした。

想像力が下がった？

真っ白なキャンパスにクリエイティビティを爆発させるイメージを持っていたが、実際にそのイメージは裏切られてより保守的になりました。

前述の通り細部を試行錯誤するには実装の方が有利であり、Figmaでデザインするときはもっと管理のしやすさに慎重になりました。それは実装とは別のメンテナンス性です。

おわりに

デザインエンジニアという職種名が昨今のバズワードですが、その説明に納得はしつつも以前は「エンジニア兼デザイナー」で充分ではないかと思っていました。しかしデザインツールを長時間触ることで、初めてお互いは密接に補完し合える存在なのだと気が付きました。

また実装経験がデザインに良いバックグラウンドだと気づきました。例えばInput Stateやレスポンシブデザインの管理方法はそれらを経験していないとできる自信が無いものでした。

しかしコーディングを全くしないUIデザイナーもそれとは別の違った良い視点があると思うので、これから更に色々な観点を学んでいこうと思います。