Jorn van Dijk（@jornvandijk）のリツイートから2ヶ月近く経った先日、ようやくFramer X βの招待が届きました。Trailerが格好良すぎてReactとシームレスになるのかという期待で一杯だったので嬉しかったです。実際、AirbnbやFacebookのデザイナーもこんな感じでした。とりあえず動画を観ていただけたら。

タイトルはUSノリですが、正直Sketchはある1プロジェクトで使ったことがあるだけです。Figmaなどの他のデザインツールは使ったことがないです。なのでここでは比較を行いません。以前からあるFramerとの差分の紹介を中心にしていきます。Framerはなぜか日本では使われていない印象がありますが、これがデザイン環境の向上に少しでも参考になれば幸いです。

Linking

複数画面の遷移をつくるには、FramerではFlowComponentを利用したコードを書く必要がありました（といっても極簡単です）。Framer X（以下、X）では既存のデザインツールのようにGUIでつくれるようになりました。

この最後のサイドメニューは、リンクの種類でoverlayとその方向を選択するだけでつくることができます。

Stack

Xで新たに加わったサポート機能です。Stackというレイアウト要素（青い部分）で囲ってアイテムをdrag & dropします。

するとアイテムの順序ドラッグで柔軟に変更できます。

さらにネストさせることもできるのでこんなこともできます。

載せませんでしたが、tab barの3つのアイコンも同じように位置（順序）を変更できます。順序に関する修正 が億劫じゃなくなりそうです。

Scrolling

FramerではScrollComponentでコーディングする必要がありましたが、これもGUIでできるようになりました。Scroll要素（青い部分）をScrollしたい要素（ここではScroll）につなぐだけです。ここでは切れていて見えませんが、右側のScrollは、スマホ画面の1.5倍くらいの縦幅で用意してあります。

Components

個人的にはこれが1番嬉しいです。実はFramerではSketchのComponentにあたるものがなく、Framer Symbolという拡張を入れてclassを作る要領でcomponentを作る必要がありました。

XのComponentsにはbuttonやswitchなどの基本的なUIパーツがデフォルトで用意されています。おまけにインタラクティブです。Componentsは後述するStoreでダウンロードしたり、自作することがで簡単に増やしたり、まとめたりできます。

例えば、ボタン。左画面下にあるのがボタンのMasterです。XのComponentsタブから追加したものはMasterとなります。右側の画面にあるUnfollowボタンはHello worldボタンを⌥+ドラッグで複製したものです。それらは複製されたものなのでInstanceとなります。もちろん、Instanceへの変更は独立しています。一方Masterを変更すると、それはすべてのInstanceにも反映されます。ここでは背景を青にしています。

同じくComponentsの1つであるSwitchをクリックすると、プロパティエリアにEdit Codeという項目が表示されます。これをクリックしてみると、VS Code（それか似たもの）が開かれ、Switch.tsxが表示されます。煽っていたReactの登場です。このコードを変えるとデザインに反映されます。正直かつてのFramer内のエディタよりVS Codeの方が書きやすかったので、これは嬉しいです。

Vector tool

省略しますがアイコンもふつうに作れます。詳しくはこちらの公式動画。

Store

このストアでは世界のFramer愛好デザイナーがつくった（インタラクティブな）コンポーネントを自由に無料でダウンロードして利用することができます。すでに充実している印象を受けます。海外の人すごい。

例えばYoutube Playerを使ってみます。まずはInstallします。

するとComponentsタブ内にYoutubeが追加されているので、それを目的のスクリーン（例は適当ですが）にドラッグしてサイズを整えます。

必要があればプロパティ変更エリアから動画のリンクをコピペで変更できます。プレビューするとYoutubeが再生できるようになっています。

これらがユーザーによって日々アップロードされているコンポーネントです。

まとめ

React meets designという文句で世界のデザイナーを煽ってきたFramer Xですが、コンポーネントベースになったことで、Framer時代からの優秀なデザイナーのコミュニティという強みを存分に活かせるようになりました。指数関数的に優れたコンポーネントが充実するデザインシステムを作り上げてしまったわけです。強みのインタラクションをGUIで可能にし、コードの書けないデザイナーも取りにきた印象も強いです。

テストする際のメディアの完成度を上げればそれだけ誤差を小さくできるわけですが、それだけ時間がかかってしまいます。検証の精度と時間コストはトレードオフです。だからこそプロトタイピングなわけですが、所詮はトレードオフの世界の中でバランスを取ったアプローチです。ですが今回のFramer Xは、このトレードオフを壊したと言ってもいい出来に仕上がりつつあるように感じました。

公式ドキュメントによれば、現在のβ版はβ-Ⅰのようで、近々（TBDですが）β-Ⅱをリリースするとのことです。Docをみる限り、Ⅱではコード側のアップデートが明らかになりそうです。

----------------------------------------------------------------------------

この投稿に反響あれば、またFramer Xについて書いてみようかなと思いますのでスキやフォロー、シェアなどしていただけると嬉しいです。

Twitterもどうぞよろしくおねがいいたします。m(_ _)m