【デザイン】Framerとは

Next confのURLインポートの紹介で、Framerによる使用例が紹介されていた

5:28あたり
www.youtube.com

Framerを知らなかったので調べた

URLインポートとは

Next.js 12の公式ドキュメントによると、Next.js 12ではESモジュールをURL経由でインポートする機能が実験的にサポートされているとのこと

URLインポートでは、任意のパッケージをURL経由で直接使用することができる

URLインポートが検出されると、Next.jsはリモートリソースを追跡するためのnext.lockファイルを生成する

URLインポートはローカルにキャッシュされるため、オフラインでも作業が可能で、Next.jsはクライアントとサーバーの両方のURLインポートをサポートしている

使い方はまず、next.config.jsの中にURLを記載してオプトインする

module.exports = {
  experimental: {
    urlImports: ['https://cdn.skypack.dev']
  }
}

これにより、以下のようにURLから直接モジュールをインポートすることができる

import confetti from 'https://cdn.skypack.dev/canvas-confetti'

Framerとは

www.framer.com

FramerはWebやモバイルなどのデジタルプロダクトのためのプロトタイピングツール

ブラウザとWindowsおよびMacのデスクトップアプリの両方で利用できる

特徴として、これまで通りデザイナーがツール上の機能を使ってデザインすることになるが、FramerはこれをCSSやJSXに変換し、コードエディタで編集することができる

これによりよくデザインツールの課題としてあげられる、プロトタイプで検証したデザインを実際のプロダクトにするにはエンジニアリングの作業が必要という課題を解決することができる

URLインポートとFramerのデモの話

Next confで説明されていたのはFramerで作られたコンポーネントはHandshakeという機能によりURLにすることができるため、これをURLインポートをつかって直接呼び出せば簡単にページがつくれるというデモだった

これはこのままプロダクトで利用できる仕組みのかなどがわかっていないが、できるなら確かにすごく早くサービスが作れそう

他参考

https://goodpatch.com/blog/framer-for-interactive-prototyping#Framer