Figmaでアプリのユーザーインターフェースを試してみた感想
今まで専らkiroを用いてアプリ開発、そしてデザインの構築を行っていました。
今回新たな試みとしてFigmaを使ってみました。
Figmaとは
Figmaとは？基本的な使い方から役立つ豆知識、利用料金も解説
kiroとの比較👻
| 項目 | Figma | Kiro |
|---|---|---|
| 目的 | デザイン（見た目を作る） | 開発（動くコードを生成） |
| 作れるもの | 画面の画像・UI | 完全なWebアプリ |
| コード生成 | ❌ しない | ⭕ する |
| デザインの自由度 | ⭕ 超高い | △ AIに任せる |
| 実際の動作 | ❌ 動作しない | ⭕ 動く |
| 使用者 | デザイナー / エンジニア | プログラミング初心者でもOK |
また画面の比較もしてみます
🔽Figmaの画面
🔽Kiroの画面
操作画面はkiroと殆ど同じで、あまり戸惑いはありませんでした。
figmaはプレビューボタンで、どのように表示されるのかがすぐに確認できるので、便利だと感じました❗
また、デザインは個人的にfigmaの方が好きです。やはりfigmaはデザインに特化しているからなのかな？？
figmaの致命的な欠点🌀🌀
ソースコードをいじろうとしたら、重すぎて殆ど機能しませんでした。特にbodyを書き換えるのが非常に困難でした😢ちなみに、chat経由で変更の指示を出した際は、とてもスムーズでした。
例えば「フィグマ」とbodyに加えようとしても、急に「フィ」部分が消え、「グマ」だけ表示されるといったようなバグが起きました。他のアプリを全部終了して、CPU使用率を下げてみましたが、何も変わらず。
その他の問題点🌀
figmaでうまくいかなかったので、フォルダに保存して、kiroに移行しようと試みました。
しかし、まずcodeのフォーマットが全く違うので、新しいアプリケーションをダウンロードしないとlocal hostで表示できないという問題点がありました。また、デザインに関するcode形式も違うみたいで、画像の挿入がうまくいかなかったり、様々な問題が発生しました(^_^;
kiroとの相互性はかなり悪いようです⤵️
以上figmaを使ってみた感想でした。ソースコードがもっとスムーズに変更できるなら、もっと使いたいと感じました。