Intro to Framer X

Framer Xのハンズオンmeetupに参加してきました。

featuedimage

7 月 21 日に Intro to Framer X(for beginners) に参加してきた記録です。


個人的にかなり使い勝手が好きでよかったけど Sketch から乗り換えるかと言われるとまだ怪しい。


公式サイト

framer.com


Framer X と Sketch の比較

Framer X Sketch
Price $12(USD)/Mo(個人プラン) $99(USD)/1 year of update
Live Preview
Cloud Share
Animation

今回作ったプロトタイプ

  • ホーム画面
  • ハンバーガーメニュー(引き出しのアニメーション有)
  • スライドショー(アニメーション有)
  • レコメンデーション(横スクロール有)

demo

Packages

豊富なアドオンがありサクッとインストールしてすぐ使えます。

package

今回使ったものは以下:
  • iPhoneX Kit

    iPhoneX の UI キット。画面上部のステータスバーや画面下部のメニューバーはここから取ってきました。

  • Unsplash

    Sketch にあるのと似たような感じ。Unsplash のイメージをランダムに入れてくれる。

  • Youtube

    Youtube 動画埋め込み用。プレビューすると実際にプレイヤーが表示され再生もできる

    youtube

  • Icon Generator

    各種アイコンサービスからアイコンを使える。メニューアイテムに使用。

他にもたくさんパッケージがあるようで、いろいろ便利っぽいです。


Frame という概念

Frame というのは簡単に言うとどのデザインツールにもよくある四角い箱やら丸やらを作るツールなんですが、使ってて驚いたのが、勝手に要素が入れ子になること

⌘ + Gとかで要素をグルーピングしてコンポーネントごとに整理するっていうのはどのデザインツールでも行うんだけど、Framer の場合その作業が不要でした。

Frame を作ってその中で例えばテキスト入力などを行うと、自動的に その Frame の中に入れ子構造でグルーピングされる。

Frame のなかにさらに Frame を作る場合は GDrawing Modeに入ることでその中に作った要素がグルーピングされる。


以下画像は Drawing Mode で再生ボタンを作っているところ

button

このあたりの使い勝手は非常に良くて、デザインの時点でコンポーネント指向がかなり簡単に実現されている印象。

Component

⌘ + Kで Frame をコンポーネント化しインスタンスを生成することができます。

こちらは Sketch やイラレでいうシンボルと同等の機能なので特筆すべきことはなし。

強いて言えばコンポーネントを作成するとサイドバーに登録されるので他のアプリよりも使いやすかったかもしれない。

Stacks

おそらく Framer の特有の目玉機能。

スタックの中にまとめられた要素はdisplay: flex;の要領でうまいこと配置してくれます。

スタックエリアを作り stack1

要素を放り込んで並び方を指定して stack2

使いたい場所に移動する(ここでは Overflow: hidden;を指定しています) stack3

もちろんオプションで space-around や space-between などの flex 用のプロパティを変更できます。

個人的にこれはめちゃくちゃ使いやすかった。

Page

ページ機能はスライドショー部分で使いました。

スタックと同じような手順でページエリアを作り、その中に入れたい Frame を放り込んでいくといい感じに並べてくれて、アニメーションもオプションから選んでつけることができる。超簡単。

これもシンプルで使いやすかったので高評価。

Link

クリックしたら画面遷移やメニューの開閉と言った動作を実装することももちろん可能。

ただこの辺は XD のプロトタイピングとほとんど同じなので割愛。

Live Preview

Framer X には Live Preview機能がありリアルタイムでデザインを確認・シェアできる。

QR コードも発行してくれるのでスマホでも簡単に開ける。


ただ、Framer X を閉じると共有リンクも切れてしまうのが痛い。

Sketch Cloud の場合だとクラウド上にアップロードすれば PC を閉じても共有が続けられ、フィードバックなども残せて便利なんだけど、Framer X にはそれはないっぽい。(もしかするとプラグインとか探したら追加できるのかも?)

共有についてはやっぱり Sketch Cloud が今の所一番理想系かな。

結論

まだ数時間しか使っていないので全容は理解できていないかもしれないけど、とにかくシンプルで使いやすかった

アニメーション周りのプロトタイプの実現で魅力的ではあったけど、わざわざ月額サブスク購入して乗り換えるほどでは無いかなという感じ。

あと細かいところだけど真っ白 UI 苦手なのでダークモードが欲しい