デザインからアプリのコードを生成してくれるBuilderXを使ってみた。

デザインからアプリのコードを生成してくれるサービスを見つけました。

「そんな夢のようなサービスが・・・？」
「ちゃんと使えるの？精度はどうなの？」

ということで実際に開発で使ってみたお話です。

1.導入に至るまで

私は会社でデザイナーとして働いているのですが、プライベートではエンジニアと二人でアプリの開発をしています。ちなみにコードは1ミリとも書けないです。（学生の時に課題でサイトを作る時にhtmlを触った程度）

そんなコードが書けないデザイナーとエンジニア1:1の開発は、（事業内容によりますが）アプリ開発だけでみるとエンジニアの作業量の方が多く、エンジニア側に負担が掛かってしまいます。
その負担を少しでも減らすべく、いろいろと方法を模索していました。

そこで見つけたのがデザインからReactNativeのコードを生成してくれるサービスlaskaとBuilderXです。（IOSとAndroidを同時に作れるという理由で言語をReactNativeに決めていました。）

両方触ってみた結果、今回はBuilderXを選びました。

2.BuilderXとは

ブラウザ上で作成したUIデザインをコードに書き出してくれるサービスです。

BuilderXの特徴
・ブラウザで使える
・sketchのデータをインポート出来る
・ReactNative,React,Flutterを書き出せる
・sketchやXDなどのデザインツールとUIが似ている

デザインモードUI（画像はサンプルファイルです。）

コードモードUI

BuilderXに決めた１番の理由は、今まで使っているデザインツールとUIが似ているので親しみやすかったからです。

使い始めた当初はデスクトップアプリのみでしたが（確か2019年の1月ぐらい）、その後ブラウザ版が出来ました。（確か2019年の6-7月ぐらい）
そして今はデスクトップアプリは終了し、ブラウザ版のみのようです。
（公式ページより：https://builderx.io/mac-app）

使い始めた当初は、挙動が怪しく（1時間に1度は落ちたり、数値が急に消えたり、保存ができなかったり・・・）データを書き出すまで運ゲーのようで、触るのもうんざりしていたのですが、ブラウザ版が出来てからは上記のような怪しい挙動もなく、（ほぼ）ノンストレスで触れます。

3.実際にどのようにBuilderXを使っているのか

どのように　BuilderXを開発に組み込んでいるのか、フローをまとめてみました。

まずsketchでUIを作ります。そしてZeplinにデザインをアップして、その数値を見ながらBuilderXでデザインを再現するという感じです。

sketchのファイルをBuilderXにインポートする機能もあるのですが、私がやったときはあまりうまくいかなかったです。
Sketchデータの作り方を変えたらいいのかもですが、１から作り直すことになりそうで、今回は諦めました。（次の開発ではやりたいです）

そしてBuilderXで作ったデザインが最終的なアプリの見た目になるのでしっかり丁寧に作ります。（当たり前ですが・・・）

できたらデザインモードからコードモードに切り替え、欲しい言語を選択し、「DownloadComponent」でjsデータが書き出せます。

その後はエンジニア側に受け渡し、コードを綺麗に整理してもらったり色々（・・・）してもらって完成です。

4.BuilderXデータ作成時に気をつけた点

・コンポーネントの代わりにグループで管理

コンポーネントを作成すると、挙動がおかしく（選択したいところが選択できない、画像のサイズが勝手に変わる、etc...）なりやすいです。

なのでコンポーネントは作成せずに、グループで管理していました。

コードに書き出すときにコンポーネント単位にしておかないと「DownloadComponent」できないんじゃないの？と思うのですが、
グループにしておけばコンポーネント扱いになり、グループ単位で書き出せます。（？）

あともう一点、透明な範囲Rectを起点にグループを作らないと、コードにしたときにベースカラーが消える問題があったのですが・・・さっき触ってみたら直ってました。
かなり悩まされたのですが、こうやって文字に書いてみると何を言ってるのか分からないですね・・・・。

5.BuilderX使ってみてよかった点と難しかった点

良かった点。
開発フローの中で分担できる作業が増えので、負担を分散でき、全体の進行が早くなりました。

あともう一つは、デザイナーが見た目を管理しやすい点です。
BuilderXで作成したものがそのままUIに反映されるので、エンジニアに都度修正点をお願いする必要がありません。

BuilderXで難しかった点。
やはりBuilderXのみで全てのUIは完結できないところです。
作ったものをエンジニア側でコードを整理したりする必要がありました。特に可変部分（ユーザーが入れる文章など）がなかなか難しかったようです。
エンジニア側の感想としては、色々問題点はあるけどやっぱり１から実装するよりは格段に早いとのことです。

6.まとめ

私がヘボヘボなので機能を使いこなせてなかったのですが、それでもかなり満足度が高いサービスです。ちょっと高いのですが、課金する価値はありました。

このサービスを使ってかなり感動したのですが、周りに知っている人が全然いなかったので、個人開発や少人数開発をしている方にオススメしたいです。

あとアプリ開発の心理的なハードルが下がりました。

まだ書ききれてない所や私が気づいてない機能がたくさんあると思うので、
気になった方はサイトを見てみてください〜。

30日間無料トライアルで全ての機能が試せます（！！！）

BuilderX