noah.plus

デザインのための統合開発環境 Framer X を試す（Design Component、Code Component）

2018-09-02

前回の記事に引き続き、Framer X を試していく。今回は Component について深掘りする。

Design Component と Code Component

Framer X には2種類のコンポーネントが存在している。

  • Design Component

    • キャンバス上でグラフィカルに編集できるコンポーネント。GUIから実装できるような基本的なインタラクションを簡単に実装できる。

  • Code Component

    • コードからのみ編集可能なコンポーネント。Code Component とはつまりReactコンポーネントのことなので、jsx（typescriptの場合は tsx）を使ってコンポーネントを作っていける。

Design Component

design-component-sample

右クリック → Create Design Component （ショートカット: Command + K）

キャンバス上のあらゆる Frame は Design Component にすることができる。Design Component は１つの「マスター」をもとに無数の「インスタンス」を生成することができる。

インスタンスでマスターの内容を上書き

例えば以下のような、アバターと名前を持った Design Componentがあるとする。

マスターのコンポーネントではシルクハットの John Smith という人物になっているが、インスタンスのコンポーネントで全く違ったアバターと名前を設定したい場合どうすればいいか。

design-component

これは簡単で、右側のパネルからマスターのコンポーネントの「アバター」と「名前」をコンポーネントのプロパティとしてチェックすればOK。

overrides

コンポーネントのインスタンスを生成してみると、先ほどチェックをつけたプロパティが個別に変更可能に。

overrides-instance

このように、変更に強いコンポーネントを簡単に作れてとても便利。

overrides-finish

Code Component

左のメニューから Component タブを選択 → New Component → 名前を設定し Create and Edit

Code Component を作成すると、Reactコンポーネントの雛形が生成され、エディタが開かれる。

code-component-create

Code Component の雛形は以下のようになっている。

code-component 

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

// スタイルを定義
const style: React.CSSProperties = {
    height: "100%",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    textAlign: "center",
    color: "#8855FF",
    background: "rgba(136, 85, 255, 0.1)",
    overflow: "hidden",
};

// propsの型を定義
interface Props {
    text: string;
}

export class CodeComponent extends React.Component<Props> {

    // propsの初期値を定義
    static defaultProps = {
    text: "Hello World!"
    }

    // Framer X のプロパティパネルに表示する項目を定義
    static propertyControls: PropertyControls = {
    text: { type: ControlType.String, title: "Text" },
    }

    render() {
    return <div style={style}>{this.props.text}</div>;
    }
}

ベータ版では TypeScript のみサポートしているが、正式リリース時には JavaScript (ES6) もサポートするとのこと。

Design Component のインポート

先ほど Design Component の項で作成した User コンポーネントを Code Compoent 内で使ってみる。

user

User コンポーネント

デザインコンポーネント: User を内部で使用するコードコンポーネント: Test を作成すると以下のようになる。

import * as React from "react";
import { User } from "./canvas";

export class Test extends React.Component {
  render() {
    return <User Name="Code" />;
  }
}

2行目の import { User } from "./canvas"; のように、Design Component は ./canvas からインポートすることができる。インポートしたコンポーネントは通常のReactコンポーネントと同様に props を渡すことができる。（上のコードの Name="Code" の部分）

Test をキャンバス上に配置すると以下のようになる。もともとの User コンポーネントと見かけ上の違いはない。

import-design-component

アプリ内コンポーネントストア

store

これまで Design Component や Code Componentを作る方法を見てきたが、必要なコンポーネントをすべて自力で作る必要はもちろんない。

Framer X には自作のコンポーネントを公開したり、公開されているコンポーネントを利用するための環境がアプリ内に用意されている。アプリ内でエコシステムが完結しているというのは他のデザインツールにはないアドバンテージである。

まとめ

Framer X のコンポーネントは非常に強力。将来的には、外部ライブラリも使えるようになるらしい。

すべてのコンポーネントがReactベースなので、特にフロントエンドエンジニアにはとっつきやすい。全体をDesign Component で素早く作り、必要に応じて複雑な部分を Code Component で作り込んでいくというやり方はかなりスマートだと感じた。

もちろん Code Component をゴリゴリ書かなくてもデザインツールとして十分な機能を備えているので、コードを触らない人にも優しいツールになっている。

最近いろいろなデザインツールが出てきているが、これからも Framer X を応援していきたい。

noah.plus