読み込み中...
投稿日
Figmaをチームで使う時に気をつけたいポイント6点
もくじ
はじめに
デザイン&エンジニアリング部に所属するUIデザイナーの川端です。
私のチームでは、基本的にデザインツールにFigmaを使用しています。
Figmaはデザインツールとして優れているだけでなく、コミュニケーションツールとしても優れており、プロジェクトの中でUIデザインを行う上で欠かせない存在となっています。
しかし、独特な機能が多く、機能や仕様を十分に知らないと、Figmaの操作によってトラブルを起こすことがあります。
そこで今回は、私たちが経験した、事前に知っておくと安心なFigma操作で気をつけたいポイントについてご紹介します。
対象読者
- Figmaの使用に慣れている方、Figmaの操作について知識がある方
本記事では、Figmaの基本的な操作説明については省略します。
前提
本記事のFigmaの説明は以下を前提とします。
- 言語を日本語に設定している。
- Windowsで使用している。
- フルシートでFigmaを使用している。
- 2025/05/26時点のFigmaである。※今後、Figmaのアップデートにより、本記事で紹介している内容から変わる可能性がある。
また、問題が起きた時の深刻度によって、タイトルに★をつけています。
参考になれば幸いです。
- ★★★：問題の解消に多くの時間がかかる
- ★★ ：問題の解消に多少時間がかかる
- ★ ：問題の解消は簡単だが知っておくと得
★★★：プロトタイプ設定が消える
Figmaのプロトタイプの設定は思わぬ操作で消えてしまうことがあるので注意が必要です。
例えば、Figma上で切り取った要素を貼り付けた時、その要素が移動先になっていたインタラクションは消えてしまいます。
上の画像では、切り取り後に貼り付けたことで左側の四角形から接続していたインタラクションが消えています。
さらに、貼り付けて置換を行った場合、置換されて消えた要素のインタラクションはすべて削除されます。
これは、コンポーネントの中を差し替えた場合、インスタンスの対応する要素でもインタラクションが消えてしまいます。
例えばこのように差し替えた場合、
コンポーネントで差し替えられた箇所のインタラクションが消えていることが、オレンジ枠内の水色の円が消えていることから分かります。
インタラクションの矢印はプロトタイプタブを開かなければ表示されません。
特に他者が作成したFigmaデータを操作する時は、気づかないうちにプロトタイプの設定を削除しないように、事前にプロトタイプタブを開き、目視で確認しましょう。
★★★：コンポーネントの変更がインスタンスに反映されない
インスタンスのプロパティを変更した場合、親コンポーネントでそのプロパティが変更されてもインスタンスの設定が優先されます。
例えば、以下のようにコンポーネントからインスタンスを作成します。
（１）作成したインスタンスの色（紫色）を（２）一度別の色（黒色）に変更した後、（３）元の色（紫色）を直接入力して（インスタンスをリセットせずに色のプロパティを変更して）設定し直しました。
その上で、コンポーネントの色を（オレンジ色へ）変更すると、（３）元の色を直接入力したインスタンスには、変更した色が反映されません。（紫色のままです。）
このことに気づかないと、思わぬところにコンポーネントの変更が反映されず、目視で一つ一つのインスタンスをチェックする作業が発生します。
これを防ぐためには、インスタンスに気づかない変更を加えないようにオブジェクトのロック機能などを活用しましょう。
また、インスタンスを誤って変更した場合や、確認などのために一時的に変更した場合、元の状態に戻す時には必ず「インスタンスをリセット」、または、「○○（プロパティ名）をリセット」を使用しましょう。
★★：外部公開したスタイルやコンポーネントは一度変更すると手動で戻しても変更扱いになる
Figmaでデザインガイドラインのファイルと画面デザインのファイルを分けて管理する場合、ガイドラインのコンポーネントやスタイルは、ライブラリとして公開することになります。
ライブラリとして公開した場合、公開したコンポーネントに手を入れると、都度、更新データの公開作業が発生します。
更新した箇所自体は、Figmaが検知してくれるため、それを公開するだけで作業は完了します。
通常、大きな手間はありません。
ただし、作業を行っていると、更新予定ではない箇所を誤って変更してしまうことがあります。
この時、Ctrl+Zまたは編集メニューの元に戻すによって状態を戻せば更新は無かったことになりますが、それ以外の操作で状態を戻しても、変更が発生したと扱われます。
一度変更扱いになった要素は、公開されるまで管理ページに残り続けるため、時間が経つと一覧にあるデータの中でどれが実際に更新されていてどれが更新されていないかが分からなくなり、不用意に公開できなくなります。
ライブラリとして公開しているファイルを編集した場合は、作業終わりにライブラリのページを確認して、こまめに公開を行うようにすると安全です。
★：Shift+Enterでテキストの改行を行うと、特殊な改行コードが挿入されてしまう
Figmaのテキストにて、Shift+Enterで改行を行うと、段落間隔の設定に影響を受けない改行を行うことができます。
テキストをコピーした時のShift+Enterの改行の文字コードには、`U+2028`という一般的でない文字コードが使用されます。これはテキストを別の媒体に転記する時などに混乱を生む可能性があります。
Figmaの改行にはEnterのみを使用するか、Shift+Enterを使用する場合は、改行に種類があることをチーム内で共有しておくと安心です。
★：ページのタイトルを空白にするとページが見つけられない
ページ内にオブジェクトが無い状態でタイトルを半角スペースのみにすると、区切り線になります。
しかし、ページ内に要素がある場合は、そのスペースがページタイトルになり、ページ自体を見つけにくくなります。
※紫の部分が、名前を半角スペースのみにしたページです。
うっかりページ名を変更してしまった際などに、見失う可能性があるため気を付けてください。
★：線幅の設定と見た目が異なる
Figmaでは親フレームは子要素より下に配置されます。
また、オートレイアウトで並べた要素にはキャンバス上で前後関係があります。
そのため、要素が隣り合っている、または、子要素が親フレームいっぱいに存在するなどの場合に
子要素の背景などが親フレームを覆い隠してしまうことがあります。
例えば、以下の画像はどの線も中央・線幅5pxで設定していますが、右下のみ線が太くなっているように見えます。
※上の画像は以下のような構造をしています。分かりやすいように極端な例を作成しています。
線は1px、2pxといった細い幅で使用されることが多いでしょう。
そのため、幅の違いに気づきにくいです。
特にテーブルなど、複雑な線の設定を行った際は、拡大して設定した線の幅になっているか確認しましょう。
最後に
Figmaのちょっとした操作で思わぬトラブルが起き、トラブルが解消できているか細かくチェックするのにとても苦労した記憶があります。
少し操作に気を付けるだけで不要な作業やトラブルを減らすことができます。
本記事を通じて対策を講じていただければ幸いです。
