Edge Reflow のプレビュー 7 が公開されました。
とりあえず起動すると、お試し用のプロジェクトが表示されます。Reflow の基本的な使い方が分かるようにデザインされたページで、初めての人がそのままいろんな機能を試せるようになっています。
お試しプロジェクトが自動的に表示されるのは、初回起動時のみです。後で表示させたくなったときは、Help メニューから "Open Welcome Project" を選択します。
Reflow は、Tab キーを押すと、プレビューモードに切り替えられるので、サンプルの動作確認、編集してその結果を確認、などが手軽にできます。Reflow 取っ付きにくいよーと感じていた方も、今回は楽しめるかもしれません。
また、今回はレイアウトエンジンが刷新されたこと、ボタン等のフォーム要素が扱えるようになるなど、プロトタイプツールとしても使えそうな変更が行われました。少し製品の位置付けが変わってきた印象です。
以下は、主な新機能のリストです。
- ウェルカムプロジェクト
基本機能をすぐに試せるサンプルページ。新機能の紹介も兼ねる - フォーム要素
ボタン、ドロップダウン、ラジオボタン、チェックボックス等のコンポーネントをデザイン要素として配置 - ステートごとのスタイル設定
マウスオーバーやプレス時それぞれの状態の見た目を各コンポジションに設定可能 - 複数ページ間のリンク
ページ間のリンクを設定してナビゲーションを制作、クリックしてページ間の遷移を確認 - 刷新されたレイアウト操作
新しいレイアウトエンジンとキャレットにより、ドラッグ & ドロップによるレイアウト操作を使いやすく - アセットの検索
アセットパネルに追加された検索フィールドを使ってアセットのフィルタリングができる - グループの可視化
グループ化されたアイテムの周囲に点線の矩形が表示されるように変更
かなり力の入った更新であることが伺えます。特にレイアウト操作は楽になったという印象です。
英語ですが、新機能のデモがこちらのビデオで紹介されています。 ( What's new in Adobe Edge Reflow CC (Preview 7) )
プロトタイプ作成ツールとしての Reflow
当初、Reflow の開発は、レスポンシブなデザインカンプ作成ツールとして始まりました。「可変幅のステージを持つデザインツール」 というアイデアです。
今回は、コンポーネントやインタラクションの設定など、動的な要素を追加する機能が加わりました。Reflow を使ってページ遷移やボタンの操作感の確認を含むプロトタイプの作成ができるわけです。
Edge Inspect と連携すれば、Reflow 内のデザインをそのまま実機で表示 & 操作が可能です。本格的なデザインを始める前に、ちょこっとつくって確認、という使い方などに良さそうです。
具体的には、まず、全ての要素に対して、hover、active、focus のステートとリンク先 URL が設定できるようになりました。設定用の UI は、プロパティパネルの上部に追加されています。
また、フォーム要素として、button、text input、select、checkbox、radio button の 5 種類が追加できます。Reflow なのでロジックまでは書けませんが、選択リストの項目を設定できるなど、ある程度の作り込みが可能です。
フォーム要素を追加するにはツールバーの右端のアイコンをクリックします。または F キーを押すとフォーム要素入力モードに切り替わります。
注意事項
Mac OS 10.9 では、ファインダーがカバーフロー表示の状態で Reflow からファイル操作を行うと Reflow が固まるまたはクラッシュすることがあるそうです。
PSD から Reflow プロジェクトを生成する機能を使用するには、Phoshop CC のバージョンが 14.1 以降であることが必須です。
コメントする