⭐︎[Flutter][Figma] Figma⇨Flutterへ変換
Figma プラグインにて、他の言語へ変換したい！！！！
Figma のデザインを Flutter(Dart)、iOS(Swift)、Android(Kotlin)、または React.js コードに変換できるFigmaのプラグインについて
せっかくFigmaで綺麗にデザインできたのに、他の言語（今回の私の場合Figma⇨Flutter（Dart言語）でFigmaのデザインを確認しながらコードを書いていくから、時間もかかるし、デザインも思ったようにいかない、、、悲しい、、、 （；；） とひとつ目のアプリを作っています。。。
次のアプリでは、プラグインを有効に使ってやるんだという意気込みで調べて記録に残しています。自己記録目的ですので、ミスや見解違いのこともあると思います、、、（；；）
こちらの方を参考に、プラグインを選んで、自分で使ってみた感想などを書いていきます
DhiWise - Figma to Code
By DhiWise Pvt Ltd
使ってみた感想
・バージョンアップデートが更新されている （2022年11月2９日現在、2022年11月25日にアップデート）
・アウトプットが複数File
・変換できるのは、フレームのみのため、ひとつ一つの要素を取り出したい時は面倒？
・デザインだけを変換 の設定にしても、ColorやAppBarのDartFile を新しく作るみたい？（全部のコードを変換の設定にすると、新しいFile、メソッドとたくさんできる）
・ドロップボタンやチェックボタンなどのボタンや、枠線だけの丸など少し複雑なものは、変換してくれなかった
・手作業でデザインを移す方法が綺麗なコードが書けるかな？と模索中（widget、method名など、わかりにくかった)
・flutter側の yaml Fileの大幅な変更なく使える（追加は、Image程度）
・デザインだけを地道に移していったが、コンポーネント化していたものは崩れたり、 flutterでいうRow、ColumnのAxisAlignmentなどの調整はしてくれず、そのままのサイズを吐き出すため、調整は必須そう
参考資料
<公式>
<その他>
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
By Bernardo Ferrari
使ってみた感想
・バージョンアップデートが更新されていない（2022年11月2９日現在 2021年3月9日にアップデート）
・アウトプットが単一File
・１つ目のもの同様、ドロップボタンやチェックボタンなどのボタンや、枠線だけの丸など少し複雑なものは、変換してくれない
・デザインのみを吐き出すなら使いやすいが、比率などは計算してくれないため、Sizeや、Paddingなど間隔の調整は必要そう
・逆に、alignやAxisAlignmentは書いてくれてある
・めちゃ簡単
・生成されたコードがプラグインの画面中に収まりきってないから少し見にくい
Discussion