Figmaで個別URLの該当箇所に飛ばない現象〜原因と解決策〜
最近よく起こっていた事象で、Figmaの共有URLをクリックしても、ファイルは開くけど該当箇所に飛ばない現象。
修正箇所の共有時にとても困っていましたが原因がわかったので記載しておきます。
その前に念の為個別リンクの説明を載せておきます。
Figmaの個別リンクとは
Figmaはオンライン上でアクセスと管理が可能なデザインツールです。
オフラインデザインツールとは違い、URLを共有することで該当箇所にアクセスすることができます。
URLの種類はページリンクと個別リンクがあります。
まずはページリンクですが、Figmaの左サイドバーのPageタブから該当のページの上で 右クリック>Copy link to page でページリンクがコピーできます。
または、右上のヘッダーコントロールバーの Share ボタンで出てくるモーダルの下部にある Copy link からも開いているページのURLをコピーすることができます。
二つ目は、個別リンクです。
ページの中にあるそれぞれのオブジェクトに直接アクセスしたい時に利用します。
当該のオブジェクトを選択し 右クリック > Copy/Past as > Copy link からURLをコピー。
または、Command + L のショートカットで個別URLを取得できます。
ページリンクとは違い、個別URLの場合は当該のオブジェクトに直接飛べるため、修正箇所などを共有する際に重宝します。
個別リンクの箇所に飛ばない時がある
ショートカット(Command + L)が出てからは、個別リンクを使いまくっていましたが、たまにファイルは開くけど当該場所に飛ばずよくわからない箇所を表示していたり、ページ全体を選択されている場合がありました。
その原因とは、、
インスタンスかFrameかの違いでした。
ファイルの整理時にタイトルやステータスなどをコンポーネント化し、ページの上部に付けておくような作り方をよくするのですが、これが罠でした。
コンポーネントから派生したインスタンスの個別URLを取得した場合、URLを踏んでも当該箇所がない状態でファイルのみが開きます。
これでは毎回個別URLを発行していても、当該箇所が伝わりません。
ではどうしたら良いか、、
インスタンスの個別URLはワークしないため、Frame状態になっている箇所からURLをコピーする必要があります。
FrameのURLを踏めば無事当該箇所に辿り着くことができました。
このやり方だとタイトルバーなどをインスタンス管理しているとかなり不便ではありますが、逆にFrame化されていればちゃんと当該箇所を表示してくれるので、ページ本体のURLや、修正箇所の細部のURLなどをコピーするなどの工夫をすることで回避できそうです。
とはいえ、インスタンスに飛べないとなるのは結構不便です。
ページ内の当該箇所でもインスタンスを使っていたら飛ばないので、個別URLをコピーするときは注意してください。
まとめ
インスタンスはあくまで分身パーツであって、インスタンスから個別URLの取得はできないようです。
Figmaは「レイヤー・名前の付け方」と「機能」の結びつきが強いツールだと再確認した事象でしたが、不便なので今後アップデートが入るとありがたいです。
この記事が気に入ったらサポートをしてみませんか?