Figmaでデザインを確認したり編集する人に教えたい機能のまとめ

はじめに

何となくでも触れてしまうのがデザインツールの良いところですが、何となくでは何だかわからない独自の機能こそ、そのデザインツールの強みだったり注意が必要な大事な部分だったりします。

今回はデザイナーからFigmaを渡された時にエンジニアの皆さんが見る時のポイントから、編集者権限を渡されて簡単な文言の修正なども行うことを想定したポイントを、特に直感的に触るだけでは気が付かないような部分について、下記の順番で触れていきたいと思います。

【実装者向け】デザインを実装するのに必要な情報を確認するのに役立つTIPS

・Dev Modeでデザインに必要な情報を取得する
・取得したいコンポーネントを爆速で選択する
・パーツに設定されているバリアントを確認する
・実装可能なFIXしているカンプを確認する
・コメントをする

【編集者向け】デザインを編集する際に必要なとりあえず押さえておきたいこと

・アートボードを開いた時にアラートダイアログが出てきたら注意！
・突然しらない人の名前がでてきたら…
・ショートカットキーでの操作に慣れる為にチートシートを表示する
・どこにある機能か忘れてしまったら

【実装者向け】デザインを実装するのに必要な情報を確認するのに役立つTIPS

DevModeでデザインに必要な情報を取得する

DevModeとは、開発に必要な詳細を簡単に確認できる機能です。
メニューバー右にある　トグルボタン(</>)を押すとDevModeに切り替わります。

赤線で囲ったボタンを押すと…

トグルが緑色の状態になりました。これがDevModeの状態です。
DevModeの状態で情報を確認したいパーツを選択すると、右サイドバーの「Inspect」タブに、現在選択しているパーツの情報が表示されます。

Icons/arrow_right_24pxというアイコンを選択している状態
「Inspect」タブの中で対象のサイズや色などを確認できます。アイコンの書き出しも「Inspect」タブの中から行うことができます。

取得したいコンポーネントを爆速で選択する

デザインを確認する時、見たいパーツを選択するのに永遠にぽちぽちしてませんか？
⌘を押しながら確認したいパーツをクリックすると、複数のframeの中に入れ子になったものでも見たいパーツを直接選択できます。

パーツに設定されているバリアントを確認する

大抵の場合、カンプとは別の場所にボタンなどのパーツのメインコンポーネント（そのパーツの大元）を作成しているかなと思います。
今見ているカンプに無いボタンや入力フォームのvariantを確認したいときは、↓のスクショの赤線で囲った菱形が集まっているアイコンを押すと、メインコンポーネントに飛べます。

対象のボタンなどのパーツを押しても菱形アイコンが現れない場合があります。その場合はコンポーネント化されていないか、設定されていたパーツのコンポーネントが解除されてしまっている可能性があります。

ちなみにコンポーネントとは作成したパーツをデザイン間で再利用できるように登録を行なったもののことを言います。

今回は「label」というコンポーネントを選択した状態でアイコンを押したので、rabelの親コンポーネントのバリアントの場所まで飛ぶことができました。

他にもスクショにある「openPlayGround」というボタンがDevModeのサイドバーに表示されているのでそちらを押すことで…

赤枠で囲まれたopenPlayGroundボタンを押して下さい

左のサイドバーの項目を変更することでパーツのバリアントを色々確認することができる、compornentPlayGroundというモーダルが表示されます。

compornentPlayGroundモーダル
左サイドバーにある設定はデザイナーが設定したものになるので、もしもこの中に不足しているバリアントがあったらデザイナーに追加してもらって下さい🙇‍♀️

一度にコンポーネントのバリアントを確認する時には前者の方法の方が良いかなと思いますが、何度も別画面に飛ばされるのが面倒だったり、一覧で見なくても良い場合は後者の方法が良いかなと思います。

実装可能なFIXしているカンプを確認する

↓スクショは左サイドバーのPagesセクションなんですが、ページの名前の前に緑色のアイコンがついているものがあるのがお分かりになるでしょうか…

緑色のアイコンがある「カンプ」ページにDevModeで飛ぶと…

左のサイドバーにReady for developmentというセクションが現れ、デザインがFIXし実装可能なカンプがセクションごとに表示されます。

実装faseでも修正が入ってカンプを触ることもあるので、明示的にされていると齟齬なく実装ができてストレスが減るかなと思います。

コメントをする

既にコメントを利用している方は多いかと思いますが、最近のアップデートでコメントに画像を添付したり、絵文字を追加するボタンが実装されました！

左から「絵文字ボタン」「メンションボタン」「画像添付ボタン」です。
画像を添付すると↓のスクショのようにコメント文の下に画像がくっつきます。

【編集者向け】デザインを編集する際に必要なとりあえず押さえておきたいこと

アートボードを開いた時にダイアログが出てきたら注意！

フォントの置換を促すアラートダイアログ

編集者権限をもらった後、Figmaの画面を開いた時に↓のようなダイアログが現れることがあります。

これはカンプで使用されているfontFamilyが自身のPCに入っておらず、編集作業を行えない為、編集を続けるには自身の持っているfontFamilyに置換を行う必要がある場合に表示されます。
このまま自身の持っているfontFamilyに置換を行ってしまうとカンプのfontが全て変更されてしまいますので、基本的に置換は行わずPCにカンプで使用しているfontをいれるのが良いかなと思います。
もしPCにfontが入っているのにFigma上で使用できない…という現象が起きている場合は、デスクトップ版ではなくブラウザ版のFigmaを使用していないか確認してください。
ブラウザ版のFigmaを使用する場合は、Figmaのフォントインストーラーをダウンロードする必要があります。
下記のリンクからダウンロードできるのでお試しください！
https://www.figma.com/ja/downloads/

ほかにも突然しらない人の名前がでてきたら…

スクショのように画面右上に知らない人の名前が出てくることがあるかもしれません

これはファイルにアクセス権限のないユーザーがファイルにアクセスしようとしているときに表示されます。
よくあるのはクライアント企業の事前に依頼されていなかったメールアドレスからの閲覧申請ですが、稀に本当に心当たりのない閲覧申請が届くこともあるので、ディレクターに確認をとるまでは基本的に申請を受け入れることはしない方が良いかなと思います。

一緒に作業しているデザイナーがいる場合はデザイナーにまずは確認しましょう。

ショートカットキーで操作するためのお役立ち機能

Figmaに限らず、デザイン系のソフトはショートカットキーを覚えることで作業効率があがりますし、デザイナーに質問したときもショートカットキーで行う方法を教えられるパターンが多いかなと思います。
control+shift+?を押すとFigmaの画面下にチートシートが現れます。

ツール独自のショートカットキーを最初に全部覚えるのは大変だと思いますが、使用することが多い動作はこちらで覚えておくと良いかなと思います。
ちなみに水色になっているショートカットキーは使用をしたことがあるもので、白色のショートカットキーはまだ使用したことのないものです。

どこにある機能か忘れてしまったら

Figmaはアップデートの頻度が多く、新機能がどんどん出てきます。
あの機能、使いたんだけどどこだっけな…？
みたいな状態によくなるんですが、こんな時ググらずに⌘+/を押して下記のコマンドパレットの入力フォームを出してください。

この入力フォームに自分が行いたい動作のキーワードを入れると↓のスクショのようにキーワードに関連した動作が表示されるので、目当ての動作があったらそのまま選択すれば実行されます。

普段使用しない機能はこのようにコマンドパレットを活用することですぐにアクセスできます。

さいごに

今回は実装者の方向けにFigmaの役立つ機能を説明してみましたがいかがでしたでしょうか？
figmaはアップデートが多いし細かく知らなくても操作自体はできてしまうのですが、今回記事にしたTIPSを実行すると作業効率が絶対上がると思うのでぜひ試してみてください！