SwiftUIでデザインシステムを構築する方法

1 つの製品をサポートする設計システムを構築するのは簡単ではありません。スケーラビリティのために堅牢で柔軟でなければなりません。困難ではありますが、多くの優れたリソースが、チームが視覚的にもプログラム的にも優れたシステムを構築するのに役立つ有用な原則とアプローチを共有しています。この記事は、SwiftUI で優れたシステムを構築することに焦点を当てることで、彼らの肩に寄り添い、手付かずの地に貢献しようとします。 .

なぜこの記事を書くのか

ニューヨークの ITP での最初の夏に、幸運にも Line Break Studio で iOS 開発者のインターンとして働く機会がありました。私が割り当てられたタスクの 1 つは、デザイン システムを 2 つのステップで構築することです。最初は Sketch で視覚的に、次に SwiftUI でプログラム的に構築します。 .新しいフレームワークを試し、それを使ってデザイン システムを構築した経験は素晴らしいものでしたが、途中でバグもありました。そのため、私たちの経験をコミュニティと共有し、開発プロセスが容易になることを願っています.

SwiftUI とは

Apple は、WWDC 2019 でこの画期的な新しいフレームワークをリリースしました。これは、ここ数年で最高のものの 1 つです。 SwiftUIでのプロジェクト開発経験はWeb開発者の立場から 従来のフロントエンド スタックとフレームワークのどちらに近いか。

インターフェイスのプログラミングと状態の管理が以前より大幅に簡単になったため、これは間違いなく素晴らしい動きです。この改善の最も良い部分は、UIKit と SwiftUI をスムーズに統合できることです。 SwiftUI の基本を学ぶには、Apple が提供する公式チュートリアルが非常に役立ちます。

デモ プロジェクト

デモンストレーションの目的で、Line Break Studio で構築したデザイン システムの簡易バージョンを作成しました。 ボタンのセットです 2 つの下位レベルのパーツの上に構築されたさまざまな形式のコンポーネント:タイポグラフィ と colorPalette .

プロジェクトは GitHub で公開されており、私は Xcode 11 Beta 5 を使用しています 開発のために。デザイン システム管理ハブとしての Airtable ベース (ワークフロー管理の詳細を参照) も参照用に公開されています。

建築設計システムの原則

Design System in Code は、デザイナーと開発者の間のミドルウェアです。システムの開発者は、設計システムから視覚的な形で入力を受け取り、さらに開発するために同一の API を生成します。このシステムをコードで完成させるには、次の 2 つの原則を認識する必要があります。

1.トークンと通信する

基本的に、デザイン システムをプログラムに組み込む目的は、コード管理や開発効率を向上させることではなく、ビューを確実にすることです。 設計ファイルと一致しています。その目標を達成するには、チーム内の開発者、デザイナー、マネージャー間のコミュニケーションの質を維持するために、トークンを使用して特定の色、フォント、サイズ、または視覚要素を示すことが重要です。

2.階層のレベル

EightShapes の記事では、「オプションがなければ決定を下すことはできない」ため、「最初にオプションを表示し、次に決定を表示する」必要があると指摘しています。

この種の順序付けアーキテクチャは、異なるレベル間の結合の程度を緩和するため、可能なリビジョンに対してより柔軟で動的なものを提供します。レベルの構成方法は、下から上へ、マテリアル → ベース → トークンの順です。しかし、いずれにせよ、チームが快適に過ごせる可能性があります。

コードに飛び込む

次のセクションは、私たちの経験に基づいて指摘したいハイライトのリストです。完全なコードについては、GitHub リポジトリにアクセスしてください。改善のためのフィードバックや批評を歓迎します。

1.階層レベルの設計

最上位レベルでトークンを構築するために下位レベルで材料を積み重ねる方法は 2 つあります:

• enum を使用 型安全性とコード リテラシー

関数内のグループ化ラッパーまたはパラメーターとしてコード内で enum を使用する利点は、すでに十分に認識されています。ここで言及する価値のあるポイントの 1 つは、階層レベルの実装です。

フォント サイズ (CGFloat) を含む生の値を常に保存します。 ) とフォント名 (String )、これをいじりたくないので、最低レベルで。しかし、生の値は列挙型のリテラルでなければならないため、単に case を割り当てることはできません 他の列挙型からの値になります。

この問題を回避するために、関数 getValue を実装します。 switch で生の値を返します

• struct を使用 より簡単な構造のために

enum は優れていますが、場合によっては独自の機能が必要ない場合もあります。たとえば、Xcode 動的な色を処理する重い仕事を処理し、API エンドポイントでパラメーター オプションは必要ありません。シンプルな 2 レベルの構造体でカラー パレットを設定できます。

2. API の明確でわかりやすいネーミング エンドポイント

命名規則は、議論と議論の対象となるもう 1 つの広範なトピックです。基本的な Swift の規則に加えて、私たちが遵守する唯一の 2 つのルールは、1) 頭字語を使用しないこと、2) シンプルにすることです。たとえば、タイポグラフィとカラー システムを使用するには、新しいエンドポイントを作成する代わりに、Font および Color 構造体から拡張を作成します。このアプローチにより、開発者がなじみのない API 名を覚える手間が軽減されます。

3. 2 つのモードでカラーセットを動的に管理

そのため、ダーク モードは業界の標準となり、iOS チームと Android チームの両方がこの機能を実装しています。これはユーザーにとっては良い傾向ですが、カラー セット、特にグレー スケール セットの管理と命名など、デザイナーや開発者にいくつかの課題をもたらす可能性があります。

白などの用語を使用して、グレー スケール カラーについて動的に考え、伝達する 、ライト 、黒 または暗い 動作しません。動的な色 #000000 を参照した場合 (16 進数の黒) 黒 または暗い light color scheme で 、#FFFFFFに変わるはずのこの特定の色についてどのように話しますか (HEX の白)、dark color scheme ? デフォルトダーク または lightDark ?

従来のアプローチでは、グレー スケールのダイナミック カラー セットに名前を付けるのは非常に紛らわしいものです。この混乱を避けるために、theme を使用します。 と contrast light で 1 セットの色を管理する と dark

反対のカラー モードでは、グレー スケール カラーを常に反転する必要はないことに注意してください。このような状況では、明るい色は明るいままで、暗いままです。代わりに、単に明るいまたは暗いという名前を付けます。

この命名方法に頭を悩ませると、Xcode でこのカラー パレットのアーキテクチャを管理するのは簡単です。 .カラーセットを作成するには、新しい Asset Catalog を作成するだけです ファイル → 新しい Color Set を追加 → Appearances を変更 Any, Light, Dark まで

4. environment 設定

SwiftUI フレームワークの素晴らしい機能の 1 つは、ターゲット ビューで環境値を制御する機能を提供する環境修飾子です。デザイン システムの構築に関しては、この機能により、ルート レベルでアプリのフォントを変更する便利な方法が提供されます。 environmentValue を使用するもう 1 つの利点 開発中に明るい配色と暗い配色を変更してテストすることです。

5. buttonStyle とボタンのラベル

UIKit の昔に比べて、SwiftUI で再利用可能なボタンを構築するのは非常に簡単です。ボタン ビューは action の 2 つの部分で構成されます。 クロージャー (ボタンが押されたときに発生するイベント) および label (ボタンの本体)。その後、修飾子 buttonStyle を使用してビューをチェーンできます .再利用可能なボタンの作成に関する詳細については、包括的で役立つ Alejandro のチュートリアルを読むことをお勧めします。

カスタマイズしたボタン コンポーネントでは、最初のステップは TokenButtonLabel を含む 2 つの構造体を作成することです。 と TokenButtonStyle .これら 2 つの構造体は、デザイン ファイルにあるボタンのタイプに従ってプログラムされます。たとえば、ラベルにはアイコンとテキストの 2 種類しかありません。各タイプには、対応する init があります 新しいインスタンス用に異なるパラメーターで設計された関数。

一方、ボタンのスタイルには大きく分けて、丸アイコン、アイコン、カプセル、テキストの 4 種類があります。 ButtonStyle をフォローするには プロトコル、makeBody func を実装する必要があります。この関数は configuration をもたらします ネイティブの isPressed を提供するプロパティ ボタンが押されたかどうかを監視する値。

最後に、TokenButtonLabel の上に積み重ねます と TokenButtonStyle 、ボタン コンポーネント API のエンドポイントは TokenButton になります。 - ビジュアル デザイン システムのボタン タイプに準拠して、ボタンのコンテンツとスタイルをまとめたグループ化。

6. AnyView ラッパーとして

makeBody を扱っているので ButtonStyle によってもたらされる機能 プロトコル、View を使用するための便利なヒントを見つけました .ビューを変数に格納するには、型注釈を AnyView として示すことができます 、SwiftUI のビューの一般的なコンテナーとして機能します。

私たちの場合、不透明度修飾子を configuration.label に追加したいので 各 switch で繰り返し行うのではなく、すべてのタイプのボタンに この場合、修飾子を最後にまとめてチェーンする方が理にかなっています。 AnyView の利点を利用して、このパターンを実現できます。 このように：

7. mutating でビュー修飾子を構築する 関数

ボタンのスタイルを動的に更新するために、独自の修飾子を作成できます。最初にカスタマイズされた変更可能な状態プロパティをビューでインスタンス化し、次に mutating を作成します Self を返す関数 ターゲット状態プロパティを更新した後に入力してください。

8.トリッキーなボーダー スタイル

SwiftUI の欠点の 1 つは、円形の境界線を持つ円の形状をスタイリングするのがまったく簡単ではないことです。私はしばらく苦労しましたが、最終的に StackOverflow で解決策を見つけました。 clipShape そして overlay 機能させるには修飾子が必要です。

結論

SwiftUI は、Apple が行った信じられないほどの改善です。欠陥はまだ存在しますが、iOS で堅牢で柔軟なデザイン システムを構築し、さらに複雑な UI を構築することは、これまで以上に効率的です。この記事が UI を構築しようとしているすべての iOS チームに役立つことを願っています。フィードバックはいつでも歓迎します!

? vinceshao.com で私の作品の詳細を読む / Twitter または LinkedIn でフォローしてください