ここまで、UN HAMBURの複数ページを作成し、最後にプロトタイプを設定して、実際のWebサイトのようにページ間を移動できるようにしました。
Figmaでの制作では、デザインを完成させるだけでなく、制作したデータを他の人に共有し、確認してもらうところまでが大切な作業です。
実際のWeb制作でも、クライアントへのデザイン確認や、制作メンバーとの情報共有、納品時のデータ共有などでFigmaの共有機能を使用することがあります。
今回は、完成したUN HAMBURを共有し、相手にデザインやプロトタイプを確認してもらう方法を確認します。
1. Figmaファイルを共有しよう
Figma画面右上にある 「共有」 から、作成したファイルを他の人と共有できます。
共有するときは、相手がデザインを確認するだけなのか、デザインを編集する必要があるのかを確認して、適切な権限を設定します。
クライアントなどにデザインを確認してもらう場合は、誤って内容を変更されないよう、基本的には閲覧できる状態で共有すると安心です。
一方、制作メンバーと共同作業を行う場合は、必要に応じて編集できる状態で共有します。編集許可にしておくと、相手が開く際にこちらの許可が必要です。
今回はアクセス可能なユーザーは、ユーザー全員を設定しておきましょう。
2. 編集画面の状態で共有リンクを送ろう
共有設定を確認したら、リンクをコピーして相手に送ります。
右上のリンクをコピーをクリックします。
送る相手は、例えば、
といった場面で利用できます。
リンクを送る前に、別のブラウザやプライベートウィンドウなどで開き、相手側から正しく閲覧できるか確認しておくと安心です。
3. プレビュー状態も確認してもらおう
UN HAMBURでは、HOME MENU STAFF ACCESS BLOG などにプロトタイプを設定しました。デザインだけでなく、実際にボタンやナビゲーションをクリックして、ページ間の移動も確認してもらいましょう。
共有には、デザインの時と、プロトタイプの時の共有では、異なります。共有ボタン横のプレビューアイコンをクリックし、プレビューが表示した状態で、プロトタイプを共有ボタンを選択します。リンクをコピーをクリックしてURLを取得します。
プロトタイプを見てもらうことで、静止した画面だけでは分かりにくいサイト全体の流れやユーザーの動線も共有できます。
4. コメント機能を使って確認・修正しよう
Figmaでは、デザイン上の気になる場所にコメントを付けて、修正内容をやり取りすることもできます。
「この写真を変更したい」
「ボタンをもう少し大きくしたい」
「この文章を修正したい」
など、修正したい場所に直接コメントを残せるため、メールなどで「上から3番目の画像を……」と説明するよりも分かりやすくなります。
コメントを確認して修正し、対応が終わったものは解決済みにして整理していきましょう。
5. 納品前に確認しよう
実際の仕事では、Figmaの共有リンクやデザインデータを納品する場合もあります。
納品する前に、共有先や権限が正しいか、不要な下書きや作業途中のフレームが残っていないか、フレーム名やレイヤー名が分かりやすく整理されているかなどを確認しておきましょう。
制作中は自分だけが分かればよい名前でも、共有・納品したあとは他の人が見るデータになります。
これまで学習してきたコンポーネントやフレーム、レイヤーの整理も、納品しやすいデータを作るために役立ちます。
Figma実践のまとめ
今回のFigma実践では、Espresso LaneとUN HAMBURを使って、ワイヤーフレームからデザイン制作、スマートフォン版、コンポーネント、インスタンス、バリアント、複数ページ制作、プロトタイプまで学習しました。
最後に共有まで行うことで、
デザインを作る → 動きを確認する → 相手に共有する → 確認・修正する
という、実際のWeb制作に近い流れを体験できました。
Figmaは、デザインを作るためだけのツールではありません。制作メンバーやクライアントとデザインを共有し、確認しながら制作を進めるためのツールとしても活用できます。
このあとは、Figmaで作成したデザインをもとに、HTML/CSSやWordPressで実際のWebサイトとして形にしていきましょう。