Framerは、人気のUIデザインツールの1つです。日本でのシェアはあまり高くないかもしれませんが、機能が豊富で非常に魅力的な点も多いです。
そんなFramerですが、先日ブラウザ上で動作するWeb版が登場しました。ブラウザ上で動作するUIデザインツールと言えば、真っ先に思いつくのがFigmaです。
今回は、改めてFramerの特徴と、Figmaとの違いについてまとめてみました。
INDEX
Framerとは
Framerは、もともとプロトタイピングツールとして開発が進められてきたツールです。2018年に「Framer X」という名称で、現在のようなUIデザインツール＋プロトタイピングツールという形のツールとなりました。
現在では、公式サイト上で「Framer X」という表記は無くなっており、名称は「Framer」とされているようです。
FigmaやSketch、Adobe XDのようにUIデザイン制作から、プロトタイプの作成まで一貫して行うことができ、アプリやWebのUIデザインに活用することができます。
Framerの特徴
Framerは他のUIデザインツールやプロトタイピングツールと比べてどのような特徴があるのでしょうか。
大まかなポイントを整理してみました。
Reactのコードでコンポーネントを書ける
Framerの一番大きな特徴の1つが、Reactのコードを書いてコンポーネントを作ることができるという点です。
Reactが書けるフロントエンドエンジニアであれば、ボタンをタップした時のアニメーションや、入力フォームの作成など、様々なコンポーネントを作ることができます。
propsやstateを使ったり、デスクトップ版であればnpmのパッケージを利用することもできるので、拡張性にも優れています。
より実際のプロダクトに近いプロトタイプを作ることができるため、他のUIデザインツール、プロトタイピングツールよりもリッチなプロトタイプを作ることができます。
表現の幅が広い
Framerは、UIデザインツールの中でできることが多く、表現の幅が広いという特徴があります。
例えば、他のUIデザインツールでは一般的ではないが、Framerならできるという機能には、下記のようなものがあります。
- 動画の埋め込み
- Youtube動画の埋め込み
- トグルボタンなど動的なコンポーネント
- アプリのフッターに配置されているようなタブメニューの実装
- Reactのコードによるコンポーネントの作成
上記のように、プロトタイプの中で使えるコンポーネントの自由度が高く、より表現豊かなプロトタイプを作ることができ、これはFigmaやSketch、Adobe XDと比べてFramerが優れている点です。
新しくWeb版が登場！
先日、FramerのWeb版が登場し、ブラウザ上でUIデザイン制作を行えるようになりました。
また、Web版では、リアルタイム共同編集を行うことができ、Figmaのように同時に1つのデザインファイルを編集することができるようになっています。
ただし、デスクトップ版とは機能に差分があり、公式の説明によると、下記のような違いがあります。
- Web版のみ利用できる機能
-
- ライブコラボレーション
- コメント機能
- Figmaからのインポート
- プロトタイプの表示
- プロジェクトダッシュボード
- デスクトップ版のみ利用できる機能
-
- Webへのエクスポートとプレビュー
- npmパッケージのインストール
- Gitのインテグレーション
- アセットのエクスポート
- ローカルフォントの使用
この説明によると、Web上で作ったデザインとデスクトップアプリで作ったデザインはまったく別物の扱いのようですね。
ちなみに、デスクトップ版のアプリを利用するには月額20ドルのProプランへの登録が必要で、無料プランではWeb版のみ利用可能となっています。
FigmaとSketchのデザインファイルをインポート可能
Framerは、FigmaやSketchで作成したデザインファイルをインポートして、Framer上で編集することができます。
そのためツールの乗り換え時も過去に制作したUIデザインを利用できるので、スムーズに移行することができます。
また、FigmaやSketchでデザインを制作して、必要な場合にFramerでReactのコードを書いて拡張するという使い方も便利そうです。
FramerとFigmaの違い
FramerにWeb版が登場したということで、同じくWeb版のアプリケーションを提供しているFigmaとの違いについて調べてみました。
Framerの方が優れている所
Framerの方が優れていると考えられる点には、下記のようなものがあります。
- Reactのコードが書ける
- 上記でご紹介したとおり、FramerはReactでコードを記述して、自由度の高いプロトタイプを作成することができます。
- 自由度はFramerの方が高い
- 提供されている標準コンポーネントの種類や、コードによる拡張などFramerの方が自由度が高く、表現の幅が広いプロトタイプを作ることができます。
Figmaの方が優れている所
次に、Figmaの方が優れている点には、下記のようなものがあります。
- 無料でほとんどの機能が使える
- Figmaは無料プランでもバージョン管理（過去30日間）や、デスクトップ版のアプリを利用することができるため、1人で利用する分には無料プランでもほとんど困ることはありません。その点、Framerはバージョン管理が有料プランのみ利用可能だったり、デスクトップアプリも有料プランのみ利用可能なので、無料プランでできることの幅はFigmaの方が高いです。
- 人気はFigmaの方が圧倒的に高い
- Figmaは、日本国内でも最近かなりシェアを高めていて、実際の制作現場でFigmaを利用している所の数も増えています。利用者の数が多いと、複数人でUIデザインを制作する場合にもスムーズだったり、ツールの学習コストを抑えることができるというメリットがあります。
FramerとFigmaはどちらを選ぶべき？
一概に、FramerとFigmaの優劣を付けることはできませんが、UIデザイン制作だけで考えるとFigmaを使う方が良さそうだけど、リッチなプロトタイプを作りたければFramerの方が良さそう、といった所でしょうか。
リアルタイム共同編集機能に限れば、すでにXDでも利用することができ、Sketchも2020年中にリリースされる予定なので、今後のUIデザインツールの標準機能となっていくでしょう。
Framerは、国内での利用率こそあまり高くないものの、ツールとしての完成度はかなり高いので、非常に有用なUIデザインツールの1つだと思います。
