UI/UXデザイナーだけどReact使ってFramer Xでプロトタイプを作りたい - その2

株式会社アドベンチャーで、UI/UXデザイナーとフロントエンド周りの開発をしている@f-umebaraと申します。[skyticket](https://skyticket.jp/)という自社サービスサイトを主に作っています。
[アドベンチャー初めてのAdvent Calendar 2018 参加](https://qiita.com/advent-calendar/2018/adventure)の16日目に投稿した[UI/UXデザイナーだけどReact使ってFramer Xでプロトタイプを作りたい - その1](https://qiita.com/f-umebara/items/171986c9e4200469ee59)の一部です。
React以外の使い方メインです。


## 別記事書きました：FramerはFramer Webになってました！(2020/06)
[Framer Webのコード機能でプロトタイプを作る](https://qiita.com/f-umebara/items/22af9a1335b8adb80503)


##Framer XというUIデザインツールがすごい
![framer_x.png](https://qiita-image-store.s3.amazonaws.com/0/310213/179be069-8f21-a08b-dddb-482976e4ebeb.png)
**[Framer X](https://framer.com/)**
**[Meet Framer X](https://youtu.be/pKQ7JsFk9Dw)**

##skyticketトップの動くプロトタイプを作ってみました
こちら↓ブラウザではなくFramer Xで動かしています！
![framer_x_demo_3.gif](https://qiita-image-store.s3.amazonaws.com/0/310213/a6f2c223-1c18-d27d-711e-c985fe42f5d7.gif)
（※ 航空券価格は2018/12時点の価格です。念のため。）

やったことは大きく3つ。

- `トップページの画像を動画埋め込みにする`
- `スクロール時にヘッダーとメニューナビは固定する`
- `メニューボタンを押したらメニューが左から出てくる`

###はじめにReactのコードでコンポーネント（Button）を作ってみる
[UI/UXデザイナーだけどReact使ってFramer Xでプロトタイプを作りたい - その1](https://qiita.com/f-umebara/items/171986c9e4200469ee59)をご覧ください。

###トップページの画像を動画埋め込みにする
1.**Store**を開く。（UI素材やらも色々入手できます。便利そう。）
<img width="1119" alt="movie_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/8667d0fb-af81-99ca-1e5a-586b0ca5e704.png">
2.**YouTube**をインストール。
<img width="1135" alt="movie_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/b537249f-2be1-89af-7dca-a53a35dcf26b.png">
3.**Components**タブを開き、YouTubeの**iframe**を置きたい場所までドロップ。
<img width="738" alt="movie_3.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/eb9fa498-891d-911e-8f08-5bc839d64024.png">
4.場所に合わせてサイズを調整します。（最初はデモ動画が入っています。）
<img width="733" alt="movie_4.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/dc4dbd97-8934-d90b-622d-fbc914a40f79.png">
5.Framer X右下にある「Video」のurlを書き換えると指定動画に置きかわります。
<img width="292" alt="movie_5.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/422ace1c-c34c-a1c9-2b64-dd6b9be938a5.png">
<img width="1128" alt="movie_6.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/2a879539-1c1e-1651-9753-3afb0b2d92e7.png">
終わり。

###スクロール時にヘッダーとメニューナビは固定する
1.固定させたいフレームとスクロールさせたいブロックを別々に作ります。
<img width="711" alt="scroll_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/918e28a8-07d3-5b4f-e385-2820d961d65d.png">
2.左側の「tools」ブロックにある**Scroll**をクリック。
<img width="494" alt="scroll_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/977bf977-26a3-f65a-3289-98b7c537f546.png">
3.トップページでスクロールさせたい領域を選択する。
<img width="915" alt="scroll_3.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/17669214-0016-b3a7-3a92-b883ac6ca317.png">
4.スクロールさせたいフレームと繋ぐ。
<img width="920" alt="scroll_4.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/66d15d81-72b4-ce49-580e-47c642b0a997.png">
終わり。

###メニューボタンを押したらメニューが左から出てくる
1.元の画面とoverlayして出てくる画面を別々に作ります。
<img width="902" alt="menu_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/483af7f6-cc6b-b7d5-9a0b-ae6e647e9c6b.png">
2.クリックするボタン（メニュー）を選択し、[**L**]をクリック。リンク先を選択します。
<img width="916" alt="menu_2.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/6579bcc3-e7ab-82b7-d5b5-929d2bf8ca79.png">
3.Framer X右下にある、リンク先の動きを選択します。
<img width="277" alt="menu_3.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/123f3a6e-2488-1713-8257-81ac22598777.png">
4.overlayの動きを指定します。
<img width="288" alt="menu_4.png" src="https://qiita-image-store.s3.amazonaws.com/0/310213/271950e0-3c88-92eb-fb95-a9129632efda.png">
終わり。

**完成！**
![framer_x_demo_3.gif](https://qiita-image-store.s3.amazonaws.com/0/310213/a6f2c223-1c18-d27d-711e-c985fe42f5d7.gif)

##Framer Xまとめ

- UI制作とプロトタイプ制作が同時に出来て本当便利。リアルタイムプレビューが楽しい。
- デザイナーでもエンジニアでも使いやすそう。特にデザイン〜フロントエンドまでやりたい人には使いやすいかも。
- デザイナーとエンジニア間で生じるコンポーネント管理難しい問題の解決に夢が広がる。
- 日本語入力がバグる。。
- 日本語の資料少ないので、使い方の勉強はGoogle翻訳等で頑張るしかない。。

一見ハードルが高そうですが、慣れるとかなり使いやすいです。まだ他の操作も勉強中なので、知見溜まったらまた投稿してみたいと思います。
乱筆乱文、失礼いたしました。
最後までお読み頂きありがとうございます。:bow:

##おまけ
株式会社アドベンチャーではデザイナーに負けないくらいUXしたいフロントエンドエンジニアさんとか、フロントエンドエンジニアに負けないくらいコードが書きたいデザイナーさん募集中です。
[フロントエンドエンジニア](https://www.green-japan.com/job/43286?case=tlogin)
[UI/UXデザイナー](https://www.green-japan.com/job/49453?case=tlogin)

ご興味ある方ぜひ仲間になりましょう。

##参考にいたしました

- [Google、Facebook、Uberで使用されるプロトタイピングツール](https://www.fastcompany.com/90128732/meet-framer-the-prototyping-tool-used-by-google-facebook-and-uber)
- [Framer Xのベータ版がついに提供開始！その全貌が明らかになってきた](https://webdesign-trends.net/entry/6651)
- [さよならSketch、こんにちはFramer X](https://note.mu/kantayamagata/n/n30d5ce92d1e6)