「デザイン×AI――プロダクトデザイナーが検証するAIの可能性」連載ですが今回でもう5回目。こんにちはこんばんは、小木曽です。
今回は、プロダクトデザインを実装する（コード化する）際、AIによってどのような恩恵を受けれるのか、どのようなパターンやサービスがあるのかを検証したいと思います。
デザインをコード化するプロセス
Figmaなどのデザインツールで作るUIや画面は最終成果物ではなく、実際の製品を模した中間生成物です。ユーザーに利用してもらうサービスやプロダクトを作るうえで、デザインをコード化するプロセスはとても重要です。
通常このステップでは、デザイナーとエンジニアによる綿密な連携が求められます。デザインの意図を正確にコードに反映させるためには、両者の間でのコミュニケーションが不可欠なのです。
しかし近年、技術進歩によってこのプロセスを大幅な効率化が進み、自動化することも可能になってきました。
従来のデザインからコードへの変換プロセスは、デザイナーが作成したモックアップやプロトタイプをもとに、エンジニアが手動でコードを書いていくものです。このプロセスでは、デザインの微細なニュアンスやアニメーションのタイミング、インタラクションの挙動などを正確に再現するため、デザイナーとエンジニアが連携を取りながら進めていかなければなりません。しかし、この方法は時間と労力がかかり、また人的なミスが生じる可能性もあります。
「Design to Code」を体現するFigmaが変えた世界
近年、デザインとコーディングの間のギャップを埋めるツールが数多く登場していますが、なかでも「Design to code」を意識した機能を多く提供しているのがFigmaです。
たとえばデザイン属性や状態を保存しておくことができる機能「Variables」は、Color、Number、Text、Boolean の値に対して名前をつけて管理することができます。また「Dev Mode」は、デザインから開発への移行をスムーズにする機能。デザインファイルのブラウザインスペクターのように、オブジェクトのサイズ、スペック、スタイルなどの詳細を確認することが可能です。
また、iOS、Android はもちろん、 プラグインを使えばTailwind CSSや FlutterなどのUIコードをFigmaで確認したり出力したりすることもできます。従来のデザインツールでも同様の機能を提供していたものの、実用的なものが少なく、出力されたコードに手を加えないと使用できないことがほとんどでした。しかしFigmaはDev ModeやDev Modeにアドオンできるプラグインを使うことで高精度なコードを出力できるようになり、ほぼそのままプロダクションのコードとして使用できるまでに進化しています。
なお、Figmaの Dev Modeの詳細は「Figma の Dev Mode で UI の確認を楽にする」などの記事を参考にしてみてください。
