デザインツール「Framer」の「Handshake」機能をNext.jsで試してみた

大高大輔

2021.12.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。

「Framer」というデザインツールには、デザインしたコンポーネントをそのままコードにインポートできる「Handshake」という機能があります。（2021年12月現在はベータ版）

今回は、公式サイトや以下の記事を参考にさせていただきつつ実際に「Handshake」機能をNext.jsで試してみたいと思います。

前準備

まずは、先にNext.jsのプロジェクトを以下のように作成しておきます。今回は「hello-framer-handshake」というプロジェクトにしました。

% npx create-next-app@latest --typescript
Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y) y
✔ What is your project named? … hello-framer-handshake
Creating a new Next.js app in /foo/bar/hello-framer-handshake.
(...snip...)

念の為、一度起動して問題がないことを確認しておきます。

% cd hello-framer-handshake
% yarn dev
yarn run v1.22.17
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

ちゃんとWelcomeページが表示されました。

Framerでデザインしてみる

Framer初心者なのですが、まずは思うがままに作成してみます。

画面上部の「Component」から新規のコンポーネント「sample」を作成します。

作成したら、画面上部の「Insert」から「Interface」いくつかそれっぽいものを配置・調整してみました。

コンポーネントの作成が終わったら、画面右上の「<> Handshake」ボタンをクリックして、「Copy Import」をクリックします。

すると、以下のようにimport文がクリップボードにコピーされます。（これは後で利用します）

import Sample from "https://framer.com/m/sample-XXXX.js@QNFGcIJvHDoiASqyg6VZ"

Next.jsプロジェクトでコンポーネントを利用する

デザインができたら、今度はNext.js側で利用してみます。

環境セットアップ

まずはマニュアルに記載がある通り、下記とおりframer@betaとframer-motionを追加します。マニュアルにはインストール対象にnextの記載もありますが、先程create-next-appでプロジェクト作成をしたので省いています。

% yarn add framer@beta framer-motion

インストールができたら、next.config.jsにurlImportsの記述を追加します。

next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  experimental: {
    urlImports: [
      "https://framer.com/m/",
      "https://framerusercontent.com/",
      "https://ga.jspm.io/",
      "https://jspm.dev/",
    ],
  },
};

コンポーネントを利用するページを作成する

環境セットアップが終わったら、コンポーネントを利用するページを作成します。

今回は以下のようなファイルを追加しました。import文は先程コピーしたものを貼り付けています。

pages/handshake.tsx

import Sample from "https://framer.com/m/sample-XXXX.js@QNFGcIJvHDoiASqyg6VZ";

export default function HandShake() {
  return (
    <div>
      <Sample />
    </div>
  );
}

動かしてみる

では、これで動かしてアクセスしてみます。

% yarn dev
yarn run v1.22.17
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000

新しくファイルを追加したので、http://localhost:3000/handshakeにアクセスします。

ちゃんとFramerで作成したコンポーネントが表示されています！

Warningメッセージについて

良い感じに表示できて満足ですが、ターミナルにいくつかのWarningメッセージが出ているようです。

Warning: Received `false` for a non-boolean attribute `font`.

If you want to write it to the DOM, pass a string instead: font="false" or font={value.toString()}.

If you used to conditionally omit it with font={condition && value}, pass font={condition ? value : undefined} instead.
(...snip...)
Warning: React does not recognize the `borderRadius` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `borderradius` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
(...snip...)
Warning: React does not recognize the `isMixedBorderRadius` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `ismixedborderradius` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
(...snip...)
Warning: React does not recognize the `topLeftRadius` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `topleftradius` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
(...snip...)
Warning: React does not recognize the `topRightRadius` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `toprightradius` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
(...snip...)
Warning: React does not recognize the `bottomRightRadius` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `bottomrightradius` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
(...snip...)
Warning: React does not recognize the `bottomLeftRadius` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `bottomleftradius` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

どうやらfontに関するものが１つと、propに関するものが6つ出ています。

importしたFramer側で生成されたコードを実際に見てみると、該当箇所が見つかりますが外側から対処はできそうに見えませんでした。こちらはベータ版のため発生している可能性もありますが、もし対応方法が分かったら追記したいと思います。

一旦は「Warning」なので大きな問題はないかなと思います。

まとめ

以上、デザインツール「Framer」の「Handshake」機能をNext.jsで試してみました。

実際のユースケースを考えると「テキストボックスにデフォルト値を設定したい」とか「プルダウンリストの値をAPIから取得して設定したい」とか色々あると思いますので、まだまだ実利用できるレベルまで使いこなせていませんが、かなり夢のある機能だなと思いました。

一方で、ソースコードの管理や運用の観点から「環境が分離する」（コードの一部がFramer上に存在する）ということが起きるのでアプリケーションのプロトタイプ作成などにHandshake機能をうまく活用して高速にプロト開発を行い、実開発には別の方法をとるというのが使い所として良さそうなのかなと感じました。

どなたかのお役に立てば幸いです。それでは！

AWS