Locofyでプロトタイピングしたかったけどあきらめた

# はじめに

AI駆動開発のイベントで[Locofy](https://www.locofy.ai/)なるものを知った。Figmaの勉強も兼ねて、Locofyでプロトタイプを作成できるようになりたい。

# 結論

試そうとしたら1万ぐらいお金かかりそうあだからあきらめた。

![sync.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/40c7b84c-bada-44e2-89ca-0985c9e17133.png)



# 作業

## Figmaでモバイルアプリのデザインを作る

### Figmaの特訓

[Figma for UIデザイン［日本語版対応］ アプリ開発のためのデザイン、プロトタイプ、ハンドオフ](https://www.amazon.co.jp/Figma-UI%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%EF%BC%BB%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%89%88%E5%AF%BE%E5%BF%9C%EF%BC%BD-%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%80%81%E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3%83%97%E3%80%81%E3%83%8F%E3%83%B3%E3%83%89%E3%82%AA%E3%83%95-%E6%B2%A2%E7%94%B0-%E4%BF%8A%E4%BB%8B-ebook/dp/B0BHYXZCHG/ref=tmm_kin_swatch_0?_encoding=UTF8&dib_tag=se&dib=eyJ2IjoiMSJ9.IXxqjFInfGIBWZgwHQt2I0Fgq5SM1mngP5l3veJgPPbcHbGEdBRhfWvaQeet60uQAQNPO7vR1vtz3cqomJnxgOh0OByW3hWU-d3hR5VgOkYJE43YYciNrsHxUko2ANCr43B7RDL7Njni48acv9DSrrBtsCM9NotmmbhLhk0yN8puAnYYr5BMBzqufDPcW-ajA6nsTT4dXXMDiwhCZ510UStf41bP4tN9mE0T3FWaDCE.C7soz4B-gasCfM2Uo8vX8G8AwTuPAefVQmNrzmbkjX4&qid=1747809227&sr=1-5)を買ったので、一通りやる。

![figma_book.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/f0af9cf1-a03e-4abb-aef6-ca1fbc2b7484.png)

割とボリュームある。ちょこちょこ時間見つけて3日ぐらいでできるところやった感じ。

以下、注意点

+ 本に記載のFigmaと最新のFigmaでデザインが結構乖離してる
+ どうせ触るならデスクトップ版使った方がいい
+ ローカルリソース -> アセット

使ったリンク

+ [iOS 15 UI Kit for Figma](https://www.figma.com/community/file/1151306334429092283)
+ [Google Material Icon](https://fonts.google.com/icons)

### とりあえず出来たもの


出来上がったフローがこちら

![figma_flow.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/b8f103eb-e55c-462a-bb50-159c7f397e06.gif)

(本に書いてあるデザインはもっとキレイ)

条件付きのフローとかを作成するならフリープランから脱出する必要ある。

![figma_plan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/e1b1f67b-4bea-4828-9c71-a4962c7c9b61.png)

詳細は[本家のPricing](https://www.figma.com/pricing/)を参照


素人がアイコン作ると素人感がでるという知見を得た

| 自作 | Google |
| :----: | :-----: |
| <img alt="my_icon.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/ed47cde8-da00-4bd6-87f9-d4d11ab49afa.png"/> | ![google_icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/0c0031da-8fcc-498d-9267-8e7a7f057fab.png) |


## Locofy.aiに手を出す

### Locofyのアカウント作成

[Locofy](https://www.locofy.ai/)にアクセスしてアカウント作る。
プランがそれぞれあるけど、とりあえずPlay as you goにしておいた。

![locofy_plan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/64cea2e6-5800-4d8b-a9da-6f1b572c2aa7.png)

初回でプラン変更のダイアログとか出てくるけど無視して初回ツアーまで完了するとようやく使えるようになる。

![locofy_home.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/66274284-dc34-4712-a87c-d2f780346ba3.png)

### FigmaにLocofyプラグインを追加

プラグインの管理から
![figma_plugin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/21356061-509c-43b2-b046-a6631f8e7037.png)

Locofyのプラグインを追加

![figma_locofy_plugin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/3d0bfcfb-aa3e-4225-af1f-ceffe6f9c1f5.png)

実行するとLocofyのアカウントと連動するよう促されるので素直にConnect Accountを選択


![locofy_account.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/84cfaf98-1575-4d91-a196-6022bf55e404.png)


いきなりブラウザが開いてYou're Connectedって表示されたから多分You're Connectedされてる。

![locofy_connected.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/ff0b25ce-a645-467d-9124-2dcf901aac94.png)

### いざコード変換

locofyプラグインから早速Convert Code

![convert_code.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/05635032-4ddd-4656-9bf8-1f47c204c3ca.png)

選んだのは

+ 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つのステップを経由する必要がある。

![all_step.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/4e92d303-e314-40d4-a9ba-5783bc013d2e.png)


まずはstep1 Optimise Design。ここが一番時間かかった。要はコードに変更しやすいデザインとかに調整する段階なんだけど、デザインよく分かってないので何をどうすればいいのかさっぱり。

![step1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/f2d0cf96-dab7-467b-8667-58e42fa52432.png)
![step1_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/6af57f33-4f04-435a-bbc5-ee957f1c513f.png)

Step2 Tag your layers。アプリに組み込む機能とか選ぶ。

![step2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/cf61bfcb-7807-4893-be9b-8b8bb15b9c34.png)

Step 3, 4はもろもろ謎。

いよいよStpe 5のsyncを叩くと、77ドルかかると聞いてあきらめる。

![sync.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42445/40c7b84c-bada-44e2-89ca-0985c9e17133.png)

# ふりかえり

Figmaの本かってモバイル用のデザインに挑戦もしてみたけど、思い通りのデザイン作る以前にデザインセンスを持っていない事が浮き彫りになった。UI/UXデザイナーさんすごい。