AIを使って画面をデザインしていると、思った場所とは違う部分が変更されてしまうことがあります。
「このボタンを少し小さくして」と頼んだのに、隣の文字まで変わってしまう。「左側が窮屈に見える」と伝えたら、なぜか上の部分が調整される。そんな、少しもどかしいやり取りを経験した人もいるでしょう。
Figmaは、AIを使ってWebサイトやアプリの画面を作れる「Figma Make」に、プロパティパネルとキャンバス上のコメント機能を追加しました。
新しいプロパティパネルでは、画面上の文字やボタン、画像などを直接選び、大きさや色、余白、配置を調整できます。細かな変更のたびに、長い文章で指示を出す必要はありません。普段のデザインツールに近い感覚で操作できます。
言葉だけでは説明しにくい場合は、直してほしい場所の近くにコメントを残せます。
たとえば、画像を囲んで「もう少し自然な雰囲気に」、情報が集まっている部分に「ここは少し見づらい」と書き込む使い方です。Figma Makeはコメントの内容だけでなく、書かれた場所も手がかりにして、どの部分を変更すればよいか判断します。
デザインを誰かと一緒に確認するときの感覚に近いでしょう。「2画面目の左にある青いボタン」と細かく説明する代わりに、「ここです」と指し示せるようになります。
デザインに詳しくない人にとっても使いやすくなりそうです。プロダクト担当者やエンジニアが、レイヤーやコンポーネントといった専門用語を知らなくても、気になる場所を選んで希望を伝えられます。
スマートフォン、タブレット、パソコンの画面サイズに切り替えながら、表示を確認することも可能です。実際のコードを使っているチームでは、動作中の画面から要素を選び、パネルやコメント、チャットを通じて変更を依頼できます。
もちろん、ツールが人間と同じようにデザインの良し悪しを判断できるわけではなく、思いどおりに直らないこともあります。それでも、「何を変えるか」だけでなく「どこを変えるか」まで明確に伝えられるようになったことは、実用面で大きな変化といえそうです。
