プロトタイピングツールとして知られてきたFramerが、8/1より、全く新しいタイプの後継プロダクトをβリリース中です。

その名もFramer X。

つい数時間前にBeta2バージョンがリリースされ、その全貌が明らかになりつつあります。

手元にβ版が手に入ったので、使い心地をレポートしていきます。

ざっくり旧版と新版の違いを要約すると、下の３点になります。

Framer（旧版）

① コードタブ（≒Atom）、デザインタブ（≒Sketch）の２つでそれぞれレイアウトとインタラクションを構築していく

② CoffeeScriptベース

③ MVBアーキテクチャが人によってごちゃごちゃで、再利用がしづらい

Framer X（新版）

① xcodeのStoryBoardのようなデザインツールがベースにあり、そこで作成したコンポーネントにスクリプトを付け加えていく（≒Unity）

② TypeScript, Reactベース

③ １コンポーネントごとにデザインとコードがまとまっているので、再利用がしやすい

スクロールやリンクなどを自動でコーディング

これまでは

# Create a new ScrollComponent 
scroll = new ScrollComponent
    width: 100
    height: 100
 
# Include a Layer 
layerA = new Layer
    parent: scroll.content

と長々と書かなければいけなかったスクロールやリンクの処理をレイアウトを組むことで自動で生成してくれるようになりました。

コンポーネント

Sketchで言う所のプラグインとライブラリがセットになったものが、Framer Xのコンポーネントです。

世界中のデザイナーたちが、分割・再利用がしやすいように作られたコンポーネントをストア上で配布し、誰もが無料で自由に使うことができます。

既にものすごい数のコンポーネントがあります。

iOS, マテリアル系のUIパーツはほとんど揃っていて、パーツを置いてすぐに動かせます

入力したクエリに応じてGifアニメをひらすら流し続けるというニッチなコンポーネントもあります。

コンポーネントのカスタマイズ

先ほどのGIFの例で気づいた方もいるかもしれないですが、ダウンロードしてきたコンポーネントは、自分でカスタマイズすることも可能です。

コンポーネントのカスタマイズをする際には、コードのOverrideという機能を使います。

これはまさにSketchのOverride機能のプログラム版で、大元のコンポーネントを変更することなく、自分でオリジナルの機能やアニメーションをアドオンできます。

右端のCodeという項目から”Edit Code”というボタンを押すと、エディタが立ち上がり、そこで自分が付け加えてたいコードを書きます。

今回は「ボタンをクリックするとプルッと拡大する」ようにコードを書きましたが、そうすると、その機能が持ってきたコンポーネントに追加実装されます。

以前のFramerではこうしたコードをプロジェクトごとに１箇所にまとめて書いていましたが、Framer Xではコンポーネントごとに、Overrideという形でコードを小分けにして書いていきます。

このように、Overrideを上手に使いながらコンポーネントを機能拡張したり、コンポーネントとコンポーネントをつなげていくのがFramer Xの大きな特徴です。

このように、繰り返し汎用的に使われる部分と、個別に都度カスタマイズする部分を明確に分けることで、世界中のデザイナの集合知が生かされ、工数に無駄のないプロトタイピングが可能になります。

Framer Xが目指すところ

プロトタイピングツールとしてのよさはわかりましたが、それではFramer Xはどこに向かっているのでしょうか？

上のまとめで少し書きましたが、Framer Xの造りは、Unityにとても似ています。（Unityは右下の”Add Component”から各部品にC#スクリプトを追加していく）

Framer XのDocsでも、Framer XはUnityを意識して作られていると語られています。

Framer X is more like Unity than like Photoshop. An IDE for design, if you will. Framer X can do many different things from wire-framing to visual design to screen flows to design systems to interactive component programming. We expect most users to only use what they need based on their project or skill level.

IDEというワードが示す通り、Framer Xが目指しているのは、プロトタイピングツールというよりも、コードを使ってデザインする、インタラクションデザインの開発環境（=IDE）と言うのが近いのかもしれません。

ありそうな質問

デザインはFramer上で作らなきゃいけないの？

いいえ。Sketchで作ったデザインをコピペでそのまま持ってくることもできます。

Reactが書けないと使えないの？

書けなくてもSketchで作ったプロトタイプにスクロールつけたり、ページ遷移をつけたり、コンポーネントをくっつけたりすることはできます。が、自分でカスタマイズするとなると、しばらくの間はReact、TypeScriptに習熟している必要がありそうです。

Framer Xで書いたコードは、そのまま実装できるの？

基本的にはFramer Xのコードをそのまま実装することは目指していないようです。Docsでも、コード書き出し系のプロトタイピングツールについては明確に否定してます。ただ、Framer Xで作られたデザインレイアウトは、すべてjsxやhtmlに変換されているので、そちらは使うことができるようです。

The idea behind Framer X is not to generate code for you, but instead to use the code you (or someone else) wrote. Auto generated code almost never ends up in production, so it’s better to have a tool use the code that is being used.

Framer Xを習得する上で役立ちそうなTutrial集

こちらのGithubに、Framer Xは触ってみたいけど、Reactに慣れてないデザイナ（私や！）向けのチュートリアルリンク集があるようです。有難や！

Framerへの愛をつらつらと

ここから下に書くことは個人的なFramer愛や駄文なので、興味ない方は読み飛ばしちゃってください ><

プロトタイピングツールは、頑張ってカッチョいいインタラクションを作っても、最終的には実装と別ラインになってしまうので、ゴミ箱にポイされてしまう運命にあります。

なので、学習コストや制作コストが大きくかかるFramerは、ものっそいいいクオリティのUIが作れるのですが、スピードと無駄のなさが求められるデザインの現場では敬遠されがちでした。
（dribbbleや100days UI Challengeでは大活躍です！）

Framer Xはその課題をコンポーネントとOverridesの組み合わせで正面から解決しにかかってて、これが彼らの答えなのかと少しアツくなってしまいました…

デザインとエンジニアリングが綺麗に混ざって、デザイナの力を大きくエンパワメントしてくれるのがFramerの魅力だと思うので、引き続きFramerは使っていきたいです。

日頃業務をしていてあまりFramer使う人を見かけないので、これを機にもっと日本にもFramerユーザーが増えるといいなと思ってます。

Framerのslack。 #Tokyo チャンネルあります↓