仕事でFlintoというツールを使用する機会があったので、Flintoがどんなツールなのかということと、導入の仕方、基本的な使い方について紹介しようと思います。
Flintoとは
FlintoはWEBサイトのデザイン提案などに最適なツールで、デザイン画面だけでは伝わりづらいアニメーションを簡単に作成できるプロトタイピングツールとなっています。
また、SketchとFigmaを使っている方は作成したデザインデータをインポートできます。
デザイン作成はSketch、動きの作成はFlintoという使い分けができるのでオススメです!!
Flintoは有料のアプリケーションですが、30日間の無料の試用期間があります。
- デザイン画面だけでは伝わりづらいアニメーションを簡単に作りたい！
- SketchまたはFigmaをデザインツールで使っている方。
Flintoの無料トライアルの導入
1.https://www.flinto.com/にアクセスし「Download Free Trial」ボタンを押します。
2.「here」をクリックします。
3.「Agree」ボタンをクリックします。
4.ドラッグ＆ドロップでアプリケーションフォルダに入れます。
アプリケーションフォルダ内に「Flinto」が入ってるので起動できれば導入完了です。
Flintoの使い方
ここからはFlintoの基本的な使い方を説明します。
Flinto単体でデザインすることも可能ですが、あまり現実的ではないのでデザインSketchデータをインポートするところから説明しようと思います。
デザインデータのインポート
まず、インポートしたいSketchデータ、またはFigmaのデータを用意してください。
データがない方はSketchのサンプルデータを用意しましたのでこちらからダウンロードしてください。
用意できましたらまずFlintoを起動してください。
1.Flintoを立ち上げると背面に新規ドキュメントも立ち上がると思うのでそちらを選択。
（立ち上がっていない方は新規ドキュメント作成を選択）
2.新規ドキュメントの背景色を白色に変更
赤枠をクリックし＃ffffffにする。
3.用意した、データを開く。
4.左上の「Flinto」＞「Sketchからインポート」を選択。「import 1 Artboards」を選択。
5.インポート完了
これでデザインのインポートは完了です。
プレビュー表示領域の設定
プレビューボタンを押した際の表示領域を設定します。
まず、右側にありますドキュメントプロパティで、赤枠部分のwidthの数値を作成したサイズに変更します。（サンプルデータは1440px）heightはお好みで設定してください。
「カスタム」となっている部分を選択すると、さまざまなデバイスの画面サイズが沢山出るのでそこでも表示領域の設定ができます。
赤枠部分の変更が完了したら一旦プレビューを押してみましょう。
先程設定した数値の表示領域になっていると思います。
この時点ではまだスクロールができませんので、スクロール領域の設定をしていきます。
スクロール領域の設定
まずは、画面左側にありますフォルダを全部選択してください。
（一番上のフォルダをクリックした後、シフトを押しながら一番下のフォルダを選択すると全部選択できます。）
全部選択した状態で「command + G」を押します。すると新規グループができるので、それを選択した状態で、右側にありますグループオプションの中にあるスクロールの縦方向を選択するとスクロールができるようになります。
スクロールができるかプレビューを押して確認してみてください。
要素の固定スクロール
要素を固定したいという場合があると思います。その時はスクロールしたくない要素を先程作成した新規グループの上に配置してみてください。赤枠のような形になっていればOKです。
プレビューを押して下記の動画と同じになっていれば固定表示の設定が完了です。
アニメーションの設定
ここからはようやくアニメーションに関する説明をしていきます。
サンプルデータを用いた説明となっています。
ホバーアニメーション
まず簡単にできる、ボタンのホバーアニメーションを作成します。
これが作れれば応用して様々なアニメーションが作れるようになります。
1.お問い合わせボタンを選択してください
2.画面右側にある「ビヘイビアを追加」を選択
3.「新規ビヘイビア」を選択します
4.プラスマークを選択します
5.新規状態が作成されるので名前部分をわかりやすく変更
ダブルクリックすると名前が編集可能になるのでわかりやすい名前に変更。今回は「マウスオーバー」という名前に変更しています。
6.マウスオーバー状態を作成
マウスオーバーを選択した状態で、四角のシェイプの色を青色へ変更。矢印を10px程右にずらしてください。
7.初期状態を選択した状態に
8.リンクを追加する
- 四角のシェイプを選択します。
- 「リンクを追加」をクリックします。
- 線をマウスオーバーに繋げます。
9.ジェスチャーを選択
ジェスチャーを選択することでどの条件でアニメーションが発生するかを設定できます。
- 「タップ」をクリックしてプルダウンが表示されます。
- 「マウスオーバー」をクリックします。
- 「完了」をクリックします。
10.マウスオーバーを選択した状態に
11.「8.」と同じ要領でリンクを追加
12.ジェスチャーのマウスアウトを選択
13.「保存して閉じる」をクリック
14.プレビューで確認
下記の動画と同じような挙動になればマウスオーバーのアニメーションが完了です。
アニメーションの詳細設定
アニメーションをつける大まかな流れは今まで説明した通りになります。
次は細かいアニメーションの調整の仕方を説明します。
1.ビヘイビアを編集
- ボタンのレイヤーを選択してください。
- 「ビヘイビアを編集」をクリックしてください。
2.アニメーションの詳細設定
- 矢印（ファイル名：Z/icon/arrow）を選択します。
- 「クラシック」を押します。
- ここはアニメーションの緩急などが変更できるので自由に調整してみて感覚を掴んでください。
- ここはアニメーションする時間を入力します。今回は2000msなので、2秒かけてアニメーションするという設定になります。
- ここは遅延を設定します。今回は1000msなので、アニメーションが発生してから1秒後にアニメーションを開始するという設定になっています。
3.プレビューで確認
下記の動画のように矢印が気持ち悪い動きになっていれば完成です。
アニメーションの設定を応用すれば、イントロアニメーションやスクロールアニメーション、スライダーのアニメーション、モーダルなど様々なアニメーションが表現可能です。
応用編はまたブログで紹介しますので見ていただけると嬉しいです。
今回はこんな感じで終わります。最後まで見ていただきありがとうございます。
