Framer

新Framer発表。新しい機能は?基本的な使い方は?どういう風に使えばいいの?

2017-6-1

先日から予告されていた新Framerが日本時間の6月1日午前0時に発表されました。
Framer
ちょっとあまりに色々変わりすぎて追いきれていないので、この記事は随時更新していきます!

新しい機能は?

FramerはもともとJavaScriptでアニメーション付きのプロトタイプが作れるツールでしたが、今回のアップデートで「An all-in-one design workflow.」というコンセプトに生まれ変わりました。デザインからインタラクションの作成、チームメンバーへの共有までを一気通貫でできるようにしたという感じ。Adobe XDが目指しているものに近いのかな?

究極のレスポンシブデザインツール
– アートボード・レイヤーの作成
– 図形の挿入や操作
– 高度なテキストツール
– レイヤーの自動ネスト
– アイコン管理パネル

レイヤーの管理
– レイヤースタイリングパネル
– カラーピッカー
– アライメント調整
– ボーダーコントロール
– レイヤークリッピング

オートレイアウト化

インタラクションデザイン
– オートコードによるビジュアル編集
– コードスニペット
– スマートオートコンプリート
– Sketch・Figma・Photoshopのインポート

チームでの活用に必要な機能
– セキュリティを意識した共有機能
– 電子メールでの招待やアプリ内通知
– GitHubのようなバージョン管理

基本的な使い方は?

新Framerの基本機能 デザイン編
新Framerの基本機能 コード編(執筆中)
新Framerの基本機能 コラボ編(執筆中)

どういう風に使えばいいの?

こちらも執筆中。どんなチームで、どうやって活用していけば良さそうなのか書く予定。

発表されてみたら、思った以上のボリュームだったので全然触りきれてません…。
ちょっとずつ触ってみて、コツコツ使い方とか書いていきたいと思います。

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