デザイン系の依頼から始まりました。デザイン システム チームは、既存のボタン コンポーネントに、より大きなサイズのオプションを追加するよう依頼されました。他のサイズを調べた後、別のサイズを推定することもできましたが、気になったのは... サイジングに関して従うべき普遍的なルールはありますか?」

残念ながら、答えはノーでした。いくつかの値は共通していましたが、一貫したものはありませんでした。システム全体でまとまりのあるサイズ、間隔、スケールを確保するためのルールはありませんでした。

基本に戻る

優れた設計は、通常、基本を正しく行うことに根ざしています。多くのデザイナー (私のような) にとって、タイポグラフィはデザインの最も重要な基本要素です。タイプ スケールを調べて、一般的な比率と方法に基づいてスケーリングするプロポーショナル デザインを作成する方法を確認しました。

プロポーシオの紹介

Proportio は、設計者がプロポーショナル デザイン システムの基礎を作成するための Web アプリケーションです。タイポグラフィのスケールと、それらをアイコン、サイズ変更、間隔、およびコンポーネントの構成に適用する方法を調べることができます。プロポーショナル デザイン システムにより、コンポーネントのサイズと密度を簡単に設定できます。

基盤システムの構築

型スケールを定義することから始めます。これは、システムの残りの部分で使用されます。ベース フォント サイズが使用され、マイナー サード (1:1.125) などの倍率が使用されます。他のすべてのフォント サイズは、この比率に基づいています。

タイポグラフィとアイコンのペアリングはデザイン システムで一般的かつ重要な要素であるため、アイコンはタイプ スケールに基づいて自動的にサイズ変更されます。

テキストとアイコンの間隔も、タイプ スケールに基づいて比例します。これにより、それらの間の間隔が相対的でバランスが取れていることが保証されます。同様に、プロポーショナル サイズ スケール、半径スケール、さらには高さ (ドロップ シャドウ) スケールを作成できます。

コンポーネントシステム

ここで、物事は本当に興味深いものになります。

基本システムが完成したら、タイプ スケールまたはスペーシング スケールのいずれかを使用して、コンポーネントのパディングと高さを調整できます。ベース (デフォルト) サイズのコンポーネントは、ベースタイプのサイズ (デフォルトでは 16px) を使用します。

選択したスケールの増分に基づいて UI で生成される小さいサイズと大きいサイズを追加できます。

多かれ少なかれ密度の高いオプションを追加することもできます。密度はサイズに似ていますが、コンポーネントのパディングと高さにのみ影響します — テキストとアイコンのサイズは変わりません。これらもスケールに基づいて生成され、密度が拡大または縮小する速度を変更できます。

コンポーネント ビューを切り替えて、テキストのみ、アイコンのみ、またはその両方がある場合にコンポーネントがどのように表示されるかを確認できます。ビューを切り替えてコンポーネントの仕様を表示することもできます。

コンテナシステム

コンポーネント システムと同様に、Proportio では比例的にスケーリングされたコンテナを作成できます。

たとえば、ポップオーバーは小さなコンテナー (コーナーの半径とパディングが小さい) である可能性があります。カードのような大きなコンテナは、角の半径とパディングを大きくすることができます。モーダル ダイアログはさらに大きなコンテナーと見なされる場合があり、インターフェイス システムで適切に表示するには、最大のパディングと最大のコーナー半径が必要です。

同じ比例システムを使用して、スケーリングされたパディング、スケーリングされた半径、さらには標高 (必要な場合) を持つコンテナーを作成できます。

値のエクスポート

使用するシステムを作成したら、それらをデザイン トークン (W3C ドラフト形式) または CSS 変数としてエクスポートできます。これにより、システムをエンジニアに引き渡すことが容易になります。

現在、これらの値を Figma に直接取り込む方法はありません 。したがって、現在の状態では、真の「設計ツール」というよりも、システムで使用したいものを定義するためのプロトタイプとしてより有用です。しかし、そうは言っても、 Proportioはオープンソースのツールであるため、気が向いたらこの機能を追加できます.

オープンソース

Proportioはオープンソース プロジェクトです。私は、デザイン システム コミュニティに恩返しをして、新しいアイデアを共有したり、刺激したりして、私たち全員が一緒に成長できるようにすることを強く信じています。

このツールはまだ初期段階にありますが、Proportio を設計と開発に最大限に活用するのに役立つ追加機能が開発中です。