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

ソフトウェア開発

2019/02/18 01:00

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

Framer Xとは

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

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

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

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

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

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

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

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

デザインツール

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

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

レイアウト構築

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

フレーム

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

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

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

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

スタック

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

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

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

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

インタラクティブツール

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

リンクツール

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

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

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

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

スクロールツール

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

ページツール

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

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

コンポーネント

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

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

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

デザインコンポーネント

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

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

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

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

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

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

コードコンポーネント

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

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

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

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

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のキャンバスに戻ると、先程コードを書いたコンポーネントが表示されました。

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

このままでも十分すごいのですが、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コンポーネントのボタンの色がそれに合わせて変更されるようになりました。素晴らしい!!!

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

コンポーネントストア

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

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

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

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

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

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

おわりに

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

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

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