1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-31

はじめに

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

チュートリアルをはじめる

FramerXを起動してStart Tutorialをクリックします。
01_start.png

以下のような画面が表示され、チュートリアルが始まります。
02_welcome.png

ショートカットについて

  • command ・・・ クリックしながら画面上のオブジェクトを選択すると、ネストされたレイヤーを選択できます
  • space ・・・ クリックしながらドラッグするとキャンバスをドラッグできます
  • z ・・・ 「z」をクリックすると虫眼鏡の+アイコンになるのでズームインができます。「z+option」をクリックすると−アイコンになるのでズームアウトできます。
03_shortcuts.png

Frameについて

Frameを使用して画面が作成できます。
スクリーンショット 2018-12-30 14.25.44.png
画面上のボタンを移動させると、2つあるFrameのうち、ボタンが移動先のFrameにネストされる形で移動します。
スクリーンショット 2018-12-30 14.26.33.png
Frameは新規作成時は左側のアイコンから**+をクリックしてFrame**を選択することで追加できます。
スクリーンショット 2018-12-31 9.58.42.png

Stackについて

Stackを使用するとフレキシブルなインターフェースが作成できます。
スクリーンショット 2018-12-30 14.28.16.png
右側のリストを移動させると自動的に等間隔に綺麗に配置されます。
スクリーンショット 2018-12-30 14.31.45.png

Linkについて

Linkを使用すると画面の遷移を定義できます。
スクリーンショット 2018-12-30 14.33.27.png
Lを押しながらボタンから右側のフレームにリンクを張ります。
スクリーンショット 2018-12-30 14.34.06.png
command + Pを押すとプレビューが表示され、ボタンをクリックすると画面遷移するようになります。
スクリーンショット 2018-12-30 14.34.14.png
スクリーンショット 2018-12-30 14.34.20.png

Scrollingについて

Scrollを使用すると、エリア内のスクロールを定義できます。
スクリーンショット 2018-12-30 14.35.01.png
左側のスクロールエリアから右側のフレームに線を繋げます。
スクリーンショット 2018-12-30 14.36.10.png
プレビューすると、エリア内のコンテンツがスクロールできるようになります。
スクリーンショット 2018-12-30 14.36.23.png

Pageについて

Pageを使用すればスワイプできるコンテンツが作成できます。
スクリーンショット 2018-12-30 14.37.10.png
一番左のFrameのPageエリアから右側の各画像を線で繋ぎます。
スクリーンショット 2018-12-30 14.39.13.png
プレビューすると画像がスワイプできるようになります。
スクリーンショット 2018-12-31 10.14.01.png

Graphicについて

Grachicツールを使うと、パスやシェイプを追加できます。
ダブルクリックするとドラッグモードになります。
スクリーンショット 2018-12-30 14.39.46.png
シェイプをドラッグできます。
スクリーンショット 2018-12-30 14.41.07.png

Componentについて

Componentを使用すると、パーツを部品化できます。
スクリーンショット 2018-12-30 14.41.32.png
ボタンの色を変えると、同じコンポーネントの全てに変更が適用されます。
スクリーンショット 2018-12-30 14.42.42.png

Storeについて

StoreにはTwitter、YouTubeなどのおしゃれなコンポーネントのパッケージが用意されており、これをインストールして使用することができます。
スクリーンショット 2018-12-30 14.43.08.png
ストアから、
スクリーンショット 2018-12-30 14.43.17.png
YouTubeを選択し、右上のinstallをクリックします。
スクリーンショット 2018-12-30 14.43.28.png
すると追加したYouTubeのコンポーネントが使えるようになるので、
スクリーンショット 2018-12-30 14.44.05.png
右側にコンポーネントをドラッグすると追加できます。
スクリーンショット 2018-12-30 14.44.42.png
スクリーンショット 2018-12-30 14.44.56.png

チュートリアルの終わり

以上でチュートリアルは終わりです。
スクリーンショット 2018-12-30 14.45.19.png

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?