LOGzeudon with はてなブログ

名古屋で働いているWebデザイナーのブログです

JavaScript全然わからないけどFramerXを使ってみたら楽しかった

JavaScript全然わからないけどFramerXを使ってみたら楽しかった

Design Tools Advent Calendar 2018 16日目の記事として登録させていただいております。


FramerX、リリース直後に購入したのに今までほとんど触れていなかったので、この機会に少し試してみました。
ちなみに私はReactどころかJavaScript自体全然わからないです👼

購入した理由

初めてFramerXを知った時に最もインパクトを感じたのはこのStack機能です。

私にとっての「グラフィックデザインツール」の領域を完全に超えていました。

予めアートボード内に領域を定め、そこへコンポーネントを配置しパズルのように組み合わせることで、プロトタイプ機能も使いつつ様々な文言やレイアウトのパターンを手軽に検証できるとしたら。コンポーネントを中心とした開発手法にもマッチしているだろうし、FramerXは自分の性格にかなり向いてるのではないか?という期待を持っていました。

あと、セール価格だったのに釣られてリリース直後に即決購入していました。(React書けないからどうのこうのみたいなのはあまり考えていませんでした)

ちょっと試してみた

とりあえず触ってみようということで、Bootstrapのサンプルページのトレースに取り掛かりました。

FramerXはその名前の通りというか「Frame」を中心に要素を構成していくようです。まずnavbarsidebar-stickymainと名前をつけてそれぞれ配置しました。

f:id:rokuzeudon:20181217001053p:plain

早速navbarの中にテキストや検索欄などを配置します。Frameの上に要素を配置すると勝手にレイヤーも階層化してくれます

f:id:rokuzeudon:20181217001208p:plain

続いてsidebar-stickyです。アイコンが必要ですが、せっかくなので左メニュー(アイコン)の上から4番目「Store」からFont Awesome用のコンポーネントを探してみました。

f:id:rokuzeudon:20181217001409p:plain

今回は一番人気が高い、David Hellmannさんが作成したコンポーネントを選んでみました。
D&Dで画面に配置でき、右カラムからアイコンや色など簡単に変更できるよう作成されていました。便利!

f:id:rokuzeudon:20181217001430p:plain

f:id:rokuzeudon:20181217001436p:plain

さて、メニューのリストは共通のスタイルですのでComponentにします。最初にComponent化したレイヤーがmasterとなり、これを複製してラベルや色をオーバーライドできます。

f:id:rokuzeudon:20181217001655p:plain

さらにStackを活用してみます。まず領域を設定します。

f:id:rokuzeudon:20181217001742p:plain

そこへ先程作成したリストのレイヤーをまとめてD&Dします。

f:id:rokuzeudon:20181217001803p:plain

おっと、思い通りになりませんでした。右カラムにてStackのDirection設定を縦並びにする必要があります。さらに、DistributionやGapの値を変えるとこうなりました。

f:id:rokuzeudon:20181217001908p:plain

Stack内のメニュー要素を、後からでも自由に並べ替えることができるようになりました!

f:id:rokuzeudon:20181217005832g:plain

ちなみに、Distributionの設定はflexに対応した Start / End / Center / space-between / space-around / space-evenly から選べて、alignも設定可能です。

f:id:rokuzeudon:20181217002026p:plain

最後にmainです。サンプルページではグラフが使われており、これもStoreで探してみました。

f:id:rokuzeudon:20181217002116p:plain

今回はComponent「Nice bars」を試してみます。 D&Dで曜日軸の棒グラフが配置できます。

f:id:rokuzeudon:20181217002213p:plain

これをそのまま拡大するとこうなります。

f:id:rokuzeudon:20181217002234p:plain

ちょっとイマイチですね。先程のFont Awesome用Componentのように右カラムのパラメータをいじって自由にスタイル設定できないようで、この辺りはComponentの作りかた次第っぽいです。

さて、Storeから持ち込んだComponentは、右クリックでコードをコピーできます。

f:id:rokuzeudon:20181217002425p:plain

試しに、新しく自分用のコンポーネントとして登録してみます。

f:id:rokuzeudon:20181217002449p:plain

「Create and Edit」ボタンのクリックと同時に、PCに入っていたVS Codeが開きました。

f:id:rokuzeudon:20181217002556p:plain

中身はサンプルコードなので、先程コピーした「Nice bars」のコードを貼り付けて保存すると、自分のコンポーネント欄に新しく追加されました。

f:id:rokuzeudon:20181217002643p:plain

コードには色や文字サイズの指定も書かれていました。 試しにそれを書き換えて保存すると、配置していたコンポーネントにも反映されました!

f:id:rokuzeudon:20181217002713p:plain

…今回試したのはここまでです。

感想

WebサービスやアプリのUIデザインツールとしては普通に使いやすい印象です。

ただ、Adobeなど他のデザインツールからの乗り換えとなると学習コストがあると感じます。機能やショートカットの違いはもとより、「Frame」の配置・設定を中心としたレイアウトが特徴的といいますか、UIを「設計/実装」しているという感覚が強いです。

もし自由に配置してあとから調整しよう!的な使い方をするとして、自動でFrameを階層化してくれる機能などが邪魔になりそうです。企画などプロジェクトの初期段階では、手書きのラフなり他のスタイリング寄りなツールの方がスムーズそうな気はしました。

しかしまだまだ機能を試しきれてないので、もっと使い込んでみたいところです。

参考サイト

FramerXについてもっと詳しく書かれている記事がたくさんありますので、興味のある方はぜひそちらをお読みください。