Simple Design System (alpha)

FigmaのCode Connectを使用しています。

Simple Design System (SDS) は、Figmaの変数、スタイル、コンポーネント、Code Connectを Reactコードベースと組み合わせて、レスポンシブWebデザインシステムの完全な全体像を示すベースデザインシステムです。

SDS は単なるFigmaの別のデザインシステムではありません。デザインと開発の間にはまだ多くのギャップがあり、SDSはそれらを埋めるためのベストプラクティスを提供します。SDSは、多くのコード優先コンポーネントライブラリに典型的なシンプルなテーマレイヤーを超えたデザインでのカスタマイズ性を提供しながら、コードでの意味についても正直であろうとしています。

SDSを使って新しいプロジェクトを始めようとしている場合でも、一般的なデザインシステムのベストプラクティスの例を探している場合でも、このコードベースとデザインファイル内のツールが正しい方向に導いてくれるでしょう。

リソース

• Storybook
• Figma Community File

セットアップ

• npm i で依存関係をインストール
• npm run app:dev でlocalhost:8000でサーバーを起動し、App.tsxの内容をレンダリング
• npm run storybook でlocalhost:6006でStorybookを起動

Figma認証

• Figma APIトークンを作成
  • Code Connectスコープを追加
  • scriptsで統合機能を使用したい場合は、File Read、Dev Resources Write、Variablesスコープを追加
  • スコープの詳細
• .env-renameを複製
• .envにリネーム（gitから除外されます）
  • .envでFIGMA_ACCESS_TOKEN=にトークンを設定
  • .envでFIGMA_FILE_KEY=にファイルのキー（ファイルURLから取得）を設定

Code Connect

SDSは完全にFigmaのCode Connectによってサポートされています。これには、デザインシステム用のプリミティブの接続方法の例と、それらのプリミティブのコンポジションが含まれます。

このリポジトリはfigma.config.jsonでdocumentUrlSubstitutionsを使用しています。これにより、ドキュメントをFigmaファイルに依存しないようにし、すべてのFigmaファイル固有の情報を一箇所にまとめて、簡単にURL交換ができるようになります。ドキュメントURL置換は、リンクをクリックせずに関連コンポーネントを見つけられるように命名されています。キー<FIGMA_INPUTS_CHECKBOX_GROUP>は<FIGMA_[ページ名]_[コンポーネント名]>として分解されます。

{
  "documentUrlSubstitutions": {
    "<FIGMA_INPUTS_CHECKBOX_GROUP>": "https://figma.com/design/whatever?node-id=123-456"
  }
}

Code Connectドキュメントでより表現力豊かなURLを使用できます：

figma.connect(CheckboxGroup, "<FIGMA_INPUTS_CHECKBOX_GROUP>");

このリポジトリを複製したFigmaファイルに接続する

上記を踏まえて、Simple Design System Figmaファイルの新しいクローンはすべてのnode-idを維持する必要があります。手順は以下の通りです：

• Figma Community Fileを複製
• このリポジトリをクローン
• figma.config.jsonのURLをあなたのFigmaファイルを指すように更新
  • 注：新しいコンポーネントを作成、切り離し、再作成しない限り、ファイルキー（例：xuauf1WnNBmOwjkjaFq7P2）のみがURLの変更箇所です。
• Figma認証トークンを作成・設定
• この時点で、npx figma connect publishが動作し、新しいファイルがCode Connectを持つはずです。

構造

すべてのコンポーネントとスタイルはsrc/uiにあります。そのディレクトリ内で、コードはいくつかのカテゴリに分類されています。

src/ui/compositions

SDSを使ってレスポンシブWebサイトを構築する方法を示すプリミティブコンポーネントの配置例。

src/ui/hooks

カスタムReactフック定義

src/ui/icons

すべてのアイコンコンポーネント。scripts/iconsによって自動生成されます。

src/ui/images

プレースホルダー画像。

src/ui/layout

レイアウトコンポーネント。SDSレイアウトに不可欠ですが、Figmaに対応するコンポーネントはありません。

src/ui/primitives

メインコンポーネントライブラリ。SDSプリミティブはサブコンポーネントにさらに分解できません。

src/ui/providers

カスタムReactプロバイダー定義

src/ui/utils

カスタムユーティリティとユーティリティコンポーネント

Code ConnectとStorybook

すべてのCode ConnectドキュメントとStorybookストーリーは同じカテゴリ分けに従い、src/figmaとsrc/storiesで定義されています。

スクリプト

scriptsディレクトリにいくつかの統合例があります。これらには、あなたの組織がアクセスできる場合とできない場合がある追加のAPIスコープが必要な場合があります。可能な場合は、ギャップを埋めるのに役立つプラグイン例もあります。

scripts/component-metadata

• FigmaのJSコンソールで実行するスクリプト
• ファイル内のすべてのコンポーネントの説明を一括管理。複雑なプラグインを作る代わりに、JavaScriptコンソールから直接スクリプトを実行することで、より簡単にできます。
• scripts/component-metadata/exportComponentJSON.jsの内容をコピーし、ファイルを開いた状態でコンソールで実行。
  • 結果を「オブジェクトとしてコピー」してscripts/component-metadata/components.jsonに貼り付け。
• そこで説明をより簡単に変更できます。
• 説明を変更したら、JSONをコピーしてscripts/component-metadata/importComponentJSON.jsの上部のjson変数の値として貼り付け。
• インポートファイルのすべての内容をコピーしてコンソールで実行し、ファイル全体の説明を一括更新。
• これは説明のみを更新します。 Dev Resourcesを更新するには、scripts/dev-resourcesを使用できます。

scripts/dev-resources

• npm run script:dev-resources（REST APIのみ）
• scripts/dev-resources/devResources.mjsで記述されたすべてのコンポーネントのdev resourcesを一致するように設定。
• URLを一括交換する際に便利。REST APIトークンにDev Resources: Writeスコープが必要。

scripts/icons

• npm run script:icons:rest
• ファイルからすべてのアイコンを取得し、src/ui/iconsディレクトリにコンポーネントを生成。
• Code Connect用にsrc/figma/icons/Icons.figma.tsxも生成。

scripts/tokens

• npm run script:tokens:rest
• Figmaからすべての変数とスタイルを取得し、src/theme.cssに変換。
• scripts/tokens/tokensCodeSyntaxes.jsを作成。これはFigmaのJSコンソールで実行して、このリポジトリに一致するCSSですべての変数のcodeSyntaxesを更新するスクリプト。
• Variables REST APIを使わずに同じデータを取得する方法のプラグイン例を含む。
  • Developmentでプラグインをインストール
  • プラグインを実行し、プラグイン出力をscripts/tokens/styles.jsonとscripts/tokens/tokens.jsonにコピー
  • npm run script:tokens（:restなし）を実行すると、REST APIリクエストを行わずにJSONファイルを直接参照して更新