Figmaの共有リンクにページ名に2バイト文字が入ると扱いにくい、リンクが長すぎる問題

Figmaでワイヤーやデザインを作って、誰かにシェアしたい。見てほしい時に共有リンクを発行することが多々あるのですが、ページ名に2バイト文字、いわゆる日本語が入っていると、メールソフトや課題管理ツールにリンクを張ってもリンクとみなされなくてリンク切れみたいになってしまうことがあるのを少しだけ解決してる。

１）Shareボタンから「Copy link」

最もポピュラーなやり方は画面右上の「Share」ボタンからコピーリンクとなると思うがこの場合は以下のようになる。（XXXX部分は伏せ文字）

https://www.figma.com/file/XXXX/ファイル名?node-id=0%3A1

２）ページ名を右クリックして「Copy link to page」

次に別のやり方もあって、ページ名を右クリックして出てくるメニュー「Copy link to page」から共有リンクを発行すると下記のようになる。上記１）との違いは見ての通り「ページ名」が省略されている。
結論を言うとこのやり方をすればよい。で解決です。

https://www.figma.com/file/XXXX/?node-id=0%3A1

３）共有リンクの仕組み

発行したリンクをエディタやメールソフトに張り付けると以下のようにURLとして認識されるのだが、このうち、日本語（2バイト文字）があると途中で切れてしまう事が多々あって困ることがある。

この場合、（２）ファイル名が英語、（３）ページ名を右クリックから生成のいずれかの方法なら2バイト文字が混入しないのでURLが最後まで成立しているのでトラブルを避けられるが、どうしてもファイル名に日本語2バイト入れたいときがあったりしますよね。

その場合は、そもそもファイル名は省略しても問題ないことは、上記手順２）で証明できてるのでこのやり方が手っ取り早いと思われる。

４）日本語のまま2バイト文字を回避する

2バイト文字を使った状態で回避する方法も一応ある。2バイト文字じゃないものにエンコードをすればよい。ブラウザにURLを張ってからコピーすると、URLはエンコードされた状態になる。

▼元の2バイトURL
https://www.figma.com/file/XXXX/ファイル名?node-id=0%3A1
▼URLエンコード後
https://www.figma.com/file/XXXX/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%90%8D?node-id=0%3A1

notoブログでは、2バイトがあってもURL認識してくれる有能さはあるが、2バイト文字もURLエンコードされてバイト文字になっているのでどこに張ってもURLとして認識してくれるので安心です。そもそもファイル名部分を省略してよいことが分かってるのでこの作業自体不毛ですが。

５）「node-id」って何だろう

実際に3つページを作っ５てみると以下のようなノードIDになる。

https://www.figma.com/file/XXXX/?node-id=0%3A1
https://www.figma.com/file/XXXX/?node-id=1%3A3
https://www.figma.com/file/XXXX/?node-id=1%3A4

「0%3A1」のようなWeb屋さんなら見たことがあるような文字、これはURL「エンコード」された文字で、「デコード」してみると以下のようになる。

間の「:」をエスケープするためにURLエンコードして「%3A」になってるというわけのようだ。

0%3A1　→　0:1
1%3A3　→　1:3
1%3A4　→　1:4

はい。それだけでこの「0:1」の意味は不明です。作った順にインクリメントされた数字が入っているので意味のないノードを示すキーのようですね。

その後のアップデート

2022年6月27日現在、この「Pages」を右クリックして「Copy link to page」から共有リンクを発行するとURLが短くなる「裏技？」はできなくなってました。右上の「Share」から発行するURLと同じになってました。
ただ手動で省略可能部分をカットすることはできるみたいなので適宜省略して使いましょう。フレームを指定したい場合はこれは省略できません。