次世代プロトタイピングツールのFramerXの紹介

February 18, 2019
非常に多くのプロトタイピングツールの中で、とりわけ独自のコンセプトを持ったFramerXというプロトタイピングツールを見つけたので紹介したいと思います。

Framer Xとは

FramerXはワイヤーフレームの構築、UIデザイン、ページトランジション、高度なユーザーインタラクション設計を可能とする次世代のプロトタイピングツールです。

とにもかくにもまずは以下のテンション高めなトレーラー動画を御覧ください。

めっちゃ凄くないですか?

動画で紹介されている様にFramerXを使うことで、本物のアプリケーションと見間違えるほど忠実度の高いハイファイプロトタイプを作成することが出来ます。

プロトタイプ作成ツールは、有名なところでいうとSketchInvison、また高度なインタラクションを実現できるツールとしてはprotopieorigami studioなど様々ありますが、FramerXがその中でも特異的なのはUIコンポーネントをReact.jsを使って作成できることです。

プロトタイピングツールでコードを書くの!?と初めて聞いたときは思いましたが、よくよく考えるとデザインと開発の業務はドンドンその役割が近づいており、Reactの豊富なエコシステムを利用すれば、よりすばやく本物に近いプロトタイプを構築できるため、合理的なアプローチだと思いました。

実際自分は普段エンジニアとしてコードを書いていますが、新規サービスを立ち上げる時はSketchでモックアップをつくり、その後開発をしながら細かいユーザーインタラクションを調整をしていたため、開発の後半フェーズになるまでUXの良し悪しを図ることが出来なかったので、FramerXには非常に大きな可能性を感じています。

そんなFramerXについてざっくり調査した内容を以下にまとめて紹介します。

デザインツール

FramerXのデザインキャンバスはSketchやXDと同じような見た目で直感的に操作することが出来ます。

Framer1

FramerXはデザインツールとして様々な機能を提供していますが、ここでは特に重要なレイアウト構築とインタラクティブツールの機能について説明します。

レイアウト構築

FrameXはレイアウトを直感的にレイアウトを設計・構築することに焦点を当てたフレームスタックという機能があります。

フレーム

FramerXは「フレーム」と呼ばれる部品を中心にレイアウトを構成します。フレームの中にUIパーツを配置したり、フレームを入れ子にすることで、デスクトップ、iOS、Androidなど様々な画面サイズに対してレスポンシブなレイアウトを構築することが出来ます。

試しにフレーム内に、検索バーのUIパーツを配置してみます。

Framer3

次に、フレームの横幅を引き伸ばしてみます。すると、先程配置したUIパーツもフレームサイズの変更に追従して横幅が引き伸ばされました。

Framer4

この様にフレーム内に配置したUIパーツは、幅やフレームの境界との距離を保ちながらレスポンシブに変化します。Sketchではアートボードの縦横幅を変化させても個要素は完全に独立してしまうので、画面幅の違いによるレイアウトの確認が難しかったのですが、FramerXでは簡単に実現できます。

スタック

スタックは更に一段階FramerXのレイアウトの効率化を実現します。

スタックは、複数のUIパーツをリスト上に配置するときに使用され、例えば以下の様にスタック上にUIパーツをリスト化して配置した場合、

Framer5

ドラッグアンドドロップで配置の変更を行うことが出来ます。

Gif1

これはビックリしました。これまでSketchでリスト上のUIの配置を変更しようと思ったら関係する全てのUIの配置を変更しなければならず非常に億劫な作業でしたが、FramerXではその苦労はありません。

インタラクティブツール

FramerXはインタラクティブなプロトタイプを作成するための機能をデフォルトで3つ提供しています。

リンクツール

1つ目はリンクツールです。リンクツールを使用すると、フレーム同士を接続して画面遷移を実現出来ます

フレームを選択した状態でLを押すと、カーソルの後ろに矢印が表示されます。これを他のフレームにドロップすると2つのフレームをリンクすることが出来ます。

下の図では、ボタンをクリックしたときに画面遷移するようにリンクツールを使用しています。

Framer6

リンクツールにはトランジションのオプションや、遷移の方向を指定することができ、応用すると以下のようにドロワーのUIも実現できます。

Framer2

スクロールツール

スクロールツールを使用すると、フレーム内にスクロール可能領域を作成出来ます。作成したあと、コネクタを使用してスクロール領域を任意のフレームにリンクすることで、スクロール領域内のコンテンツが反映されます。

Framer7

ページツール

ページツールを使用すると、フレーム内にスワイプ可能なコンテンツ領域を作成出来ます。作成したあと、コネクタを使用して複数のフレームにリンクすることで、スワイプ可能な領域内のコンテンツが反映されます。

Framer8

以上が、FramerXのデザインツールの主な機能です。Sketchと比較して画面レイアウトの構築のしやすさや、インタラクション部分の表現の幅の点で明らかに優れていることがおわかりかと思います。

コンポーネント

それではいよいよ、FramerXの最も特異的な機能であるコンポーネント機能を紹介します。

FramerXでは、ボタン、画像、スライダー、トグル等のUIコンポーネントをスクロール、クリック、移動、そして入力処理など実際のアプリケーションで起きる全てのイベントに対してインタラクティブにすることが出来ます。

FramerXではデザインコンポーネントコードコンポーネントの 2種類の方法でコンポーネントを作成することが出来るため、それぞれについて紹介します。

デザインコンポーネント

デザインコンポーネントは、キャンバス内の任意のフレームをコンポーネント化することで、再利用可能なUIパーツにすることが出来ます。

以下はボタンのフレームをコンポーネント化した例です。このコンポーネントをマスターコンポーネントと呼びます。

Framer9

また、コンポーネントパネルから作成したコンポーネントをキャンバスにドラッグアンドドロップしたり、マスターコンポーネントを複製すると、そのコンポーネントのインスタンスが作成されます。

Framer10

ここで、マスターコンポーネントのプロパティに変更を加えると、作成された全てのインスタンスに変更が反映されます。

Framer11

さらに、各インスタンスのプロパティをオーバライドさせてそれぞれのインスタンスをカスタマイズすることが出来ます。

Framer12

この様に、デザインコンポーネントはSketchで言うところのシンボルの様にUIパーツの再利用を効率化します。

コードコンポーネント

いよいよ、FramerXの最も重要な機能のコードコンポーネントについて紹介します。

今回は、ボタンをクリックすると数値がカウントアップされるコンポーネントを作成する過程でコードコンポーネントについて紹介しようと思います。

まずは、コンポーネントパネルからコードコンポーネントを作成します。

Framer13

コードコンポーネントを作成すると、エディタが起動し自動生成されたコンポーネントのコードが開かれます。この時に起動されるのはデフォルトでVCode、または好みのエディタを設定することが出来ます。

Framer14

FramerXはTypescriptをサポートしており、Reactコンポーネントやユーティリティ関数などは全てTypescriptで記述します。

それでは、早速Counterコンポーネントを作成します。

import * as React from "react";

interface State {
  count: number;
}

export class Counter extends React.Component<{}, State> {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  countUp = () => {
    this.setState(state => ({
      count: state.count + 1
    }));
  };

  render() {
    return (
      <div style={wrapperStyle}>
        <div style={countStyle}>Count Number : {this.state.count}</div>
        <button onClick={this.countUp} type="button" style={buttonStyle}>
          Count UP
        </button>
      </div>
    );
  }
}

const wrapperStyle: React.CSSProperties = {
  alignItems: "center",
  background: "#FEFEFE",
  display: "flex",
  height: "100%",
  width: "100%",
  flexDirection: "column",
  justifyContent: "center",
  padding: "20px",
  textAlign: "center"
};

const countStyle: React.CSSProperties = {
  color: "red",
  fontSize: "18px",
  fontWeight: "bold",
  marginBottom: "20px"
};

const buttonStyle: React.CSSProperties = {
  background: "blue",
  borderRadius: "6px",
  color: "white",
  fontSize: "18px",
  fontWeight: "bold",
  padding: "20px"
};

そして作成したファイルをセーブしてFramerXのキャンバスに戻ると、先程コードを書いたコンポーネントが表示されました

Framer15

早速プレビューを起動して動作確認してみると、見事にボタンをタップしたらカウントアップされることを確認できました。感動!!!

Gif3

このままでも十分すごいのですが、ReactコンポーネントにpropertyControlsというクラス定数を定義すると、FramerXのプロパティパネルから直接Reactコンポーネントに値を渡すことができるようになります。

先程作成したコンポーネントを以下の様に修正します。

import * as React from "react";
import { PropertyControls, ControlType } from "framer";

interface State {
  count: number;
}

// プロパティパネルで設定された値がpropsとして渡される
interface Props {
  buttonColor: string;
}

export class Counter extends React.Component<Props, State> {

  // 省略...
  
  // デフォルトのプロパティ値を指定
  static defaultProps = { buttonColor: "blue" };
  
  // ここでカスタムプロパティの定義
  static propertyControls: PropertyControls = {
    buttonColor: { type: ControlType.Color, title: "ButtonColor" }
  };

  render() {
    return (
      <div style={wrapperStyle}>
        <div style={countStyle}>Count Number : {this.state.count}</div>
        <button
          onClick={this.countUp}
          type="button"
          style={{ ...buttonStyle, background: this.props.buttonColor }}
        >
          Count UP
        </button>
      </div>
    );
  }
}

// 省略...

そしてFramerXのキャンバスに戻り、Counterコンポーネントを選択してプロパティパネルを見ると、ButtonColorというプロパティが追加されています。そして、カラーピッカーで色を変更すると、Counterコンポーネントのボタンの色がそれに合わせて変更されるようになりました。素晴らしい!!!

Gif4

FramerXのコンポーネントはReactコンポーネントとしてレンダリングされるので、npm経由で公開されたReactライブラリをそのまま使用出来たり、styled-components等の便利なフレームワークを使用することもできるため、すばやくリッチなUIコンポーネントを作成することができるのです。

コンポーネントストア

またこれだけでも十分すぎるぐらいすごいのですが、FramerXはコンポーネントのストアがあり、世界中のデザイナの方々が作成した超絶リッチなコンポーネントをすぐさま使用出来ます

具体例としてYoutubePlayerコンポーネントを使ってみることにします。

Storeのメニューから、YoutubePlayerコンポーネントを選択してインストールします。

FramerX16

Framer17

インストールが完了すると、コンポーネントパネルにYoutubeコンポーネントが追加されます。

Framer18

追加されたコンポーネントをフレームに追加してプレビューで確認してみると、見事YoutubePlayerが動作していることが確認できました!

Gif5

この様に自分でコンポーネントを記述するだけではなくて、ストアに公開されているコンポーネントを使いながらすばやくプロトタイプを構築できるのがFramerXの最大の魅力とも言えます。

おわりに

いかがでしたでしょうか?あのテンション高めのトレーラー映像の印象に反さないレベルで、FramerXの可能性を感じることが出来たのではないかと思います。触ってみてわかりましたが、これはプロトタイピングツールなんてものではなくて、プロトタイプ開発に特化したIDEですね。もうSketchには戻れないなぁ。

FramerXは有料のツールで記事執筆時点(2019/02/18)では月$15ですが、14日間の無料トライアル期間があるため、気軽に体験することが出来ますので、本記事を見て気になった!という方はぜひとも試してみてください。

ちなみに、FramerXの使い方をもっと勉強したい方は、公式のドキュメントや、公式がおすすめしているビデオコースがあるのでそちらもチェックしてみてください。