● オンライン
VTEX Design System

VTEX Design System

オープンソース フレームワーク のための consistent, accessible e-commerce interfaces.

無料デザインシステム

プロダクト概要

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
/// 関連ツール