プロトタイピング&デザインツール
Web-Base Platform版 と Native Application版が用意されている
FigmaやAdobe XDと似ている
Webフロントエンドエンジニアにも親和性が高いツール
Most design and prototyping tools today are just systems to paint your ideas on a canvas.
’’
多くのプロトタイピングやデザインツールは
アイデアをキャンパスに描き、
紙芝居の様に決められたインタラクション・アニメーションを追加するもの。
Framer is the only tool built on web technologies and gives you a truly interactive and realistic output in less time.
’’
FramerはWeb技術（Javascript, React）をベースにしている。
より現実のアプリケーションに近いプロトタイプを作ることを目指している。’’
モックアップ、視覚的に確認ができるもの ⇢ 模型
プロトタイプ、実際に使ってテストができるもの ⇢ 試作機
モックアップ的 ⇢ Figma, Adobe XD
プロトタイプ的 ⇢ Framer
Framerには、Design ComponentとCode Componentの
2種類のコンポーネントが用意されている
他のツール同様、GUIでビジュアルデザイン
React.jsでComponentを実装
DEMO
Design ComponentのPropsを上書き、状態を定義
DEMO
ノーコード・ローコードでDesign ComponentにPropsを設定
DEMO