Figmaのファイル名に日本語をつけると共有URLが長くて困る？実は短くできます

多分みんな経験していること

1. Figmaのファイル名に日本語をつける
2. Share > Copy link
3. 以下のような、とても長いURLが生成される
   1. https://www.figma.com/file/abcdefghijklmnopqrstuv/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%90%8D
4. ドキュメントに載せるときに場所を食う、若干見づらい

解決策

上記の例で出したURLで言えば、以下のように削って大丈夫です。

https://www.figma.com/file/abcdefghijklmnopqrstuv

※abcdefghijklmnopqrstuvの部分はファイルによって違います。後述するfile keyというものです。

仕組み

まずはFigma APIを見てみます。

The file key can be parsed from any Figma file url: https://www.figma.com/file/:key/:title.

file keyを取得するための説明ですが、FigmaのファイルのURLの構造は上記のようになっているみたいです。

恐らく、識別子であるkeyの後にtitleがついているのに過ぎないので、消してもちゃんとアクセスできる……ということだと思います。

何故気付いたのか

1. URLにファイル名がついているのは気付いていた（英語のファイル名はもちろんエンコードされないのでURLにそのまま反映されている）
2. ファイルのタイトルを変えた
3. 過去にドキュメントに載せていたURLから飛んでもちゃんとアクセスできる
4. 再度Copy linkをするとURL内のタイトルは変わっていた

てっきりファイルを新規作成した際の名前がURLとしてはずっと使われているのかと思ったのですが、そうではないらしいことに気がつきました。

「URLのうち、ファイル名に相当する部分を消したらどうなるんだろ」と思って消してみたら問題なくアクセスできたので、ほぼ偶然気づいたようなものです。