#　はじめに

私は某大学の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で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は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の動向から目が離せません。