「プロトタイプ設定が消える」 Figma共同編集でハマりやすいポイントと対策6選：＠IT Techブログ PickUp（TISインテックグループ編）

Figmaをチームで使っていて、「変更したはずなのに反映されない」「プロトタイプ設定が消える」、そんな経験はありませんか？　こうした問題は、操作ミスではなくFigmaの仕様が原因かもしれません。ファイルが大きいと自分では気づきにくく、後から発覚するケースも少なくありません。本稿では、現場で実際に遭遇した困りごとをもとに、共同作業で押さえておきたい仕様を6つ取り上げます。困りごとには深刻度を★で付け、影響の大きいものから順に紹介します。

[Fintan]

注目のテックブログから「現場の知恵」をあなたに――

各社のエンジニアが発信する「テックブログ」。その熱量を＠IT編集部がピックアップ。 生成AI前提時代に向けて環境が激変する中、“隣のエンジニア”は何を感じ、何を考え、どうアクションしているのか？――試行錯誤のプロセス、成功の鍵、変化に立ち向かうマインドなど現場のリアル、ナレッジを凝縮してお届けします。

本稿はTISインテックグループが運営する、開発現場から生まれた技術ノウハウを公開するサイト「Fintan」上で2025年6月23日に掲載した記事を転載するものです。そのため、用字用語の統一ルールなどが、＠ITのものと異なります。ご了承ください。

連載目次

　Figmaはデザインツールとして優れているだけでなく、コミュニケーションツールとしても優れており、プロジェクトの中でUIデザインを行う上で欠かせない存在となっています。

　しかし、独特な機能が多く、機能や仕様を十分に知らないと、Figmaの操作によってトラブルを起こすことがあります。

　そこで今回は、実務で経験した困りごと毎に、事前に知っておくと安心なFigma操作で気をつけたいポイントについてご紹介します。

　本稿では、Figmaの基本的な操作説明については省略します。ご了承ください。

前提

　本稿のFigmaの説明は以下を前提とします。

• 言語を日本語に設定している。
• Windowsで使用している。
• フルシートでFigmaを使用している。
• 2025/05/26時点のFigmaである。※今後、Figmaのアップデートにより、本稿で紹介している内容から変わる可能性がある。

　また、問題が起きた時の深刻度によって、タイトルに★をつけています。

• ★★★：問題の解消に多くの時間がかかる
• ★★　：問題の解消に多少時間がかかる
• ★　　：問題の解消は簡単だが知っておくと得

　ここからは、チームでFigmaを使う際に注意したい6つの問題と対策を深刻度の高い順にご紹介します。

• ★★★：プロトタイプ設定が消える
• ★★★：コンポーネントの変更がインスタンスに反映されない
• ★★：外部公開したスタイルやコンポーネントは一度変更すると手動で戻しても変更扱いになる
• ★：Shift+Enterでテキストの改行を行うと、特殊な改行コードが挿入されてしまう
• ★：ページのタイトルを空白にするとページが見つけられない
• ★：線幅の設定と見た目が異なる

★★★：プロトタイプ設定が消える

　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のちょっとした操作で思わぬトラブルが起き、トラブルが解消できているか細かくチェックするのにとても苦労しました。

　少し操作に気を付けるだけで不要な作業やトラブルを減らすことができます。

　本稿を通じて対策を講じていただければ幸いです。

Tips

関連記事として、生成AI時代を見据え、FigmaとStorybookを活用したデザインシステム構築についても紹介しています。よろしければ、下記の記事もあわせてご覧ください。

生成AI時代のSIerのためのデザインシステム【Figma + Storybook】

元ブログもチェック！

元記事はコチラ。ぜひチェックしてみてください！