よりぶろ

アプリのUIとかについて書いてく予定

Flinto for Macの使い方 / 基本情報編

社内共有用にFlinto for Macの使い方をまとめたのですが、そのまま外部にも出せそうな内容でしたので許可を得て公開します。
少しでも皆さんのお力になれれば幸いです。

というのは建前で!
昨日クックパッドさんで開催されたFlintoのMeetUpに参加したのですが、日本語版の発表と共に「ドキュメントも随時ローカライズしていく」との発表がありまして!
今のうちに公開しとかないと意味なくなるな…!というセコい発想です。 www.flinto.com

もちろん公式でも丁寧なビデオ解説(サンプルファイル付き!)がありますので、触り慣れている方にはこの記事は全くもって意味をなしません。 www.flinto.com

英語ちょっと苦手だな〜とか、Flinto最近触り始めたよーという方向けですのであしからずです。

この記事の目的

なので基本的な使い方をメモも兼ねて書く。
これを読めばみんなFlinto for Macが使えるぞ!がゴール。

ツールとの比較

  • Pros
    • 基本操作がしっかりしている(個人の感想です)。すごく使いにくいってわけでもないし、機能過小でもない。ちょうどよい。
    • 買い切り(Web版ユーザーは無料で使える)。
    • (慣れたら)使いやすい。
    • Web版のように画面遷移だけに絞ることもできる。
    • 画面遷移型プロトタイプでありつつも動きの付いたトランジションも得意…という立ち位置です。
  • Cons
    • Pixateのような条件分岐は無い(◯ptスクロールしたら△△する、とか)。
    • トランジションの学習に少しコツがいる。
    • メンバーへの共有が面倒。
    • Android版がない。

Web版との比較

作られ方が根っこから違うので完全に別物。
Web版では

  • 画像(レイヤー統合されたもの)の読み込み
  • ホットスポットの作成
  • ジェスチャーの指定
  • 遷移先の指定
  • バックリンク
  • スクロールの固定エリア指定
  • タイマーの設定

が主な機能ですが、Mac版は加えて

などが可能となっています。

プロジェクトの共有方法

  • Web→URLを発行してブラウザでアクセス
  • Mac→.flintoファイルをビューワアプリで表示

Mac版は手軽な共有・大人数への共有・修正のリアルタイム反映が苦手&できないので要注意。ちなみに互換性もありません…!

プラグイン

公式でSketch連携のプラグインが提供されています。
https://www.flinto.com/assets/flinto_sketchplugin.zip

このプラグインを使うことで開いているページの全てのアートボードが読み込まれます。
読み込み後はレイヤーが保持されていますが、テキストは画像に変わっています。
ちなみにプラグイン使用時に読み込みスケールを設定できるので、Retinaサイズを@1xで作っていても安心です。

使い方リンク