背景

Figma CodeConnectを試すにあたり、少し手こずったところをがあったので記載する。

CodeConnect試した内容

Figmaでチュートリアルが用意されているので、それをもとにやった。
Getting started with Code Connect

このドキュメント通りにやってみたが、publish時にエラーが発生した。

publishするときに404エラーが出る

「Use the interactive setup」を実行し、
CodeConnectのファイルをAIマッピングで自動生成を実施。

その次に「Publish Code Connect files」に進み、以下コマンドを実行。

npx figma connect publish --token=PERSONAL_ACCESS_TOKEN

すると、以下のエラーが発生。

Validating Code Connect files...
Failed to to fetch node info (ERR_BAD_REQUEST): 404 Not found
Please raise any bugs or feedback at https://github.com/figma/code-connect/issues.

node-idの情報が間違っていそうなので、FigmaのURLを変えたりしてみたが、解決せず。

解決方法

とりあえず、CodeConnectのファイルは自動生成せず、自作してみることにした。
チュートリアルに記載されている、Simple Design Systemだと自動生成されるCodeConnectファイルが多く、何が原因でエラー出ているかわかりづらかったため。

Simple Design Systemやcode-connect-demoのCodeConnectファイルを参考に作成した。

AIマッピングを実行することでCodeConnectファイルを自動生成してくれるが、データの受け渡しあたり(propsあたり)を色々修正する必要があったため、自作でもそこまで作業時間は変わらなそうだとも思った。

そしてURLは以下のように指定。node-idの値は、400エラーが出たときと同じ値にした。

https://figma.com/design/[ファイルID]?node-id=XXXX-XXX

普通にFigmaファイルからURLコピーしてくるともっと長いURLになるが、これだけの情報で良いみたい。

この状態でpublishを実行すると、404のエラーなく成功。

CodeConnectを使うためにやったこととしては、以下のみ。

CodeConnectのファイルを自作する
figma.config.jsonを作成

// figma.config.json
{
    "codeConnect": {
      "parser": "react",
      "include": ["src/**/*.tsx"],
    }
  }

CodeConnectのファイルをpublishする

おまけ:CodeConnect微妙だと思ったところ

検証してみて、少し導入に手間がかかると感じたところを記載。

CodeConnectファイルの中にロジック書けない
ReactコードとCodeConnectファイル、どちらも構造を変えずに済むように、CodeConnect内で値を変換してReactコンポーネントに渡すようにしたかったが、CodeConnectファイル内ではロジックはかけない模様。
コードは文字列として認識されるので、そのままCodeConnectにロジックの状態で反映されてしまう。
以下の記事でそのことを知った。
入社10ヶ月で行った Turtle デザインシステムの開発と関連する取り組み
CodeConnectファイルの運用面
実装に変更があったら、CodeConnectファイルも変更しなきゃいけないし、動作確認もしなきゃいけないので単純に作業が増える。あとCodeConnectでエラーが出てないかや、CodeConnectとして表示されるコードが正常に動くかもテストしなければいけない。何か良い方法あるのかな？
エラーのデバッグ方法がわからない
以前確認したときにFigmaのCodeConnect画面でエラーが出たが、エラー内容を確認することができなかった。
もしかしたら何か確認する方法があるのかもしれない

単にコンポーネントをコピーできるくらいだと、運用する労力の方が大きいかなという印象。
今後このCodeConnectを使ったことにより、よりデザイン・開発作業の効率化につながる機能が出ることを期待！

参考

入社10ヶ月で行った Turtle デザインシステムの開発と関連する取り組み