はじめに
AI駆動開発のイベントでLocofyなるものを知った。Figmaの勉強も兼ねて、Locofyでプロトタイプを作成できるようになりたい。
結論
試そうとしたら1万ぐらいお金かかりそうあだからあきらめた。
作業
Figmaでモバイルアプリのデザインを作る
Figmaの特訓
Figma for UIデザイン［日本語版対応］ アプリ開発のためのデザイン、プロトタイプ、ハンドオフを買ったので、一通りやる。
割とボリュームある。ちょこちょこ時間見つけて3日ぐらいでできるところやった感じ。
以下、注意点
- 本に記載のFigmaと最新のFigmaでデザインが結構乖離してる
- どうせ触るならデスクトップ版使った方がいい
- ローカルリソース -> アセット
使ったリンク
とりあえず出来たもの
出来上がったフローがこちら
(本に書いてあるデザインはもっとキレイ)
条件付きのフローとかを作成するならフリープランから脱出する必要ある。
詳細は本家のPricingを参照
素人がアイコン作ると素人感がでるという知見を得た
| 自作 | |
|---|---|
 |
 |
Locofy.aiに手を出す
Locofyのアカウント作成
Locofyにアクセスしてアカウント作る。
プランがそれぞれあるけど、とりあえずPlay as you goにしておいた。
初回でプラン変更のダイアログとか出てくるけど無視して初回ツアーまで完了するとようやく使えるようになる。
FigmaにLocofyプラグインを追加
プラグインの管理から
Locofyのプラグインを追加
実行するとLocofyのアカウントと連動するよう促されるので素直にConnect Accountを選択
いきなりブラウザが開いてYou're Connectedって表示されたから多分You're Connectedされてる。
いざコード変換
locofyプラグインから早速Convert Code
選んだのは
- building: Mobile App
- Framework: React Native
- Code Settings: Type Script
- Project Environment: Expo
- Style Guide
- Convert Figma styles & variables: enabled
- Extract common style: enabled
選んだって書いたけどbuilding以外はデフォルトのまま
コードに変換するまでに5つのステップを経由する必要がある。
まずはstep1 Optimise Design。ここが一番時間かかった。要はコードに変更しやすいデザインとかに調整する段階なんだけど、デザインよく分かってないので何をどうすればいいのかさっぱり。
Step2 Tag your layers。アプリに組み込む機能とか選ぶ。
Step 3, 4はもろもろ謎。
いよいよStpe 5のsyncを叩くと、77ドルかかると聞いてあきらめる。
ふりかえり
Figmaの本かってモバイル用のデザインに挑戦もしてみたけど、思い通りのデザイン作る以前にデザインセンスを持っていない事が浮き彫りになった。UI/UXデザイナーさんすごい。