デザインデータをSketchからFigmaにお引越ししようもあわせてドウゾ・・・ノゾエ(@conoito)です。今年3月頃に、SketchからFigmaに、UIまわりのデータの移行を行いました。約半年が経った9月現在、特に大きな問題もなく快適に本運用を行なうことができています。今日は、Figmaに移行してから行なった、コンポーネントの整備からスタイルの最適化、さらには、最適化したデザインシステムをアプリに適用するまでを、もりっとお話します。ハードルの高さは、自分でいかようにも設定できます。終わるイメージが持てるところでラインを引くのが良さそうです。一部ある(カラーのみ)今あるみてねの状況として、ベースはだいたいあるっぽい雰囲気だったので(メンバーのたゆみない努力のおかげ!!!)、そのベースを活かしながら、より最適化していくのがよさそうかも〜という感じです。まで、実際にやったことを3ステップでご紹介します。Pageを分けた他社のデザインシステムを参考にしたところ、コンポーネントの役割ごとにページを分けるようなつくりをしているところが多かったため、そのような設計になっている感じです。)左のカラムを見ると分かるように、役割ごとにページが別れています。崩れをなおしたさっそく新しいUIを作ろうとした際に、使い回せるよう機能させないといけない(崩れていたら使い回せない、使えない)ので、チームライブラリに入るコンポーネントに関しては、かなり早い段階で崩れを解消する必要がありました。(番外編)この段階で、一部コンポーネントのつくりを見直してみたりもしました難易度:★★★★☆(リサーチ多め、相談も多めなので難易度高いです)具体的にやった内容としては、ボタンの定義の改善です。他社リサーチを徹底的に行なってから自プロダクトに落とし込むので結構大変です。(でも自慢したいくらい良きルールが生まれたので番外編として取り組みをご紹介。)そもそもすでにボタンのコンポーネントは存在していたのですが、現在使っているボタンをまた使いまわせるように集合させたものでした。(もちろん、そのままでもコンポーネントとして十分な役割を果たしていましたが!)今回、チームライブラリを使いはじめていくにあたって、他社のデザインシステムにもほぼ必ず含まれている「ボタン」のパーツから、少しつくりを見直してみようか?という話が上がり、尋常じゃない量の他社のサービスのガイドラインを参考にし作成されました🐶(超豪華特典付録を参照ください)状態・形状・サイズを基準に定義し、汎用性の高い美しいボタンルール爆誕!!!!!(鼻高々)ちなみに、チームライブラリを更新した場合のレビューのやり方ですが、Slack上でFigmaのリンクと共に関係各所にレビューを依頼する形を取っています。LGTMをもらえたら、変更を行った本人が、変更の内容を明記し自分でPublishします。これで「いつの間にかコンポーネントが勝手に変わってたしここってちょっとおかしくない?」は防げます。スタイル内にアイコンを定義したなぜコンポーネントではなくスタイル内かというと、OSをまたいでも統一感を持たせられるように、iOS・Androidで同じものを使いたかったからです。色数を精査した純粋に「色多くね?ていうかこの色使ってなくね?削れるくね?」となったからです。こちらも、色の名前や色の数、分け方などは、各他社のつよつよプロダクトのデザインシステムを参考にしながら、色の変更・統一を行いました。iOS、Android共通です。(課題解決プロジェクトに便乗し)エンジニアさんと協力したちょうどその頃、チーム内で、エンジニアさん主導で課題解決プロジェクトという取り組みを行っていました。(なんて素晴らしいタイミングなんだ。手に負える現実的な目標を定めたやりたいこと(タイポグラフィやスペーシングなど)はたくさんありましたが、そもそもデザイナー側で提案の用意ができていないものがあったりなど、ややハードル高め。そこで、すでにデザイナー側である程度準備ができているもの、そして想像のつく範囲内であるもの(「この範囲ならできるのでは?」感を感じられるもの)として、まずは色から適用していくことにしました。(デザインシステムまわり、欲張って全部やろうとすると、結局何も進まなかった...となりがちな気がします。緊急性が少ないからですかね。後回しになっちゃうんでしょうね。相談・共有・レビューの場を隔週で設け、徐々にプロダクトに反映させていったiOSとAndroidの要素をとにかく共通にしたかった(OSごとで場合分けをしたくなかった)ので、こちら側の意図を伝えつつ、iOSにおいて違和感がないか?とか、Androidにおいて違和感がないか?とか、意見を聴きながら進める必要がありました。隔週で報告の場を設けたことで、後回し事件もかなり防げたのかもと思います。進め方は、こちらで定義した新しい色の適応ができたものから、順次DeployGateで配信してもらい、デザイナー側で実機で確認したのち、本番に反映、という流れで行いました。おわりに最適化までの作業は以上になります。リサーチ量多め、協力者多め、ゆえにレベル高めのセレクションでした。巻末に、参考にされた事例や記事のリンクをまとめた超豪華付録もついているので是非ともご活用ください。タニヒロキさん)https://speakerdeck.com/cyberagentdevelopers/design-engineeringダウンロード#UI#UIデザイン#スタイル#figma#デザインシステム#デザインツール#コンポーネント#チームライブラリこの記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。https://twitter.com/conoitoサポートをする「スキ」を押してクリエイターを応援しよう!わたしもすきです78ノゾエユカリおそらくデザイナーです。