イレブン ラボ ブログ – システムの小道具: 設計の柔軟性と一貫性

この記事では、という概念について紹介します。 システム小道具 具体的な使用例を交えてその利点を説明します。 また、私たちのプロジェクトで行ったのと同様に、それらをあなたのプロジェクトに実装する方法についても説明します。 スタジオイレブンラボ の実装を通じて デザインシステム。

システムプロップとは何ですか?

ザ システム小道具、 としても知られている システムプロパティ または スタイル小道具、コンポーネントのスタイルを即座にカスタマイズするために特別に設計されたプロパティのリストです。 従来の小道具とは異なり、これらは システム小道具 追加のオプションを追加して、コンポーネントの動作と外観を調整します。 例えば、 SpacingSystemProps 要素の間隔を簡単にすばやく定義できます。 ColorSystemProps 背景、テキストの色、境界線などを変更するための事前定義されたカラー パレットが提供されます。 これらのプロパティをコンポーネントに統合すると、便利なショートカットを使用してスタイルをカスタマイズできるため、時間を節約できます。 これは、特に デザインシステム。

システムプロップの主な利点

ザ システム小道具 プロジェクトの再利用性、予測可能性、標準化の向上に役立ついくつかの利点を提供します。 その利点の一部を次に示します。

• 一貫したカスタマイズ:

と関連した デザイントークン、調整に必要な柔軟性を維持しながら、コンポーネントを均一にカスタマイズできます。 この組み合わせにより、視覚的な一貫性と応答性が確保され、変化するニーズに適応しながらコンポーネントが標準を確実に満たすことができます。

• コードの重複を減らす:

再利用可能なカスタマイズ標準を作成すると、メンテナンスが簡素化され、同様のスタイルが重複して再作成されることがなくなります。 プロジェクトのニーズに応じて、毎回新しいコンポーネントを作成しなくても、コンポーネントのバリエーションを持たせることができます。 したがって、コンポーネントを使用できます Card 色と間隔を変えて数回。

繰り返し行われるマイナーなスタイルのカスタマイズにかかる時間を節約することで、ビジネス ロジックや高度な機能など、開発のより複雑な側面に集中できるようになります。

• 明確なドキュメントと容易なコラボレーション:

ザ システム小道具 明確で一貫した文書化を奨励し、チームが採用しやすくします。 これにより、新しいメンバーは一貫した方法でコンポーネントをカスタマイズする方法をすぐに理解できるようになります。

System Props の概念を使用した人気のあるライブラリの例

ザ システム小道具 は多くの一般的なライブラリで使用されており、それぞれにコンポーネントをカスタマイズするための独自の仕様があります。 これらのライブラリの例とその特徴をいくつか示します。

Chakra UI は、カスタマイズ可能なコンポーネントに基づいたデザイン システムを提供します。 スタイル小道具 コンポーネントのスタイルを調整します。 CSS-in-JS で動作します。

Stitches は React 用の CSS-in-JS ライブラリであり、次を使用してスタイルを定義できます。 スタイル小道具 同様に 感情 これは CSS-in-JS ライブラリです。 それ自体はデザイン システムではありませんが、デザイン システムの作成に必要なツールを提供します。

Klass は Stitches に似ていますが、CSS-in-JS を使用しません。 ユーティリティ クラスを挿入し、React、Preact、Solid と互換性があり、その純粋な機能のおかげでフレームワークに依存しない方法で使用できます。 と組み合わせられることが多いです 追い風 CSS 高度なカスタマイズに。

他にも、次のようなものがあります。 MUI（マテリアルUI）、 基数UI、 アンティ、 プライマー、も使用します システム小道具 ユーザー インターフェイス コンポーネントのカスタマイズを簡素化します。

使用例

の実装を説明するには、 システム小道具 コンポーネントの中で、コンポーネントを使った具体的な例を見てみましょう Box。 ザ システム小道具 は、一貫性のある柔軟な方法でコンポーネントの外観をカスタマイズするために使用する特定のプロパティです。

<Box
    as="article"
    bg="primary"
    p="s"
>
    <Text color="accent" size="m">
        Contenu
    Text>
Box>

この例では、コンポーネントを使用します Box 一部で システム小道具 その外観を定義します。 背景色などのプロパティを指定します bg、間隔 p、テキストの色も同様です color そしてフォントサイズ size コンポーネント用 Text。

次のようなライブラリを使用した場合 Klass、ユーティリティ クラスを挿入する場合、HTML に変換した後の結果は次のようになります。 ザ システム小道具 対応する CSS クラスに変換されます。

<article class="bg-primary p-s">
    <p class="color-accent text-size-m">Contenup>
article>

この例は、その方法を示しています。 システム小道具 これにより、アプリケーション内の視覚的な一貫性を確保しながら、コンポーネントのスタイルを明確かつ簡潔にカスタマイズできます。

システムプロパティを統合および実装する方法

システム プロップをプロジェクトに効果的に統合するには、構造化されたアプローチが不可欠です。

関連するシステムプロパティを特定する

統合を開始する前に、 システム小道具 プロジェクトでは、デザイン システムに関連するプロップを特定することが重要です。

• ニーズを分析する: プロジェクトまたはデザイン システムの特定の要件を確認してください。 頻繁に繰り返される頻繁に必要なカスタマイズ、スタイル、または動作を特定します。

• デザイン システムを参照してください。 すでに既存の Design System がある場合は、ドキュメントを参照して、 システム小道具 既存のプロパティを確認し、検討しているプロパティがまだ含まれていないことを確認してください。 必要に応じて、既存のプロパティのいくつかを統合することも検討してください。

• 新しいシステム プロパティを作成します。 もし システム小道具 既存のものはニーズを満たしていないため、新しいものを作成することを検討してください システム小道具。

• 応答値 : 状況によっては、サイト上のさまざまな種類のデバイスへのアクセシビリティと適応性を確保するために、画面サイズに基づいてさまざまな値を追加する必要がある場合があります。 この件については、実装中に改めて説明します。

システム小道具を実装する

を実装するための 3 つの異なる方法を検討します。 システム小道具。 これらの各方法は、ニーズや好みに応じて特定の利点を提供します。

• クラス名を使用した最初の実装:

最初の方法には、次の使用が含まれます。 クラス名 に基づいてユーティリティ CSS クラスを生成するには システム小道具。

import classNames from 'classnames';
...

export interface ColorSystemProps {
    bg?: ColorTokenValue;
    color?: ColorTokenValue;
}

export interface SpacingSystemProps {
    p?: SpacingTokenValue;
    ...
}

export interface BoxProps extends ColorSystemProps, SpacingSystemProps {
    children: React.ReactNode;
}

export const Box: React.FC = ({ bg, color, p, children }) => {
    <div className={classNames({
        [`bg-${bg}`]: bg,
        [`color-${color}`]: color,
        [`p-${p}`]: p,
    })}>
        {children}
    div>
};

この実装では、単に、 システム小道具 スタイルをパーソナライズします。

• Klass を使用した 2 番目の実装:

この 2 番目のアプローチでは、ライブラリを使用します。 クラス の管理を簡素化するために システム小道具。 クラス コンポーネントで指定したプロパティからユーティリティ クラスを自動的に生成し、プロセスを大幅に簡素化します。

import { klassed } from '@klass/react';

const colorTokenValues = {
    primary: '#3767B6',
    secondary: '#DD3156',
    ...
};

const spacingTokenValues = {
    xs: '4px',
    s: '8px',
    ...
};

const Box = klassed('div', {
    variants: {
        bg: colorTokenValues,
        color: colorTokenValues,
        p: spacingTokenValues,
    },
});

プロパティを作成するには 応答性の高いでは、目的のブレークポイントごとに条件を追加し、対応する値を指定できます。

import { reklassed } from '@klass/react';

...

const Box = reklassed("div", {
    conditions: {
        base: "",
        sm: "sm:",
        md: "md:",
        lg: "lg:"
    },
    defaultCondition: "base",
    variants: {
        bg: colorTokenValues,
        color: colorTokenValues,
        p: spacingTokenValues,
    },
};

条件はさまざまなブレークポイントです。サイトの大部分はモバイルファーストであるため、デフォルト条件としてモバイルを適用します。

このコンポーネントを使用するには、単に 応答性の高い値 :

• ステッチを使用した最新の実装:

3 番目の方法は、次の使用に基づいています。 ステッチ、CSS-in-JS ライブラリ、管理用 システム小道具。 Stitches は、指定されたプロパティごとに CSS-in-JS を生成します。

import { styled } from '@stitches/react';

const Box = styled('div', {
  variants: {
    bg: {
        primary: {
            backgroundColor: '#3767B6',
        },
        secondary: {
            backgroundColor: '#DD3156',
        },
        ...
    },
    ...,
    p: {
        xs: {
            padding: "4px"
        },
        s: {
            padding: "8px"
        }
    }
});

レスポンシブの仕組み ステッチ と類似しています クラスでは、目的のブレークポイントごとに条件を指定できます。

文書化する

チーム メンバーがシステム プロップの正しい使用方法を確実に理解できるようにするには、ドキュメントが不可欠です。 明確で詳細なドキュメントにより、導入と一貫性が促進されます。

• 説明 ： 各プロパティの説明を入力します。このシステム プロパティが影響する CSS プロパティとその可能な値。値がデザイン トークンにある場合は、このトークンにリダイレクトするリンクを追加します。

• 例: これらの小道具をどのように適用できるかを示す使用例を含めることができます。 ストーリーブック。

• 互換性: どのコンポーネントが各システム プロップをサポートするか、またそれらがスタイルや動作にどのように影響するかを指定します。

結論

System Props を採用すると、開発プロジェクト内の柔軟性、一貫性、標準化が大幅に向上します。 このアプローチは、現在のプロジェクトであっても、現在作成中のデザイン システムであっても、関連する小道具を特定することから始まります。 これらの小道具が特定されたら、次のステップはそれらをコンポーネントにシームレスに統合して、均一なカスタマイズを保証することです。

以内 スタジオイレブンラボ、システム プロップを適用して開発します デザインシステム 社内プロジェクトとクライアントを対象としています。 このアプローチにより、この記事で説明したすべての利点を活用することができました。