[*FramerX*] 公式チュートリアルをやってみた

# はじめに
FramerXを使ってみたかったのでチュートリアルをやってみました。
FramerXはプロトタイプの作成ツールです。
GUIベースで作成する他に、Reactを使用してコードベースでも作成できるようです。

# チュートリアルをはじめる
FramerXを起動して**Start Tutorial**をクリックします。
<img width="920" alt="01_start.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/e744463c-6d0d-0902-106c-46c8b11d3e4c.png">

以下のような画面が表示され、チュートリアルが始まります。
<img width="1512" alt="02_welcome.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/c8b0f533-321e-1121-b9f4-db8a4babeb02.png">


# ショートカットについて
* **command**　･･･　クリックしながら画面上のオブジェクトを選択すると、ネストされたレイヤーを選択できます
* **space**　･･･　クリックしながらドラッグするとキャンバスをドラッグできます
* **z**　･･･　「z」をクリックすると虫眼鏡の＋アイコンになるのでズームインができます。「z＋option」をクリックすると−アイコンになるのでズームアウトできます。

<img width="1512" alt="03_shortcuts.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/ac1a20fc-2b3a-436c-d6f3-4fd871b87224.png">

# Frameについて
Frameを使用して画面が作成できます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.25.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/2126e005-0db2-b65f-3636-6aef3c17127a.png">
画面上のボタンを移動させると、２つあるFrameのうち、ボタンが移動先のFrameにネストされる形で移動します。
<img width="1512" alt="スクリーンショット 2018-12-30 14.26.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/8f5c60c1-1db8-d63c-37c0-5a364d3cb851.png">
Frameは新規作成時は左側のアイコンから**+**をクリックして**Frame**を選択することで追加できます。
<img width="1512" alt="スクリーンショット 2018-12-31 9.58.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/34b331c3-2cab-7468-9dcd-6c2f1757deb1.png">

# Stackについて
Stackを使用するとフレキシブルなインターフェースが作成できます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.28.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/bb7a0ba3-721b-8791-b5dc-d74506a962a1.png">
右側のリストを移動させると自動的に等間隔に綺麗に配置されます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.31.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/b41c81a8-588b-9940-02cb-398e3e99fac7.png">

# Linkについて
Linkを使用すると画面の遷移を定義できます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.33.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/f5c43952-b1a6-75bb-9659-141a6b488a6a.png">
**L**を押しながらボタンから右側のフレームにリンクを張ります。
<img width="1512" alt="スクリーンショット 2018-12-30 14.34.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/1d015037-4bcc-c843-c298-d36d8afafae5.png">
**command + P**を押すとプレビューが表示され、ボタンをクリックすると画面遷移するようになります。
<img width="487" alt="スクリーンショット 2018-12-30 14.34.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/f6b84078-46cd-435a-794c-4b07df9d3ebe.png">
<img width="487" alt="スクリーンショット 2018-12-30 14.34.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/cd02aa86-8dfb-8c07-e010-441dc7800176.png">

# Scrollingについて
Scrollを使用すると、エリア内のスクロールを定義できます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.35.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/cecf084e-caa3-4435-3d4e-2d4cd8b9d202.png">
左側のスクロールエリアから右側のフレームに線を繋げます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.36.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/bea07718-e039-1d26-c2a5-76cda22a65d8.png">
プレビューすると、エリア内のコンテンツがスクロールできるようになります。
<img width="487" alt="スクリーンショット 2018-12-30 14.36.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/2bbee4d5-f6aa-ae8d-3ec8-6ee55d2deca5.png">

# Pageについて
Pageを使用すればスワイプできるコンテンツが作成できます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.37.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/19badaa2-bc5f-ffff-930a-46c4a831a0cd.png">
一番左のFrameのPageエリアから右側の各画像を線で繋ぎます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.39.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/d969b73d-7b49-74a5-b2d3-3b2ba2ae3c84.png">
プレビューすると画像がスワイプできるようになります。
<img width="487" alt="スクリーンショット 2018-12-31 10.14.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/a63c6b92-94b5-59a9-a0a5-f15ea03ed89e.png">

# Graphicについて
Grachicツールを使うと、パスやシェイプを追加できます。
ダブルクリックするとドラッグモードになります。
<img width="1512" alt="スクリーンショット 2018-12-30 14.39.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/0642c52a-7895-f75d-a26e-88cb6f1cab01.png">
シェイプをドラッグできます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.41.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/d37cd6d5-84e6-3e92-9d92-97abacb748e2.png">

# Componentについて
Componentを使用すると、パーツを部品化できます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.41.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/3c605a33-479f-aa73-9ae4-2c4c0b30d722.png">
ボタンの色を変えると、同じコンポーネントの全てに変更が適用されます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.42.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/98af59b4-46f8-a90c-92d1-33f5b41561b2.png">

# Storeについて
StoreにはTwitter、YouTubeなどのおしゃれなコンポーネントのパッケージが用意されており、これをインストールして使用することができます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.43.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/d17ce305-6e58-1574-e3a9-bd577df82802.png">
ストアから、
<img width="1512" alt="スクリーンショット 2018-12-30 14.43.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/3c29e0c6-4e60-a71b-bbe8-64890d8c38a9.png">
YouTubeを選択し、右上の**install**をクリックします。
<img width="1512" alt="スクリーンショット 2018-12-30 14.43.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/54062722-1d97-6eaf-3f9a-aec96b90d407.png">
すると追加したYouTubeのコンポーネントが使えるようになるので、
<img width="1512" alt="スクリーンショット 2018-12-30 14.44.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/e583fd8c-8c25-c1d0-9af2-02aa9654161b.png">
右側にコンポーネントをドラッグすると追加できます。
<img width="1512" alt="スクリーンショット 2018-12-30 14.44.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/ade433a5-dc60-4f1f-659f-5b0d6d8b7e65.png">
<img width="1512" alt="スクリーンショット 2018-12-30 14.44.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/d186071a-a8a8-793e-7ad9-1597b4052093.png">

# チュートリアルの終わり
以上でチュートリアルは終わりです。
<img width="1512" alt="スクリーンショット 2018-12-30 14.45.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/48912/fec592f7-9c40-04f4-67a1-b400c11fdf13.png">