React×Prototype "Framer X"とは...?

#　はじめに

私は某大学の3年生です。
視覚心理学を基に人間中心設計を研究しています。
また、趣味でUIを作っては壊して、の日々を繰り返しています。

---

この記事は、Framer公式のYoutube channelで述べられていることをまとめたものです。
何らかの問題があった場合は、一部変更・削除する可能性があります。

また、英語の解釈が間違っている箇所があるかもしれません。
その場合はこそっと教えていただけると幸いです。

# そもそもPrototypeって何？
Cambridge Dictionryによれば、

> the first example of something, such as a machine or other industrial product, from which all later forms are developed:

という定義になっています。

簡単に言えば、（商業的な）何かの原型、ということになります。
prototyping toolは完成品ではないけど、それに近いものを作る手段、ということです。

もともと、Power PointやKeynoteなどのpresentation software、Quartz Composerなどのvisual programmingがPrototyping toolとして使われていましたが、
最近（特にここ2、３年)はprototypeを作ることに特化したsoftwareが登場しています。

# 現在主流なPrototyping tool

[uxtools.co](https://uxtools.co/tools/prototyping)でUsage順に見ると、
1.Invision
2.Principle
3.Adobe XD
となっています。

一言でprototyping toolといっても、実は3種に分類することができます。
しかしそれを書いていると長くなりそうなので今回は省略します。（需要があればいつか書きたいです）

日本国内では、日本語に完全対応したProttが広く使われているようです。
私自身は、自宅のnetworkが貧弱すぎる(酷いときは下り80kbps...)なので
offlineで動き、細かい設定ができるFlintoを愛用しています。

# Framer

いつまで経っても、Framerの話が出てこないじゃないか、と激おこの皆様、
遅くなりました..やっと本題です。

FramerはCoffeeScriptでPrototypeを作ることができるtoolです。
GUI上で設計から実際の画面遷移、animationまで完結するものが多いなかで、
code-baseのFramerはある意味異色です。

Framerはcodeによって動きを制御できるため、
GUIだけのものに比べて自由度が高い、という利点があります。
（その分、習得度・敷居は高いかもしれません）

# じゃあ、Framer Xって何？
[Framer X](https://framer.com/x/)はFramerの進化型です。
>Framer X - Interactive design for everyone.

現在は、waitlist順にbeta版を配布しているようです。(twitter情報)

私はまだbeta版にたどり着いてはいないのですが、
公式site、公式Youtubeの動画を参考にまとめてみました。

#以下、まとめ。
>**Your new favorite design tool.**
>Framer X has all the features you need to draw everything from custom icons to intricate illustrations. Fine-tune your designs with our advanced path editor, export anything from your canvas, and more.

これまでは、Sketchで外観を作り込んで、prototyping toolにimportが多かったのですが、
Framer X単体でも作り込めちゃうよ、ということです。
screenshotを見ても、長方形、円、多角形、星まで描画できるみたいです。

>**The absolute best layout tools.**
Design responsive layouts like you never could before. Framer X is the only tool that automatically adapts your layout when you resize your canvas and lets you use flexible stacks to easily rearrange elements.

これも個人的にはすごいなぁと思います。Flintoで複数のplatformのprototypeを作るときは、
別ファイルとしてそれぞれ作っていますが、それが1つのファイルにまとめられるようです。

>**Everyday interactions, made in seconds.**
Create high-fidelity scrolling, paging, and screen-to-screen transitions with our powerful interactive tools—all you have to do is point and click.

Framerはcodeで作っていく、と先程書きましたがFramer XではGUI操作でinteractionを制御できるようです。これなら、designerが意図した動きを表現しやすくなりますね。

>**Interactive components for everything.**
Components in Framer X aren’t just any components—they’re fully interactive, reusable pieces that can include everything from live maps to image generators to video players.

各componentは単なる画像ではなく、userが操作、指定できる形になっているようです。
例では、iPhoneの電池残量を数値で指定しています。
あと、Sketchのsymbolのような機能があり、親要素を変更するとそれに従属する要素が変更されたり、
子要素にそれぞれ別の指定をしたりできる、ということです。

>**The world’s first in-app design store.**
Find everything from interactive design systems to icons and UI elements in the Framer X Store. Get a head start on your next project or publish your own components for the community.

Framer X Storeなるものがあるようで、store内で入手したcomponentを自由に利用できるというものです。
これまで、githubに公開してあるscriptを利用する、という方法はありましたが、software内で完結するのは
嬉しいですね。また、自分自身で作ったcomponentを公開・共有することもできるようです。

>**React meets design.**
Use actual React in your projects to create interactive components from scratch. Want more control? Create custom UI in the properties panel for your components.

これが今回の目玉かもしれません。CoffeeScriptの代わり(?）にReactを記述できます。
Youtubeで見る限りでは、IDEで変更を加えて上書き保存すると、Framer X側のpreviewにもrealtimeで
反映されるようです。Bracketsのrealtime previewみたいだなぁ、って勝手に思いました。

>**Exclusive features for teams.**
Keep your interactive design system completely in sync with a private component store. Get in touch to find out how Framer X can improve your team’s workflow and so much more.

Framer X Storeとは別に、privateな空間にcomponentを補完できるようです。
これをteam内で共有することで使いまわしが可能になります。

>**Design smarter.**
Framer X includes automated grouping, adaptive layouts, and flexible stacks so you can effortlessly arrange elements on your canvas without worrying about even distribution, alignment, or responsiveness.

特に気になったのが、drag&dropで要素の位置を変更できることです。
多くのdesign toolでlayer-panelではhierarchyの変更ができますが、
設計画面で同じことができるのは画期的だなと思います。

#最後に

ざっくりとFramer Xの特徴に触れてみました。
もっと細かい情報や公式siteや、beta版を実際に使ってみている方がYoutubeにいましたので、
そちらも合わせてご覧ください。
そういえば、~~出す出す言ってなかなか出していなかった~~ Invison Studioもearly accessが始まりましたね。
Framer Xは今秋にrelease予定とのことで、今後もprototype toolの動向から目が離せません。