SketchからObjective-CやSwiftのコードが生成できちゃう?!新デザインツールAnima Sketch to Codeが間もなくローンチ。

更新日:2016年11月28日

数々のプロトタイピングツールを試しているうちに、エンジニアの方なら誰しもが思ったこと…それは

「ここまで出来るんならコード生成してよ……」

ってことなんじゃないでしょうか?

プロトタイピングツール?NO!新しいデザインツールだ。

たぶんこのAnimaが開発中の「Sketch to Code」という新しいツールは今までのプロトタイピングツールを利用した工程に縛られているとピンと来ないツールなのではないでしょうか?
今まではデザイナーがどんなに頑張ってアニメーションを作っても、それをエンジニアが再び頑張って実装する…という二重構造だったわけですが、これからはAnima上でレイアウトやアニメーションがバッチリ決まれば、エンジニアはよしなに生成されたコードを利用すればいいということに。
とりあえずデモを見てください。

Auto Layoutからアニメーションまで。

リアルタイムプレビューしながらAuto Layoutを調整

画面幅に合わせて要素のレイアウトを整える「Auto Layout」をリアルタイムプレビューしながら設定できます。

Flashのようなタイムラインを利用したアニメーションも

ボタンをタップしたときの動きなど、インタラクションをつけたい箇所を指定すると、タイムラインが表示されて要素の変化などを描くことができます

画面遷移のアニメーションももちろん出来る

もちろん画面が切り替わるときの様子も再現できます

コードを生成してあとはXcodeで開くだけ

出来上がった画面&アニメーションをObjective-CもしくはSwiftで出力します。そしてそのファイルとXcodeで開くと…Storyboardにはちゃんと画面が表示され、画面同士もきちんと接続されています。Simulatorを立ち上げて確認するとちゃんとスクロールも画面遷移もできています…なんと…。

これで開発者を困らせていたUI実装についての悩みはすべて解決…?
現在、事前登録をやっているようなのでぜひ登録してみてください!リリースが楽しみ!!
Anima Sketch to Code

書き手:小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter: @yoshikikoji

この記事が気に入ったらいいね・フォローお願いします!

『デザインツール』の記事