もともとはJavaScriptでアニメーションを作成できるだけだったFramerが、どんどんピボットした結果…ついにデザイン・アニメーション・インタラクション・共有までを1つのアプリ内で完結させるところに行き着いたようです。

デザイン機能が追加

framer.com

Design everything. Better.

https://framer.com/features/design/

Create everything from pixel-perfect icons to high-fidelity designs, all in Framer.

これまで画面のデザインは他のツールで…という感じだったFramerですが、今回のアップデートでデザイン機能が追加されました。

要素を追加すると、自動的に親要素・子要素の関係を生み出してレイヤー構造をわかりやすく整理してくれたり、数値をコントロールすることで複雑な図形が簡単に作れるなど、かゆいところに手が届きそうな感じ。

またエクスポート機能もしっかりと備わっているため、画像の書き出しやCSS・SVGコードの出力が容易に。

アニメーションも簡単に

Framerには「コード」という機能があって、画面遷移やオブジェクトのアニメーションなどをコードで書くことで実現していましたが、最近はワンクリックでアニメーションを追加してコードで細かく直すという感じになっているので、コードが苦手な人にも良さげ。

一度無料トライアルが終わってしまった人も…また無料で使える！

今回のアップデートで、無料トライアルがリセットされたみたいです。14日間無料で使えるようになっています。

またTwitterでつぶやく、チュートリアルビデオを見る、Facebookグループに入るの3条件をクリアすれば1年間無料になるっぽい？（試してないです

それにしてもAdobe XDやInVision Studio、そしてFramerには「デザイン・プロトタイピング・共有」が備わっているのに、Sketchにはプロトタイピングが…ああ、どうなるのでしょうSketch。このままレガシー化していくのか…？

書き手：小島 芳樹 Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。 Twitter： @yoshikikoji