Haiku.aiが面白そうな感じだったので触ってみました。AIやSketchなどで作成したデザインデータをコードベースに移すことのできるサービス（？）の様子です。

インストール

アカウントは無料で作成できます。

ユーザー名・メアド・パスワードを入れると、アプリケーションがDLされ、確認メールが飛びます。

• 

• 

DLとメールアドレスの確認が終われば、アプリを起動してログインします。

起動してみる

ログインするとツアーがはじまります。英語ですが、どこをさわれば何ができるのかなんとなくわかるのでスキップせずに見ておきましょう。

新規にプロジェクトを作ると、このような画面になります。Sketch / Figma / Illustratorのいずれかで作成したファイルをインポートして、動きなどをつけていく様子ですね。

ちなみに以下のようなサンプルも用意されています。クリックするとアニメーションがでるボタンアイコンのようなものがでてきました。

下部の再生ボタンを押すか、右上からプレビューボタンを押してクリックするとアニメーションが見れます。

アニメーションのためのタイムラインなどもあるので、かなり便利そうな予感です。（使いこなせてない）

エクスポート方法

そしてここで作成したコードはさまざまな形式でエクスポートできます。

Reactの場合は以下のような形となりました。

１コンポーネントとして放り込むだけで動くというのはかなり便利そうです。

使い所

コンポーネントに引数を渡すような使い方もできそうですが、画面を触っている感触ではそこまでやるとつらみが出てきそうな気配も感じます。

アイコンやボタン・ローディングのエフェクトなど、単体のコンポーネントとして利用できるものに絞るのがよさそうです。Atomic Designですと、Atoms部分ですね。

主要JS/Native AppライブラリとGifでのエクスポートに対応していますので、１つのデザイン・コンポーネント集を複数のプロジェクトで利用するようなケースで強みを発揮しそうです。Sketchなどのデザインデータを入れておけば、npm installやscriptタグでのインポートするだけでどのライブラリでもその要素を扱えるのは便利です。