背景
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を使ったことにより、よりデザイン・開発作業の効率化につながる機能が出ることを期待！