Flinto for Mac 2.1ではビヘイビアデザイナにいくつかの素晴らしい機能が追加されています。また、アプリ全体を通じて一連の大きな改善をしました。

Flinto for Mac 2.1 を入手しましょう。 Sketch Pluginも改善されています！アップデートしてください。

     

スクロールの改善

スクロールアニメーションのオートリバース

ビヘイビアデザイナを使用してスクロールベースのアニメーションを作成する場合は、前向きスクロールと後ろ向きスクロールの2種類のジェスチャを設定する必要がありました。もうその必要はありません！このバージョンからはスクロールジェスチャーは自動的に反転させるので、追加のジェスチャーが必要なくなりました。大きな時間節約にもなりますが、複数のスクロールアニメーションを使用したビヘイビアの新しい可能性も生み出しています。

スクロールジェスチャーにも少し利便性を加えました。範囲の矢印をドラッグすると、すぐにスクロール範囲の位置を変えることができます。

スクロールグループのスワイプジェスチャー

このバージョンでは、スクロールジェスチャーがスクロールグループに適用されたときに機能するようにしました。スクロールグループを上書きする代わりに、スクロールグループを通常のようにスクロールできます。スクロールグループの最後に到達してスクロールが停止すると、スワイプジェスチャーを開始することができます。縦スクロールを例にとると、スクロールの先頭で下のスワイプ、またはスクロールの最後尾で上スワイプを使うことができます。

アニメーション可能なスクロールコンテンツサイズ

ビヘイビアデザイナで、スクロールグループのコンテンツサイズをアニメーションできるようになりました。これは、メニュー項目を切り替えたときにスクロール内容が大きくなるアコーディオンメニューのようなものがある場合に便利です。

その他の重要な新機能

ビヘイビアに重なっているリンク

場合によっては、ビヘイビアとトランジションを組み合わせたい場合もあります。ビヘイビアの上にリンクを置くだけでリンクをタップすると、そのリンクもその下のビヘイビアも同時にアクティブになります。これにより、ビヘイビアと通常のリンクを簡単に組み合わせることができます。

スクロールグループとビヘイビアをリセット

ユーザーから頻繁にリクエストがあった機能を追加しました。 「画面遷移時にリセット」オプションをスクロールグループとビヘイビアのインスペクタに追加しました。この設定により、リンクをアクティブにして画面を離れるときに、ビヘイビアがデフォルトの状態にリセットされます。スクロールグループのスクロールポジションも同時にリセットされます。

その他の重要な新機能

• プレビューウィンドウが改善され、より適切なサイズでウィンドウを開くように。また、フルスクリーンモードとウィンドウモードの間の動きがスムースになりました
• ジェスチャーメニューにセパレーターを追加しました
• 新しく追加された画面は、より論理的な位置に配置されます
• レイヤーの回転UIが改善されました
• 非表示のレイヤーがSketchからインポートされるようになりました
• 特定の状況でビヘイビアデザイナのパフォーマンスが大幅に向上しました
• バックリンクターゲットに関するいくつかのバグが修正されました
• ビヘイビアデザイナやプレビューでのビヘイビアの表示に関連する不具合を修正しました
• .flintoファイルのクイックルックとサムネイル表示が正しく表示されない場合の問題を修正しました
• プロトタイプは、iOSアプリがバックグラウンドに入ってもアクティブに保たれるようになりました

• Flintoを試してみよう！
• Twitterでシェア
• Facebookグループに参加

本日Flinto for Macバージョン2を公開しました。こちらの最新版には、画面内でのインタラクションやアニメーションに関する大きな新機能が加わりました。スイッチ切り替えやボタンを押す操作、ループするアニメーションやスクロールベースのアニメーションまでが、簡単に作成できるようになります。新機能「ビヘイビアデザイナ」の登場です。

Flinto for Mac 2を試す

多くの皆さんに新しい機能を試していただけるよう、Flinto for Macのトライアルをリセットしました。過去にすでにFlinto for Macを試された方でももう一度試していただけます。

ビヘイビアデザイナ

ビヘイビアデザイナを使うと、画面内で起こる小さなインタラクションを作成できます。例えばスクロールベースのインタラクションやループするアニメーション、スイッチの切り替え、ボタンのエフェクトその他様々なインタラクションを作成可能です。ビヘイビアはトランジションと同じく再利用できます。ビヘイビアは一時停止することが可能なため、非常にレスポンシブなインタラクションにも向いています。

ビヘイビアデザイナなら、手早く非常に視覚的にアニメーションを編集できます。プレビュー内でアニメーションがかかっているレイヤー自体を直接編集できるので、作品の最終的な出来と切り離された部分で作業している感じはまったくありません。

ビヘイビアはグループに適用され、一連のステータスから成り立っています。各ステータスにリンクを追加することで、ステータス間を移動でき、自動的にアニメーションが起こります。ビヘイビアデザイナの詳細はチュートリアルビデオページをご覧下さい。

切り替えられるスイッチをデザインするには、「オン」と「オフ」のステータスを作る必要があります。各ステータスにはもう一方のステータスをターゲットとしたタップジェスチャーを追加します。さらにリアルな挙動にするためには、ステータス間にスワイプジェスチャーを付けても良いでしょう。

ビヘイビアデザイナでループするアニメーションを作るには、レイヤーの各位置のステータスを作り、それらのステータスをタイマーリンクでリンクします。

スクロールベースのアニメーションでは、1つのステータスから別のステータスへ、新しいスクロールジェスチャーを使ってリンクして下さい。定義した範囲でスクロールすると、1つのステータスからもう1つのステータスへのアニメーションが再生されます。上記の例では、1つは縮小するヘッダーに、もう1つは右側の画像のパララックス効果に、同じグループ内の2つのビヘイビアが使われています。

ビヘイビアデザイナを閉じたら、ビヘイビアの細かい部分を気にかけることなく、プロトタイプの別の面に集中できます。

共有可能なトランジションとビヘイビア

Flinto 2でもう1つ変わったのは、トランジションとビヘイビアをドキュメント間で共有できるようになったところです。1つのドキュメントから別のドキュメントへリンクをコピーすると、リンクに適用されているトランジションがコピー先のドキュメントでも使えるようになります。ビヘイビアが適用されたグループも、新しいドキュメントへコピーして再利用が可能です。

こちらはよく使うトランジションやビヘイビアがいくつかあるチームでの作業において、画期的な機能改善です。また優れたトランジションやビヘイビアをたくさん詰め込んだFlintoドキュメントを他の人にシェアし、みんなで使えるようにすることもできるため、Flintoユーザーコミュニティ全体にとっても有意義だと考えられます。

トランジションデザイナ改良

今回のアップデートではFlinto for Macのトランジションデザイナにも改善を加え、これまでよりもさらに使いやすくしました。トランジションデザイナで混乱を招きがちだったいくつかの部分を改良し、「画面を整列」トランジションを作成する新規設定を追加しました。

• 起点と終点画面サムネイルが新しくなり、どれが最初の画面でどれが最後の画面なのか明確に
• 画面ボーダーを削除して画面をグループのような扱いに変更。画面をクリックしてドラッグすると、全体を移動できるように。ダブルクリックまたは「command＋クリック」で、含まれるレイヤーにアクセス可能
• 新規「画面を整列」チェックボックスで画面を整列させてロックできるようになり、よくある挙動で操作間違いが起こりにくく

• Flintoを試してみよう！
• Twitterでシェア
• Facebookグループに参加

音声対応と長方形のネイティブ対応を搭載したバージョン1.5に続き、バージョン1.6では以下の機能や改善点をお届けします:

リンクライン刷新

リンクラインを一から作り直し、さらに便利で楽しい物にしました。リンクを選択すると、リンクラインが表示されます。これにより、リンクがどこを指しているのか断然見やすくなりました。リンクのターゲット画面を選択するとより自然な挙動でアニメーションします。また便利なジェスチャーアイコンがリンクライン上に表示され、一目でどのジェスチャーを適用したかわかります。このアイコンをクリックすることで、ジェスチャーおよびトランジションのオプションにすぐアクセスできます。

リンク（とリンクライン）は非表示にすることも可能です。ツールバーの「リンクを隠す」ボタンをクリックするか、ショートカットcommand+Lをご利用下さい。

マウスオーバーアウトライン

ささいな改善ながら、これによりトランジションデザイナでの作業が劇的に楽になりました。レイヤーにマウスオーバーするとアウトラインが表示されるので、選択しようとしているのがどのレイヤーなのかわかりやすくなりました。単にキャンバスで画面のレイヤーを並べ替えている時にも便利ですが、トランジションデザイナでもアウトラインが表示され、他のレイヤーに隠れていたり、見えにくいレイヤーがある場合に便利です。

キャンバス操作の大幅改善

Flintoでは、Flinto for Macでのキャンバス操作（レイヤーのサイズ変更や選択、グループ化や移動など）を非常に優れたものにすることに細心の注意を払っています。バージョン1.5で長方形を追加したことで、キャンバス操作をさらに強化しないといけないと感じ、以下のような改善を加えました:

• commandキー長押しのままレイヤーをドラッグすることで、スナップが無効に
• command+矢印のショートカットでレイヤーのサイズ変更
• command+deleteでレイヤーからリンクを削除
• 初期設定の長方形スタイルを設定（編集 > デフォルトのスタイルに設定)
• 最小サイズ変更ハンドルスタイルが、スペースの許容範囲に応じてハンドルをスマートに表示・非表示
• レイヤーの四辺にサイズ変更ハンドルが追加され、さらに柔軟な変更が可能
• より正確な調整ができるよう、プロパティの編集中はハンドルを非表示
• command+クリックショートカットでグループ内のレイヤーを選択する際の挙動を改善
• スクロールグループをサイズ変更する際、内容のサイズが一致するように

サイズ変更が可能なプレビュー・タッチカーソル

プレビューウィンドウの丸いカーソルは、指を象徴しています。今までの問題は、ウィンドウにズームインまたはズームアウトしてもカーソルの大きさは変わらず、違和感があったことでした。カーソルはプレビューのサイズに比例して指の大きさを表すべきだと考え、新しく自動的に拡大・縮小するカーソルを追加しました。動的に描画されるため、どんなサイズでも鮮明に表示されます。

さらに多くのピクセル密度に対応

より多くのAndroidデバイスに対応できるよう、1.5x・3x・4xオプションを追加しました。

Flinto for Macトライアル

Flinto for Mac 1.6をダウンロードし、14日間無料でお試し下さい。すべてのトライアル期間をリセットしたので、以前Flintoを使ってみたことがある方もぜひもう一度ご利用いただければ幸いです。

• Flintoを試してみよう！
• Twitterでシェア
• Facebookグループに参加

Flinto for Macバージョン1.5が公開されました。この公開の記念として、すべての無料トライアルをリセットしました。Flinto for Macを過去にお試しいただいた方も、アップデートを多数加えた最新バージョンをぜひ改めてご利用いただければと思います。Flinto for Macサイトからダウンロードしてお試し下さい。

長方形

Flinto for Macがベクターの長方形に対応しました。Flinto内で直接長方形を描画できるだけでなく、Sketchから長方形をインポートした際にも、ビットマップでなくベクターとして読み込まれるようになりました。Flinto for Macで長方形を使えるようになるということはつまり、角丸の角度や塗りつぶしの色、ボーダーやシャドウといったプロパティにもなめらかにアニメーションをかけられるということです。これにより、今までにない多くの可能性が広がります。

またこれはFlinto for Mac内でシンプルなレイアウトを素早く描けるということでもあります。

Flinto for Mac内で様々なプロパティを調整できるようになりました。

このようなプロパティにアニメーションを追加することで、優れたエフェクトを付けられます。例えば色、形、ドロップシャドウなどをスムーズにトランジションさせ、2つの長方形を接続してみましょう。

音声対応

Flinto for Macのジェスチャーに音声の添付ができるようになりました。サイドバーのジェスチャーに音声ファイルをドラッグすると、ジェスチャーが有効になった際に再生されます。これにより、一段とリアルなプロトタイプが作成できるようになりました。UIサウンドをぜひお試し下さい。

Sketchインポートのアップデート

可能な場合は、Sketchプラグインで長方形や円形をFlintoに送信できるようになりました。長方形のボーダーが単一で、塗りつぶしも単一のベタ塗り、ドロップシャドウも単一である場合、ベクターの長方形レイヤーとしてFlinto for Macへ読み込まれます。円形は、角丸の長方形（角が最大限に丸いもの）としてインポートされます。またプラグインはアートボードの背景色を長方形レイヤーとしてFlintoへ送信。インポートにかかる時間を表示するプログレスバーも搭載されました。

バウンスプロパティの防止

フェードインして画面内を移動するレイヤーに対し、バウンスを適用することがあると思います。レイヤーのバウンスはエフェクトとして良いものですが、不透明度には通常バウンスをかけたくない場合が多いでしょう。

バウンスをかけると不自然な挙動になりがちなプロパティというものがあるため、不透明度、色、シャドウ、ボーダーの太さ、角丸の角度などの属性では、繰り返すバウンスはかけられないようにオプションを無効にしました。

トランジションマネジャー

トランジションすべてを確認できる、便利なトランジションマネジャーシートを追加。「トランジションを管理」>「編集」メニューからアクセスできます。

初期設定のズームレベルを最適化

新規ドキュメントの作成時、画面にうまく入る範囲で100％に近いズームが選択され、最も見やすい状態で画面が表示されるようになりました。

中国語バージョン搭載

Flinto for Macの簡体中国語版がダウンロードできるようになりました。

Flinto for Macの14日間無料トライアル

すべてのトライアル期間をリセットしたので、ぜひこの機会にFlinto for Macをお試し下さい。今回の更新はメジャーなアップデートで、初期のバージョンと比べてたくさんの新機能や改善点が加えられています。ぜひご利用いただければ幸いです。

• Flintoを試してみよう！
• Twitterでシェア
• Facebookグループに参加

Pasquale D’Silvaが楽しいJupiter Weather（木星の天気）アプリのプロトタイプをデザインしてくれました。Flintoビューワーアプリのサンプルとして追加されています。 たくさんの方からFlinto for Macで試せるプロトタイプのリクエストにお応えしたこの作品を、ぜひダウンロードしてみて下さい。

Jupiter Weatherプロトタイプのダウンロードはこちら

ご存じない方にご紹介すると、Pasqualeは独自のスタイルを持つアニメーターかつソフトウェアデザイナーとして活躍する人物です。 デザインとイラストレーション、さらに音楽といった多分野を自由に行き来し、すべての要素をうまく取り入れて驚くべき作品を生み出す。そんなユニークでクリエイティブなアーティストの1人です。

以前彼がKeezyアプリを製作中の時にもお話を聞きました。

最近また話す機会があり、Jupiter Weatherプロジェクトとそのインスピレーションとなった、ちょっと笑えるきっかけについて教えてもらいました:

優秀なモバイルアプリのデザイナーの1人として、モバイルでのユーザーエクスペリエンスの優劣を決める基準は何だと思いますか？

優れたモバイルソフトは、デバイスの物理的な制限や特徴、ユーザーの動きや操作、インタラクションといった面を綿密に検討してあり、使う人ととても密な関係を構築するものです。

逆に劣ったモバイル体験では、大画面での利用を前提にデザインしたものが、手のひらサイズに無理矢理ねじ込まれている、と感じてしまうものです。

このプロトタイプのアイデアはどこから得たのですか？

よくある間違った思い込みに、「素人デザイナーはみんな実用的でもない静的な天気アプリを作り、ジョークでなく本気でDribbbleに投稿しなければならない」というものがあります。

この誤解をさらにふくらませて、あり得るけれどまったく使えないアプリのプロトタイプを本当に作ってみたら面白いかも、と考えました。 例えば惑星の周辺を飛び回れる日がいつか来て、木星とその衛星での天気が気になるかもしれない。そうしたら実際にApp Storeでランキングトップのアプリになるんじゃないか、なんて思いまして。

このプロトタイプ内で気に入っているこだわりの点は？

嵐をトラッキングできるストームトラッカーで、荒れている木星の渦の目の予測移動経路が見えるのがオススメの部分です。

• Flintoを試してみよう！
• Twitterでシェア
• Facebookグループに参加

先日ピーター・ノウェルとFlinto for Macの凝ったアイコンシステムについて話しました。ピーターはFlinto for MacのUIエレメントの多くを手がけた、サンフランシスコで活躍するデザイナーです。

Flinto for Macで果たした役割は？

Flinto for Macのリリース数ヶ月前からFlinto社の仕事に関わり、ユーザーインターフェースとユーザーエクスペリエンスの様々な面に関与しました。ただFlintoは特定の用途に非常に特化したツールなので、ユーザーエクスペリエンスの各部分について考えれば考えるほど、カスタムアイコンが数多く必要になることに気付きました。レイヤーリストからツールバー、トランジションデザイナからジェスチャーのドロップダウンメニューまで、インターフェースのほぼすべての部分でそれぞれのアイコンセットが必要だったので。アイコンのデザインが私の主な仕事になるまでに、時間はかかりませんでした。

大規模なアプリ内でアイコンやメニューなどをデザインするにあたって注意した点は？

デザインは常にコンテキストで決まるものです。意外でしたが、プロ用のMacアプリをデザインすることが、仕事をするにあたって最も複雑なコンテキストの1つだと知りました。アイコンだけをとってみてもそうです。ツールバーのアイコンは特定のサイズで、特定の見た目をしている必要があります。サイドバーアイコンの見た目とも違い、ドロップダウンメニューのアイコンとも違う。またアイコンの中には複数の場所で色々なサイズ、異なるスタイルで表示されるものもあります。Flintoのインターフェース全体を通じて統一性を保つため、どのアイコンも様々な環境に柔軟性を持って対応できるものにする必要がありました。「このシンボルは一定のサイズなら良く見えるけれど、別のサイズだとダメ」といったことがないよう心がけました。

アイコンのデザインプロセスは私の場合、まず紙に描くところから始まります。これは私の信念です。最初に1つのアイコンのあらゆるアイデアや可能性を描き出します。テーマやイメージされるメタファーは何か、どんなバリエーションが考えられるか。この「コンセプト」のフェーズでは、すべてを紙に描き出すこと...無関係に思える、規則性の見えないアイデアも出し切ることを念頭においています。次のステージに移ったところで内容を吟味します。それぞれのコンセプトを分析し、その特定のアイコンの目的や制限、コンテキストにどれだけ合っているかを検証するのです。

手描きおよびコンセプト案出しのプロセスと、検証のプロセスは明確に切り離すべきことが不可欠です。最初のプロセスでは、批判することなくイマジネーションや好奇心を使うことが重要。「プラスの（足す）」作業であり、瞬間の思いつきが活きるステージです。対して評価の段階に入ると、こちらも同等に重要ではありますが、今度は批評的かつ実用的な面から検証し、あらゆる意味合いを探る、これは「マイナスの（引く）」作業といえます。その両方を同時に行おうとすれば、ペンが紙に触れることもなく、何も生み出せずに終わることになります。

最近CreativeLiveでアイコンデザインについてのクラス（英語）を教えたのですが、その際にアイコンのデザイン原理として最も重要だと私が思うことをまとめました。以下が自分のアイデアやスケッチを評価する際に私が使うポイントです。

一般的に、たくさん出てきたコンセプトのうち、コンピューターまでたどり着くのはほんの一握り。Sketchを起動したら、制作の時間です。途中で色々クリエイティブな決断がありますが、一番の目的はアイコンのフォルムに磨きをかけること、そしてピクセル・パーフェクトにすること。そのどちらの重要性も強く信じているので、特に後者がきちんとされていない時には一騒動起こすことになります。

ピクセル・パーフェクトの概念（ピクセル単位で細部にわたってこだわる完成度）について、さらに詳しく教えて下さい。またその達成方法は？

「ピクセル・パーフェクト」という表現は、色々な意味を持ち得ます。1つの具体的な特性というよりは、目指したいところを表すのではないかと考えています。「細やかな配慮」といったものと同じように、軽視された時こそ非常に目に付くものです。ピクセル・パーフェクトの概念は、小さなアイコンの識別度および効果に多大な影響をもたらします。デザイン要素をピクセルグリッドに整合（ヒントは下記参照）するだけでは通常達成できません。簡単にいえば、アンチエイリアスとの格闘です。アンチエイリアスは素晴らしいものですが、特に斜線または曲線の場合、ぼやけた結果を招くことになりがちです。

例えばレイヤーリスト内で、レイヤーが非表示またはロックされている状態を示したいと考えました。簡単にクリックできるボタンであることはそれほど重要でなく（実際にはクリックできますが）、特にレイヤーが非表示かつロックされている場合はアイコン両方を見せる必要があるので、最小限のスペースを使って印で伝えることを念頭に置きました。これを達成するには、アイコンの細部にまでこだわり、ピクセル・パーフェクトなものにしなければなりませんでした。小さいながら大変クリアな8x8アイコンにできて、誇らしく思います。

良くできたベクターアイコンを様々なピクセル密度でエクスポートするだけで、すべての条件で美しく表示されるのが理想的です。ですが多くの場合は1xのUIエレメントにはデザインにある制限のため、それ以上のピクセル密度に流用する価値はありません。2xで完璧と思えるアイコンを作っても、1xバージョンにした時にクリアで良いものにするには調整が必要です。FlintoのUIでも、アイコンの少なくとも半数は1xバージョンと2xバージョンを別に用意しました。トランジションデザイナの「レイヤー接続」アイコンがその一例です。

興味のある方のために、Flinto内アイコンのアンチエイリアス処理を調整する際に使った私のテクニックのいくつかを紹介します

• より鮮明な結果を得るため、図形のサイズや位置を変更。位置や面積の値が小数点の付いた半端な数値になったとしても、変更しました。ここで肝心なのは値ではなく、見た目なので。
• 円の半径の角度90度ごとを描写するのに少なくとも2pある場合（下記参照）または線先端が角丸なら（下記参照）180度で3px使える場合のみ、曲線や角丸を使うこと。3x画面を誰もが使う日が来るまでは、線先端を1ptにするのは止めましょう。

• カーブした線や斜めの線で細いものの場合、枠線の幅・太さを1ptより少しだけ太いか細いくらいに調整。これにより太さがより均一に感じられます。
• 不要なぼやけたピクセルはマスクして隠す。図形がそのものの複製（形に変更なし）で隠されていても、効果があります。
• 図形か枠線を（同じ位置で）複製し、少しだけ太くしました。
• アイコンのより重要な部分が良くなる場合、ぼやけをアンチエイリアスで処理しても、問題ありません。

優れたアイコンとは？

それは難しい質問ですね！アイコンは小さなサイズにたくさんのデザイン原理が詰まっているものだから特に。実はそのトピックをアイコンデザインのクラスでも扱い、Flintoの仕事に関するストーリーも絡めて説明しました。そのうち1つは慣れ親しんだシンボルを使ったり、あからさまなほどわかりやすいものにすることについて。Flintoキャンバス内のホーム画面アイコンを作り始めた時、ネイサンがアイクラーホームを連想させるアイコンをデザインすることを思いつきました。アイクラー氏は、カリフォルニア州中で見られる「ミッドセンチュリーモダン」調の建物を建てた人です。

アイクラーホームは素晴らしいと思うし、ネイサンは実際に購入を考えていたところなので、一緒にこのアイデアを追求しました。私はホームアイコンのコンセプトを多数考え、色やグレースケール（透明度）に頼ることなく、アイクラーらしさを非常に小さな正方形（できれば16x16ピクセル）内に凝縮させようと努めました。その結果、肝心な役目を果たすことに関しては、こういった気の利いたアイコンが、ありがちなホームアイコンに勝てないことに気づいたのです。結局アイクラーの建築物にある非対称性を活かし、若干表現的なニュアンスを残したバージョンにしたものの、ユーザーが一目でピンとくる、わかりやすいアイコンに留めることにしました。

優れたアイコンのもう1つの特徴は、周りの環境と調和を図れること。アイコンのあるUIやサイズ、近くにあるテキストの太さ、OSの慣習、同じ部分で使われている別のアイコンなど、ここでいう環境には色々なものが含まれます。

ホームアイコンは単独で存在しますが、ツールバーアイコン、ジェスチャーアイコン、整列アイコンはセット内に共存しています。アイコンセットのデザインは、単独アイコンのデザインより何倍も難しくなる可能性があります。シンボルセットのデザインが半分くらい済んだところで、使っていたスタイルまたはメタファーが残りのアイコンではうまく機能しないと気づいてしまったら、全部やり直しですから！ 🙈

これは実際にジェスチャーアイコン（ここでは2倍の大きさで表示）で起こったことです。 今思えば当然ですが、そのシンプルさは多くの制限と将来的な可能性の検討によって生まれたものでした。上記のアイコンには、まだアプリで使われていないものも含まれています。ただもし使うことになった場合、アイコンセットを拡張できるとわかっていることが大切です。

このようなことについて、もっと学ぶにはどうしたらいいでしょう？

アイコン関連のことは私もすごく好きなので、CreativeLiveサイトを通じてアイコンデザインのクラスを最近オンラインで教えました。優れたアイコンのデザイン方法、Sketchで作り、SVGで見せ、さらにはアニメーションをするところまで説明しています。

リンクとクラスで使った資料などは、私のサイトからご覧いただけます。

似たようなプロジェクトを抱えている方は、アップルのMacアプリ内のアイコン ガイドラインと仕様もぜひご確認下さい。

このブログと同じ内容は、Medium（英語）でもご覧いただけます。

• Flintoを試してみよう！
• Twitterでシェア
• Facebookグループに参加

Flinto for Mac 1.4を本日公開しました！バージョン1.4は、これまで以上にデスクトップに最適化されたバージョンです。さらにデスクトップ用のデザインを行わない方にも役立つ新機能が数多く搭載されています。

デスクトップ用プロトタイプへの対応改善

新規ジェスチャーを2組（マウスオーバー＋マウスアウトとタッチダウン＋タッチアップ）追加しました。これらのジェスチャーを使えば、ボタンやメニューの上にマウスを動かした際の「ホバー」と「アクティブ」ステータスを簡単に作成できます。

スクロールホイール対応

スクロールグループ内で、マウスのスクロールホイールが使えるようになりました。デスクトップとWebでのプロトタイプをテストするのに便利な機能です。

画面の拡大

画面範囲を拡大し、画面に収まりきらず外へはみ出しているコンテンツを楽に表示できるようになりました。これで見えない部分があってイラつくことはありません。

比率の固定

この機能追加により、手違いでレイヤーが歪んでしまうようなことはなくなります。元の比率を保持したまま、レイヤーのサイズ変更が可能になりました。

トランジションの中断

最高にレスポンシブなトランジションを可能にするため、バックリンクのトランジションを中断すると、一時停止してからシームレスに反転再生されるようになりました。地味ながらかゆいところに手が届く改善です。

新規プロトタイプデモ

デザイナーPasquale D’Silva氏による、楽しいプロトタイプのデモを追加しました。このデモによって、Flinto for Macのフレキシビリティと実用性をご確認いただけると思います。Pasqualeは才能あるデザイナーまたイラストレーターとして活躍中で、Flintoスタッフもファンとして応援している人物です。iOSアプリをダウンロードすると、このプロトタイプをご覧になることができます。

• Flintoを試してみよう！
• Twitterでシェア
• Facebookグループに参加

Flinto for Macのバージョン1.3を本日リリースしました。1.3ではユーザーの皆さんから数多く要望をいただいていた新機能を搭載しました。

Sketch.appからのデザインアセット再読み込みが可能に

これまで（Flinto for Mac 1.3以前）は、SketchからFlintoにデザインを読み込んだ後に元のSketchファイルに変更を加えた場合、その変更を簡単にFlintoファイルに反映することはできませんでした。Flinto 1.3と新しいバージョンのプラグインではこの問題が解決され、プラグインを通じてSketchファイルの変更をすぐFlintoファイルに同期できるようになりました。この際、すでにFlinto上で作っているリンクやスクロールグループはそのまま維持されます。単なるレイヤーの色や形の変更だけでなく、Sketch上でのレイヤーの追加・削除、アートボードの追加などもFlintoファイルに反映されます。

• 同じSketchファイルを再度Flintoに送ることで、Flintoドキュメントを同期・更新できます
• Sketchプラグインでファイルの保存先を指定する必要がなくなりました
• Sketch上で末端のグループを1つのレイヤーに統合することで、Flinto上でのプロトタイプがシンプルになり、またFlintoへの送信が高速化されました
• その他の細かいSketchプラグインのバグが修正されています

開発者とのスプリングパラメータ共有が可能に

Flinto 1.3ではアプリ開発者向けの機能が2つ追加されています。1つ目はUIKitスプリングを指定できるようになりました。UIKitスプリングで指定する値は、iOSフレームワークのスプリングパラメータと全く同じものであるため、開発者は値をそのまま利用することができるようになりました。2つ目は従来Flintoで使われていたスプリング関数「RK4Spring」をオープンソースにしました。RK4Spring.swiftをプロジェクトに追加すると、Flintoで作成したアニメーションを簡単にアプリケーションで再現することができます。

アンドロイドとWebのプリセット追加

新規ドキュメント作成ウィンドウに、よく使われるAndroidとWebサイトのサイズをプリセットとして追加しました。もちろんこれまで通り、完全にカスタムサイズのプロトタイプを作ることも可能です。

レイヤーにジェスチャーをブロックするオプション追加

あるレイヤーが別のレイヤーの上に重なっている際に、ジェスチャーをブロックする機能が追加されました。スクロールレイヤーの上にオーバーフローを表示して、その部分ではスクロールジェスチャーをブロックしたい、というような場合に利用することができます。

レイヤータグにアニメーションカーブのプレビューが表示されるように

トランジションデザイナのアニメーションタグに、そのレイヤーのアニメーションカーブのプレビューが表示されるようになりました。これによって、どのレイヤーがアニメーションするかだけではなく、どのようにアニメーションするかも一目で確認できるようになりました。

トライアル終了後もMacアプリをビューワーとして使い続けることができるように

Flinto.comから無料でMacアプリをダウンロードし、トライアル終了後もプロトタイプを表示することが可能になりました。

リンクをグループ内に直接描画できるようになりました

バージョン1.2までは「リンク描画」機能で画面の最前面にしかリンクを描画できませんでしたが、1.3ではグループを選択してからこの機能を使うことで、そのグループ内に直接リンクを描画することができるようになりました。

---

質問や要望はhello@flinto.comまでお願いします。日本語でも受け付けています。Facebookグループ日本語版も合わせてご覧下さい。

• Flintoを試してみよう！
• Twitterでシェア
• Facebookグループに参加