本記事は、Qiita の 「Figma Tips Advent Calendar 2022」と 「iCARE Dev Advent Calendar 2022」 のアドベントカレンダー 1 日目の記事です。
エンジニアが日々書いているコードも様々な要因でいつの間にか負債になってしまうことがあります。Web デザインにも同じようなことがあり、定期的なリファクタをすることでその影響を小さくする取り組みが必要です。
今回は、大学院の活動の中で行った Figma のデザインデータのリファクタをした時の話をまとめます。
産業技術大学院大学(以下 AIIT)の 2年次 に行う PBL 活動では、Web アプリケーションを開発しています。
11 月中旬、リリース直後の一段落したタイミングのスプリントで、プロダクトコードや Figma でデザインしたプロダクトのデザインデータのリファクタリングをする時間をとりました。
約 2 ヶ月半で溜まったデザイン負債を解消すべく、以下の 2 つのことを意識して取り組みました。
具体的には、デザイン後に実装はしなかったデータを対象として削除したり、似ているけど微妙に違うコンポーネントを統一したりしました。
使われていないデザインが Figma 上に残っていると、視覚的にもノイズになりますし、デザインする人によっては意図しない間違った使い方をしてしまう可能性があるので、大掃除をする効果は高かったと思います。
まずは、Figma 上に点在したレイヤーを、コンポーネントやページ単位で管理するようにしました。
Group や Frame の責務を明確にすることで、一貫したデザインにすることを目的としています。
今回のデザインでは、以下のように責務を定義しました。
一つの Frame に煩雑にまとめられていた Master Component をトークンや Component 単位でまとめました。
その際、タイトルと簡単な Heading を記載するようにして、どこにどんな情報や Component がまとまっているかを探しやすくしました。
プロジェクトが始まった直後は、デザイントークンや Master Component の管理を頑張ろうという熱量が高いのですが、スプリントを繰り返すごとにその熱は、少しずつ動くものを開発したいというエンジニアとしての気持ちが勝り、Figma のメンテを怠っていました。
改めてリファクタする時間を設けることで、Master Component を利用していない箇所を修正することができました。
主に以下の命名規則を見直しました。
Component、Color Effect、Effect Style、Text Style 名は、英字大文字始まりのスラッシュ区切りで統一しています。
レイヤー名は、デフォルトの prefix 付きの名前になるので、ざっくりと位置やどんなレイヤーなのかが分かるような命名をしました。