すべてのプロジェクトの右側は live preview(ライブプレビュー)です。モックアップではなく、プロジェクトフォルダ内の実際のファイルをローカルで配信し、エージェントが書き込むたびに再描画しています。見えているものが、そのまま出荷されるものです。
Result、Code、Split
パネル上部のタブで、同じ状態の見方を切り替えます。
- Result — レンダリングされたデザイン。ステアリングはここで行います。
- Code — プレビューの下にあるソース。ファイルを見たいときに。
- Split — 両方を並べて表示。
ビューポートとズーム
ツールバーのデバイスボタンで、固定幅での結果のリフローを確認できます。デスクトップ、タブレット、スマートフォンです。実行を離れずにデザインの応答を確かめられます。隣には 50 / 100 / 150% のズーム段階があり、幅チップはゲートがチェックするブレークポイント(ナビやヒットターゲットが最も破綻しやすい、スマートフォンとタブレットのサイズ)に直接ジャンプします。
チェックはライブなので、ゲートが実行する 5 幅の比較(デスクトップ、ラップトップ、タブレット、2 つのスマートフォン幅)は、ターンの終わりを待たずいつでも自分で目視できます。
選択、コメント、ツールレール
プレビュー内で ⌥-hover するとカーソル下の要素がハイライトされます。エージェントが見るのと同じ要素です。⌥-click でコメントをピン留めします。レールのボタンはステアリングドロワーを開きます。ライブコントロールの Tweaks、ピンと描画の Comment mode、デザインに見た目の理由を尋ねる Designer talk です。それぞれ Steering 以下に個別のページがあります。
プレゼントモード
Present はスタジオの装飾を外し、結果でウィンドウを埋めます。同じ部屋の誰かに実行結果を見せるときや、トランスクリプトなしでデザインだけを眺めたいときに。Escape でプロジェクトに戻ります。
エージェント作業中もライブなもの
プレビューはターンの途中も再描画します。終わりだけではありません。デザインがファイルごとに組み上がっていくのを眺められます。ステアリング(選択、コメント、Tweaks)もライブのままで、新しいメモはビルドを中断せず次のターンにキューされます。
ヒント: 結果を完成と呼ぶ前にスマートフォンのビューポートを確認しましょう。ゲートは必ず見ます。デスクトップ幅では動くのにモバイルで行き止まりになるナビは、最も多い FAIL の原因です。