Framerにデザイン機能が追加。デザイン・アニメーション・インタラクション・共有が完結したツールに

更新日:2017年12月21日

もともとは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。このままレガシー化していくのか…?

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

この記事が気に入ったらいいね・フォローお願いします!

『デザインツール』の記事