AutoLayoutおよびStack Groupを使用したSketchのレスポンシブFlexグリッド

構造、モジュール性、および規模の設計システムの改善

CSSのFlexBox、iOSのUIStackView、AndroidのFlexboxLayoutなどのツールは、今日存在する多数の適応的で応答性の高いビューを処理するために必要なワークフローを開発者に長い間与えてきました。

しかし、デザイナーにとって、私たちのお気に入りのデザインツールのレイアウト設計プロセスは、常により手作業で、静的で、退屈で、一般的に数学的に正確ではありません。しかし、アニマの人々による素晴らしい仕事のおかげで、私たちはすぐにそのギャップを埋めるために必要な構造と柔軟性を手に入れることができます。

最新の自動レイアウトプラグインにバンドルされている新しいスタック機能により、UI出力により良く対応し、設計システム全体で一貫性と保守性を高めることができるワークフローができました。 (免責事項—このコンセプトはまだ初期段階です。すべてのタイプのレイアウトがこのシステムの恩恵を受けるわけではないため、必要に応じて組み合わせてください。)

デモ

以下のビデオでは、スタックの素晴らしさを紹介するために、概念実証フレックスグリッドレイアウトをまとめました。基本的なWebページの構造を反映したアートボードです。

まだ初期の探索段階ですが、次の機能がテンプレートに組み込まれています。

  • 数回のクリックでデスクトップからモバイルに。
  • アートボードはサイズ変更可能で、グリッドの配置/分布は壊れません
  • グリッド構造:

  •  —ヘッダー
     —メイン
     — —セクション
     — — —行グループ(兄弟ボックスサイズ調整レイヤーがあります)
     — — — —行
     — — — — —列
     — — — — — —モジュール
     — — — — — — —コンポーネント(内部ロジック付きのネストされたシンボル)
     —フッター
  • スケッチのサイズ変更プロパティ、自動レイアウト固定、およびスタックグループの組み合わせで定義されるネストされたシンボルを使用して、スワップ可能なコンポーネントのモジュラーシステムを作成します。
  • レイアウトはアートボードの幅に合わせて調整されます(コンテンツの最大幅は1200ピクセル、モバイルには組み込みの溝があります)。
  • さまざまな列の分布と溝の簡単な折りたたみ/変更。
  • および
    は、
    から独立して拡大および縮小します。
  • 高さを
    に変更すると、アートボードで
    が押し下げられますが、余白とパディングはWebページのようにそのまま保持されます。
  • の高さを調整して、子列の高さに影響を与えることができます
  • 列の配置(上部、中央、下部、ストレッチ)は、行レベルで定義できます。
  • 行から新しい列を追加(または削除)すると、それに合わせて兄弟列の幅が自動的に調整されます。
  • 列内に新しい子モジュールを追加すると、その列は垂直に大きくなります(モジュールには、画像、テキスト、リスト、テーブル、グループ、シンボルなどのコンテンツタイプがいくつでも含まれます)
  • モジュールの配置(左、中央、右、ストレッチ)は列レベルで定義できます。
  • シンボルスワップコンポーネントは、コンテンツを置き換えるか、既存のコンポーネントに新しいレイヤーを固定します。
  • デスクトップアートボードは、8ポイントのベースライングリッドを使用するように設定されています。

スケッチファイル

ここにあります。任意の方法でそれを改善して、私に知らせてください。
*重要* —ファイルは、スタックをサポートする自動レイアウトの最新リリース(この記事の執筆時点では.0.2.0)がなければ機能しません。

https://cl.ly/2v2I373P2E1f

いくつかの最終的な考え

これが何人かの人々に役立つことを願っています。 AutolayoutとStacksの可能性をさらに深く探求するつもりです。このバージョンの時点で、数学の丸めにいくつかの小さな癖があることに気づきましたが、それらが時間内に整理されることを願っています。開発者に提案したいくつかのリクエストの中で、これらは価値があると思います。

  • スタックロジックに影響を与えることなく、スタックグループ(列の親行)に背景を追加する機能。 HTML / CSSでは、これは単にまたは「div」レベルで行われますが、Sketchでは現在のところそれを行う方法は許可されていません。
    今すぐこれを行うアプローチがあります。背景グループをスタックグループでグループ化し、bgをtop / left / 100%の幅と高さに固定します。コンテンツが削除されます。縮小はすでにチームのTO-DOリストに載っていると思います。
  • アートボードにブレークポイントを導入し、アートボードに基づいてシンボルを交換します(コンテナクエリアプローチを使用して、アートボード<400pxまたはそれ以上の場合、4アイテムのナビゲーションをハンバーガーアイコンに交換します)。
  • 上記のブレークポイントにより、スペースが不十分な場合に列が互いの上にスタックするように、水平スタックグループと垂直スタックグループを切り替える機能。また、指定されている場合、列をラップします。
  • 列ごとにパーセント幅を指定する機能。
    (更新—このアイデアのバージョンは、重み機能を使用してプラグインに実装されました)
  • これは必ずしもアニマチームに当てはまるわけではありませんが、Sketchは変数のサポートも導入する必要があります。特に、間隔、最小高さ、最大高さなどのプロパティや、複数のレイヤーで一貫性を保つ必要があるその他の値を使用する必要があります。これらの変数をさらに使用して色にマッピングし、Sassのハンドオフプロセスを支援することもできます。

まあ、それは私が得たすべてです!アニマのチームにもう一度叫びをあげたかっただけです。彼らは信じられないほど才能があり、反応がよく、魅力的ですので、彼らのハードワークをサポートしてください! Facebookページに参​​加してください。

ご質問やご意見がございましたら、お気軽に以下に投稿するか、Twitterでご連絡ください。