Framer Cheat Sheet

FramerはReact/TypeScriptベースで自由度の高いインタラクションを作り出せるツールです。黎明期の頃から4年ほど使い続けており、高速で解像度の高いUIを作れるので、会社内でのツールの浸透を目的として、初心者でもすぐに中級レベルのプロトが作れるツールとして、Cheat Sheetを作成しました。

全てのプロトタイプをインタラクション部品の集合体と捉え、その部品を元素表になぞらえて整理し、列挙しました。

それぞれの要素にはソースコードがついており、コードをコピー&ペーストするだけで動きを再現することができます。

Role
Everything
Client
Private Project
Date
2020/05
上からよく使う順番で部品を並べている

👇目的や使い方を説明したnote記事

Framer Web CheatSheetを制作しました
https://note.com/sorashin/n/n486a7735927c
例えばInstagram風のUIは、PagingComponentとVideoComponentと
Rectangleの横幅を伸ばすアニメーションとで作ることができる
上のようにCheatSheetの部品に使われているコードをコピーして、適用したい部品に貼り付けるだけで、
インタラクションをコピーすることができる。

Related Works

Password Required
City and Dots website
2017
フロントエンド
Password Required
BUBBLY
2016
プロダクトデザイン、回路設計、機構設計、プロジェクトリード
Password Required
Daily UI
2019
UIデザイン
Password Required
Framer Cheat Sheet
2020
UIデザイン
Password Required
TalkStay
2020
エスノグラフィックリサーチ、UI/UXデザイン






Keep in touch ! 🙌

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.