デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス

デザインシステムを効果的に運用することで、・アプリのUIの品質担保（ヴィジュアルの統一感や一貫した操作性の実現）・エンジニアやデザイナーにとってより効率的な環境の構築。といった強力な恩恵を受けることができます。これらは特に大規模サービスやスケールの過程にあるサービスにおいては非常に重要な関心事です。効果的なシステムの構築のためにはデザイナーとエンジニアが同じ目線に立って緊密に協力する必要がありますが、「デザインシステム」自体が比較的新しい概念であり、加えて日々ツールが進化の過程にあることもあり、開発からデザインまでを一貫した具体的な手法については悩む場面が多々あります。このセッションでは、Yahoo! JAPANアプリを例に開発とデザインを一貫した体系的な情報から「Figma」と「Compose」においての具体的なベストプラクティスについてお話します。【具体的には以下の内容をお話します】 ■ 改めて、デザインシステムを構築する目的と効果。 ■ エンジニアとデザイナーの目線を揃えたチームの構築。 - デザイナーとエンジニアでの関心の範囲や考え方の差異。 - デザイナーとエンジニアとの連携で発生しがちな課題と乗り越え方 ■ Figmaとアプリ実装の緊密な連携とSSOTを担保するための自動化に関する具体的な手法。 - Figmaのデザイントークン管理機能であるVariableとコードの連携、FigmaのDevModeやGoogleの開発したRelayによるCompose実装コードの生成。 ■ 実装とデザインデータでUIのヴィジュアルにズレを発生させないための注意点と具体的な手法。 - UIの階層構造やプロパティの命名に関してのルール、レスポンシブデザインやテキストスタイルにおいてのComposeとFigmaで対応する設定など。