こんにちは、松久です。
食べチョクでは Figma をデザインツールとして使っています。デザイナーが作った Figma のデザインデータを見てエンジニアはHTML/CSS を書いています。このとき、わかりにくいデザインデータを見かけるときがあります。解決の糸口をみつけるために、Figma の使い方を知ろうと取り組んでみた話です。
何から始めるかを決める
新しい技術を学ぶ時は、チュートリアルがあればチュートリアルから始めるのを基本にしています。 Figma のチュートリアルとして、公式のYouTube動画を今回は使いました。このYouTube動画だけでチュートリアルとしては十分な量があります。全部はできませんでしたが、必要に応じて学ぶことができそうです。
Tutorials: Explore design features in Figma - YouTube
私はここから始めて一通りの操作を学ぶことができました。
Figma のようなソフトウェアは、動画で操作しているところを見ることができるため理解がしやすいです。公式の動画なので、Figma が想定している使い方の基本を知ることができるのも安心です。 動画は、英語なのですが、YouTube には自動翻訳機能があるので英語が苦手でも、日本語訳を表示させながら学ぶことができました。
残念なのは、全体像の説明がないので全体のどれぐらいを学んでいるのかはわかりません。学びたいことは、なんとなく思い浮かんでいたのですが、全体像の説明があると、後どれぐらい時間が必要なのか想定ができるのでありがたいです。
UI のトレースをしてどうやってデザインデータを作るか試してみる
操作方法について学んだあとに、いくつかのサイトの UI をトレースしてみました。 トレースの目的は、どんなことに気をつけて UI を作っているのか観察し、トレースすることで、デザインデータをどんなふうにすると良いのか感じ取ることを目的として行いました。
行ってみて、Figma の AutoLayout、コンポーネント、Variants が、マークアップではどんなふうに置き換えられるのか想像しながらデータを作ってみることができたのは大きな体験でした。
YouTube にあるチュートリアルでは、レイヤー名を常につけています。見ているときは「こまめに名前つけてるなあ」と見ていました。トレースをしてみると、名付けがあとになっている自分がいました。そして、あとからつけようとすると面倒くさい…。時々ある「Group 831」という数字のレイヤー名にとても納得しました。
実務のデザインデータを作る
トレースをしたあとに、実務でも UI のデザインデータを作ることになりました。自分が作ったデザインデータでエンジニアがマークアップをするのを見るのは新しい体験でした。
作ってみると、話し合いからデザインデータを作る流れで実装まで一通りのデザイナーの体験をしてみて、見えていなかった作業もわかりました。 例えば、モブデザインの後は、データの整理をしないと使いにくいデータ（例えば、レイヤー名から表示個所がわかりにくい、テキストのサイズが複数混ざっているなど）ができること。margin/padding についてデザイナーが理解していないとデザインデータとして表現できないこと（例えば、レイヤー同士の距離で margin を表現することと AutoLayout で padding を表現すること）を感じました。
おわりに
デザインデータはどうやってできるのか、実務で使ってみることで頭の中で知っていたこと以上のことを感じることができました。情報として知るのではなく、上手くいえないですが、実感のある情報となりました。
今後もいろいろな取り組みで、個々のデザイナーの力をより発揮できる組織になり「食べチョク」の改善に向き合っていきます。
