プロダクト概要
VTEX Design Systemは、Eコマースプラットフォームでスケーラブル、一貫性、アクセシビリティのあるデジタル体験を構築するためのVTEXの公式オープンソースデザインシステムです。オンラインストア、チェックアウトフロー、管理パネルに合わせた再利用可能なUIコンポーネント、パターン、ガイドライン、ツールを提供し、ReactコンポーネントとFigmaライブラリを使用してパフォーマンス、国際化、開発者の生産性に焦点を当てています。 コンポーネントライブラリ：テーマと状態のためのバリアントを備えたボタン、フォーム、カード、商品グリッド、チェックアウトウィジェットの再利用可能な要素。 デザイントークン：ブランドの一貫性のためのセマンティックカラー、タイポグラフィ、間隔、アイコン、モーション。 アクセシビリティ：ARIAサポートと包括的なパターンを備えたWCAG準拠。 ツール：プロトタイピングのためのFigmaキット。実装のためのReactライブラリ（VTEX Styleguide）。
label.best_for
デザイントークン: Semantic 色, タイポグラフィ, 間隔, アイコン, と motion のための ブランド consistency. アクセシビリティ: WCAG compliance を使った ARIA サポート と inclusive パターン. ツール: Figma キット のための プロトタイピング; React ライブラリ (VTEX Styleguide) のための implementation.
主な機能
- コンポーネントライブラリ: Reusable elements のような buttons, forms, cards, product grids, と checkout widgets を使った variants のための themes と states.
- デザイントークン: Semantic 色, タイポグラフィ, 間隔, アイコン, と motion のための ブランド consistency.
- アクセシビリティ: WCAG compliance を使った ARIA サポート と inclusive パターン.
- ツール: Figma キット のための プロトタイピング; React ライブラリ (VTEX Styleguide) のための implementation.
メリット
- +オープンソース
- +豊富なアイコンライブラリ
- +カラーパレット生成
- +アクセシビリティのコントラスト確認
デメリット
- -導入にはチームの合意が必要
- -カスタマイズが複雑になる場合あり
/// スペック
- 価格:free
- プラットフォーム:Browser
ASSETS_DIRECTORY
/// 関連ツール
