ハッカソンでフロントエンドを担当することになり，試してみました．
ChakraUI FigPilot
ChakraUI FigPilotは，ChakraUIの公式で公開されているFigmaのUIキットを使ってFigma上のデザインからコードを自動的に生成するFigmaのプラグインです．
ChakraUIのUIキットは無料で使えますが，コード生成をするChakraUI FigPilotは有料(15ドル)です．
一部のコンポーネントでコード生成ができなかったので，ここにまとめておきます．
コード生成ができるコンポーネント
- Stack
- Box
- Text
- Alert
- Avatar
- Badge
- Beadcrumb
- Button
- Card
- CheckBox(CheckBoxのみ)
- Icons
- Image
- Input
- Kbd
- Menu
- Modal
- NumberInput
- PinInput
- Progress(Progressのみ)
- Select
- Skelton
- Slider
- Stat
- Tabs
- Tooltip
コード生成ができないコンポーネント
- CloseButton(stackになる)
- Radio(stackになる)
- Switch(stackになる)
- Table(StackとTextになる)
- Textarea(stackになる)
使ってみた感想
良かった点
- コード生成だけである程度形になったものができる
- ボタンのアイコン等をFigma上で設定できる
悪かった点
- コード生成したときに必要のないプロパティまで書かれる
- VStackとHStackを使い分けずに全てStackで書かれる
- 一部のコンポーネントがStackになってコード生成がうまくいかない
良かった点，悪かった点それぞれあるのですが，結構使いづらかったです．
特にコード生成が厄介で，生成したコードを修正する作業に時間を取られていました．簡単なデザインならChakraUI FigPilotを使った方が時間がかかると思います．実際，ハッカソンでは途中からChakraUI FigPilotを使わずに開発していました...
FAQに書かれているのですが，ページ単位ではなくデザイン単位でコード生成をすると良いみたいです．