🐴

デザインツール「Framer」からReactへComponentとしてimportできる新機能handshakeのレビュー

2021/10/23に公開

Framer

FramerはXDでもFigmaの様なデザイン・プロトタイピングツールです。国内ではまだまだ採用事例は少なそうですが、Webフロントエンド…特にReactを採用している場合においてはかなりUIデザインとフロントエンド実装の連携が取りやすいツールであると言えます。

そんなFramerに「Handshake」という機能が追加されました（2021年10月現在ではAlpha版）。
これは、Framer上で作成したコンポーネントを既存のReactプロジェクトにimportできる機能です。

Framerってなに？

https://www.framer.com/

Framerは内部的にはReactを活用しています。Framer上でデザイナーがベクターなどを活用して作るComponentをSmart Component（= Design Component）と呼びます。これはFigmaやAdobe XD、SketchなどのComponentやSymbolと同じものです。これらツールでできることは大概できますし、これらのプロジェクトをimportすることも可能です。

また、デザインツールでありながらCode Componentという形でReact Componentを追加できる仕組みを持っています。これでより詳細なインタラクションや状態を持つComponentをFramer上に置くことができます。

また、Framerプロジェクト上に外部のpackageをimportできる仕組みももっています。
自社の製品のReact Componentをリポジトリなどで管理したとして、それをFramerの自身のプロジェクトに npm install することで加えることも可能です。
これによる恩恵は、デザインツールで作成したComponentとそれを参考にフロントエンド上で実装したComponentが時間に比例して乖離していくことを防ぐことも可能ということです。

尚、ComponentをGithubのリポジトリで管理することもできますが、bitを使って共有する方法もあります。

Handshake機能でReact上にデザイナー作成のComponentを載せられる！

これまでのFramerも結局はFigmaやAdobe XDなどと同様にツール上でデザイナーがSmart Componentと画面を作成してプレビュー機能を使ってプロトタイピングを行わなければなりませんでした。

またはエンジニアがHandoff（CSSなどを書き出す機能）などを使ってReact Componentを実装していきはじめて実際のアプリケーションに載せる形で実行するしかありませんでした。他のツールでもこのフローは変わりません。

しかし、FramerはこのHandshake機能によりComponent単位でURLが発行され、それをJsx/Tsxファイルにimportすることが可能になりました！

これによりデザイナーの作成したSmart Componentを実際のアプリケーションにimportすることで検証がより実際のアプリケーションの中でできるようになります。

しかも、Smart ComponentにVariant（マウスイベントなどの状態別に設定できる）やpropsを柔軟に設定することもできます。またframer-motionによりインタラクションにアニメーションを簡単に追加できます。

実際に試してみる

1. Framer上でDesign Componentを作成する

今回は簡単なインタラクションを含めることでよりimportされた感がわかる様にするため、Light/Dark Modeの切り替えができるカード型のComponentを作成してみます。

Componentの作成

画面上部のナビゲーションにあるComponentから適当なComponentを新規作成します。今回はSwitchDarkmodeというComponent名にしました。

ComponentにLight/DarkのVariantを設定

今回はLight ⇄ DarkとComponentをクリックすると切り替わるシンプルなものにしました。

FramerでもVariantが設定できますので、なにかしらUI的な状態を持つものを作る場合は、任意のVariantを追加することで色々なことができるようになります。hoverやclickなどのイベントも設定できますし、Transitionもease/springなど柔軟に設定できます。今回はspringアニメーションに設定しています。

Propsを設定する

propsでLight/Darkとそれぞれの背景色を変更できるようにComponentのFillプロパティにpropsで値を渡せるようにしています。

Screen(Page)を設定してComponentを配置する

左下のAssetsパネルからComponentをドラッグ＆ドロップして配置します。今回はStack（Flexレイアウトと同義）でラップして画面の上下左右の中央にComponentが配置できるようにしました。

Previewして動作確認

Previewの様子はYouTubeにアップしました。ま、タップ（クリック）すると切り替わるだけのシンプルなものです。特にみるほどでもないですがこんな感じで動きます。

https://youtu.be/Ss87Dep4I74

さて、ここまででFramer上での準備が整いました。実際のワークフローの場合はここまでをデザイナーが担当する形になるかと思います。

2. 開発環境側の準備

Framerで作成したSmart Componentをjsx/tsx上にimportするための準備をします。
必要なのは以下。

framer, framer-motionのpackageをインストール
TypeScriptの場合はd.tsファイルで型定義が必要
Next.jsの場合は、next.configファイルでdynamic importに関するオプションが必要

framer, framer-motionのpackageをインストール

npm install framer@beta framer-motion@rc

TypeScriptの場合はd.tsファイルで型定義を追加

declare.d.tsなどの型定義ファイルを作成して以下を追記

declare module "https://framer.com/m/*"

Next.jsの場合は、next.configファイルでurlImportの設定を追加

Next.jsの場合、そのままでは外部dynamic importは利用できません。以下の設定を追加します。

module.exports = {
    experimental: {
        urlImports: [
            "https://framer.com/m/",
        ],
    },
}

3. Smart Componentをjsx/tsxにimportする

任意のSmart ComponentをFramer上で選択して、Handshakeボタンをクリックするとimportする際のコードサンプルとimport先のURLを取得できます。

// コピーされるimport先のURL
https://framer.com/m/SwitchDarkmode-n9HL.js@NXeZ8ihO62YTo61lZYbw

@以降はバージョンハッシュなので常に最新を取得するには以下のURLを指定してください。

https://framer.com/m/SwitchDarkmode-n9HL.js

ここまでできれば後は任意のjsx/tsxファイルにimportするだけです。

import "./styles.css";
import SwitchDarkmode from "https://framer.com/m/SwitchDarkmode-n9HL.js";

export default function App() {
  return (
    <div className="App">
      <SwitchDarkmode />
    </div>
  );
}

※下のcodesandboxは公式のサンプルです。