共同作業に役立つFigmaの5つの便利機能

Figmaの基本的な利用方法から実務に役立つTipsまで紹介する本連載。第4回は「共同作業に役立つFigmaの5つの便利機能」について、普段から業務でFigmaを活用している、neccoの阿部文人がご紹介します。

当社はコンサルティング型のデザイン制作会社です。私たちの業務にFigmaは欠かせません。共同編集が快適で、最後の作り込みまで対応できるところに惹かれ、2018年からFigmaを使用しています。

Figmaのユーザーの3分の2は、非デザイナーと言われています。Figmaを使ってさまざまな職種の人が共同作業することで、より良いデザインを作り出していくことができます。

今回は共同作業の際に役立つ、「スポットライト」「コメント」「カーソルチャット」「音声通話」「リンク埋め込み」を紹介していきます。

スポットライト

スポットライトは、共同編集をしている他のメンバーの視点で画面を見たり、他メンバーに対して自分視点の画面を共有できる機能です。

複数人でデザインをしたり、Figmaを使ってミーティングをしたりする際、注目して欲しい場所があっても口頭では伝わりづらいことがあります。その際にスポットライト機能で視点を切り替えると、メンバーが自分と同じ画面を見られるので、伝わりやすくなります。デザインの作成やレビューをするときに便利です。

まずは、他メンバーの視点にする方法を解説します。操作は簡単で、連載第3回でも紹介された画面上部のツールバーの右上に表示されているメンバーのアイコンをクリックします。

• 他のメンバーの視点で画面共有する際は、ツールバー右上のメンバーのアイコンをクリック

すると、そのメンバーの視点で、画面が表示されます。スポットライトを終了するには、再度当該メンバーのアイコンをクリックします。

• 他のメンバーの視点で画面が表示される

次に、自分の視点の画面を他のメンバーに共有する場合について解説します。ツールバーの自分のアイコンにマウスをホバーすると「自分にスポットライトを当てる」というボタンが表示されます。これをクリックすると、メンバー全員に自分の視点(自分の画面)を共有できます。

• 「自分にスポットライトを当てる」ボタンをクリックすると、自分の画面を他メンバーに共有できる

この際、他メンバーの画面には「無視する」というボタンも表示されます。画面共有を受けたくないメンバーは、そのボタンをクリックすることで画面共有を拒否できます。

• 画面共有を受けたくない場合は、「無視する」ボタンをクリックすることで画面共有を拒否できる

コメント

コメントは、デザイン上の任意の箇所を選択してコメントを残せる機能です。ツールバーの「コメントの追加」を選択すると、カーソルが変わります。コメントを付けたい箇所をクリックすると、コメントを書き込むことができます。

コメントを書き込んだら、Windowsの場合はEnterキー/Macの場合はreturnキーを押す、またはコメント内の「送信(矢印のマーク)」を押すとコメントを貼り付けることができます。

• ツールバーの「コメント」を押して、コメントを追加したい箇所をクリック

また、コメントに返信したり、@をつけることで特定のメンバーをメンションすることもできます。

• コメントでは、返信やメンションも可能

コメント機能は、編集権限の有無にかかわらず使用できます。デザインのプロトタイプのURLを共有していれば、社内はもちろん、顧客とのやり取りにも活用できるところが便利です。デザインのプレビューは、Figmaの利用料金にかかわらずに利用できます。

デザインのレビューやフィードバックをするときや、修正箇所を指摘する際などにコメント機能は使えます。なお、解決したコメントは「解決」ボタンをクリックすると、デザイン上に表示されなくなります。

カーソルチャット

カーソルチャットは、マウスカーソル上にテキストを置いてコミュニケーションが取れる機能です。任意の箇所にコメントを貼り付けるコメント機能と異なり、カーソルチャットはマウスカーソルがあるところにテキストを表示させる機能で、時間が経つとテキストが消えてしまいます。

キーボードのスラッシュキー(WindowsとMacのいずれも)を押すとテキストの入力ができます。コメント機能と同様に、編集権限の有無にかかわらずURLのアクセス権があれば誰でも使用できます。

• /(スラッシュキー)を押すと、カーソルチャットを開始できる

同じデザインを複数のメンバーで見ているときに、電話やSlackなどの他のコミュニケーションツールを使わなくても、カーソルチャットを使うことで気軽に相談ができます。「ここのデザイン良いね」などの、ちょっとしたコミュニケーションで使用してもいいでしょう。

また、オフィスで他のメンバーが会話をしていて、自分たちも会話すると話が重なって聞き取りづらくなってしまう場合にも活用できます。気軽に使えるので使用頻度の高い機能です。

一方で、一定時間が経つとテキストが消えてしまうため、顧客とのやり取りや、後で確認が必要な重要なメッセージを残す際には不向きです。その場合は、コメント機能や他のコミュニケーションツールを使うといいでしょう。

音声通話

音声通話は、共同編集をしているメンバーと音声で会話ができる機能です。他のコミュニケーションツールを立ち上げなくても、デザインの画面を見ながら会話でのやり取りができます。

上部のツールバーにあるヘッドホンマークを押すと、通話が開始されます。音声通話は、特定のメンバーに電話をかける機能ではないため、音声通話をしたいメンバーがそれぞれ「参加」ボタンをクリックする必要があります。

任意のメンバーが通話を開始すると、そのほかのメンバーの画面には、ヘッドホンマークの横に「参加」というボタンが表示されます。通話に参加する場合は「参加」をクリックします。

• ヘッドホンマークをクリックすると通話が開始される

複雑な機能の説明をする場合や、カーソルチャットやコメントでは説明が不足する場合などに音声通話を使用すると便利です。

カーソルチャットやSlackなどのコミュニケーションツールで、「通話しながらFigmaでデザインを見ていきましょう」と、事前にやり取りをしてから音声通話を開始するとスムーズに利用できるでしょう。

リンク埋め込み

リンク埋め込みは、Figmaのデザイン上のテキストにリンクを埋め込める機能です。URLを挿入したいテキストをドラッグし、ツールバーのリンクマークをクリックすると表示される黒いボックスにURLを入力します。

• ヘッドホンマークをクリックすると通話が開始される

デザインの参考サイトや素材を、他のメンバーに共有する際にリンク埋め込みを使用することが多いです。共同作業に参加しているメンバーが検索せずとも、URLを直接クリックするだけで参考サイトなどを見ることができるので作業が効率的になります。

上の画像のように、作成しているデザインの外側で、メモのようにして活用すると良いでしょう。