Figma でのデザインのハンズオフのスタイルを研究中です

Figma でデザインを進めている中で、ステークホルダーや開発メンバーともっとうまく共有できないかと試行錯誤しています。 Figma 自体に自由度もあるので、プロジェクトやファイル、ファイル内のページの運用をどうしたらいいんだろうかと毎度試みを変えてみたり。

現在は周りのメンバーと非同期共有をうまく回すために、Figma のハンドオフ・システムを使ってデザインの状況、画面タイトルや説明を表示することを試しています。

Figma Community のファイルに刺激を受ける

今回の試みは、Figma Community の Design Handoff System を活用しています。 フレームグループやグループのタイトルのコンポーネント、デザインの説明になるアノテーションのコンポーネントやメモ、情報設計の遷移図になるものまで入っています。 デザインのステータス関連が充実していて、フレームのタイトルに付けるステータスだけでなく、Figma ファイルのカバーもステータス表示付きで揃っています。

こちらのハンドオフ・システムには、参考にされた Figma File も掲載されています。リンクを辿ってハンドオフやアノテーションにあると良さそうなコンポーネントを見るのも学びになります。

Figma Community を Annotations Handoff で検索すると、他にもたくさんのなファイルがヒットします。 そのままでも活用でき、また効率のよくデザインのドキュメントを Figma で作る際の参考になります。

あったらいいなから始めよう

今は Design Handoff System を大いに活用させていただいています。 そこから Figma でのデザインのドキュメント作成の知見を、実際に進めながら学んでもいるという感じです。

こういう要素やコンポーネントもあると良さそうだな、というのは触っていると見えてきているので、いつか Gaji-Labo スタイルのハンドオフのシステムを作りたいなーと妄想しています。 プレゼンのデックファイルが会社ブランドのデザインであるならば、デザインファイルも会社ブランドのスタイルでありたい。

自分たちや自分たちの価値観にあわせてをカスタムしながら、ハンズオフ、アノテーションのスタイルを見つけて落とし込む。こういう動きもデザイナーとして頑張りたいところです。

Gaji-Laboでのデザインツールの使いかたを紹介した記事をまとめました。UIデザインのプロジェクトでどんなふうにツールを活用しているのか、他のデザイナーのやりかたや実際に行っている作業内容などが知りたい方におすすめの内容です。