senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/veza-docs/vision/domains/misc/figma-components.md

12 KiB
Raw Blame History

id title sidebar_label
figma-components 🧩 Composants Figma - Veza Platform 🧩 Composants Figma - Veza Platform

NOTE: Cette page décrit la CIBLE (but visé).

🧩 Composants Figma - Veza Platform

Spécifications détaillées des composants pour la réalisation Figma

📋 Structure des Composants

1. Navigation Components

Header Principal

Nom: Header
Variants: Default, Mobile

Spécifications :

  • Container : 1440px x 64px
  • Background : #1F2937 (gray-800)
  • Border : 1px solid #374151 (gray-700)
  • Padding : 0 24px

Éléments :

  • Logo : 32px x 32px, left align
  • Recherche : Input 400px x 40px, center
  • Notifications : Icon 24px + badge, right align
  • Profil : Avatar 32px + dropdown, right align

States :

  • Default
  • Hover (notifications, profil)
  • Active (recherche focus)
  • Mobile (drawer open)

Sidebar Navigation

Nom: Sidebar
Variants: Default, Collapsed, Mobile

Spécifications :

  • Container : 256px x 100vh
  • Background : #111827 (gray-900)
  • Border : 1px solid #374151 (gray-700)
  • Padding : 24px 0

Éléments :

  • Logo : 32px x 32px, top
  • Navigation Items : 9 items, 48px height each
  • User Section : bottom, 80px height

States :

  • Default (expanded)
  • Collapsed (64px width)
  • Mobile (drawer)
  • Hover (item highlight)
  • Active (item selected)

Mini-Player

Nom: MiniPlayer
Variants: Default, Playing, Paused

Spécifications :

  • Container : 100% x 80px
  • Background : #1F2937 (gray-800)
  • Border : 1px solid #374151 (gray-700)
  • Padding : 12px 24px

Éléments :

  • Cover : 56px x 56px, left
  • Track Info : Title + Artist, center-left
  • Controls : Play/Pause, Previous, Next, center
  • Volume : Slider, center-right
  • Queue : Icon + count, right
  • Full Player : Icon, right

States :

  • Default (no track)
  • Playing (track loaded)
  • Paused (track paused)
  • Loading (spinner)

2. Card Components

Track Card

Nom: TrackCard
Variants: Default, Hover, Playing, Selected

Spécifications :

  • Container : 100% x 80px
  • Background : #1F2937 (gray-800)
  • Border : 1px solid #374151 (gray-700)
  • Border Radius : 8px
  • Padding : 16px

Éléments :

  • Cover : 64px x 64px, left
  • Track Info : Title + Artist, center-left
  • Duration : Time, center-right
  • Actions : Like, Share, More, right

States :

  • Default
  • Hover (#374151 background)
  • Playing (accent border)
  • Selected (primary background)
  • Loading (skeleton)

Playlist Card

Nom: PlaylistCard
Variants: Default, Hover, Selected

Spécifications :

  • Container : 200px x 280px
  • Background : #1F2937 (gray-800)
  • Border : 1px solid #374151 (gray-700)
  • Border Radius : 8px
  • Padding : 16px

Éléments :

  • Cover : 120px x 120px, top
  • Title : Playlist name, center
  • Description : 2 lines max, center
  • Track Count : Number + "tracks", center
  • Actions : Play, More, bottom

States :

  • Default
  • Hover (scale 1.02)
  • Selected (primary border)
  • Loading (skeleton)

User Card

Nom: UserCard
Variants: Default, Hover, Online, Offline, Busy

Spécifications :

  • Container : 100% x 100px
  • Background : #1F2937 (gray-800)
  • Border : 1px solid #374151 (gray-700)
  • Border Radius : 8px
  • Padding : 16px

Éléments :

  • Avatar : 48px x 48px, left
  • Name : User name, center-left
  • Role : User role, center-left
  • Status : Badge, center-right
  • Actions : Follow, Message, right

States :

  • Default
  • Hover (#374151 background)
  • Online (green badge)
  • Offline (gray badge)
  • Busy (red badge)

3. Button Components

Primary Button

Nom: ButtonPrimary
Variants: Default, Hover, Active, Disabled, Loading

Spécifications :

  • Background : #6366F1 (indigo-500)
  • Text : #FFFFFF (white)
  • Padding : 12px 24px
  • Border Radius : 8px
  • Font : 16px, Semibold

States :

  • Default
  • Hover (#4F46E5 background)
  • Active (scale 0.98)
  • Disabled (opacity 50%)
  • Loading (spinner)

Secondary Button

Nom: ButtonSecondary
Variants: Default, Hover, Active, Disabled

Spécifications :

  • Background : transparent
  • Text : #6366F1 (indigo-500)
  • Border : 1px solid #6366F1 (indigo-500)
  • Padding : 12px 24px
  • Border Radius : 8px
  • Font : 16px, Semibold

States :

  • Default
  • Hover (indigo background)
  • Active (scale 0.98)
  • Disabled (opacity 50%)

Ghost Button

Nom: ButtonGhost
Variants: Default, Hover, Active, Disabled

Spécifications :

  • Background : transparent
  • Text : #9CA3AF (gray-400)
  • Padding : 12px 24px
  • Border Radius : 8px
  • Font : 16px, Semibold

States :

  • Default
  • Hover (#374151 background)
  • Active (scale 0.98)
  • Disabled (opacity 50%)

4. Form Components

Input Field

Nom: InputField
Variants: Default, Focus, Error, Disabled, With Icon

Spécifications :

  • Container : 100% x 48px
  • Background : #1F2937 (gray-800)
  • Border : 1px solid #374151 (gray-700)
  • Text : #F9FAFB (gray-50)
  • Placeholder : #9CA3AF (gray-400)
  • Padding : 12px 16px
  • Border Radius : 8px
  • Font : 16px, Regular

States :

  • Default
  • Focus (#6366F1 border)
  • Error (#EF4444 border)
  • Disabled (opacity 50%)
  • With Icon (left padding 40px)

Textarea

Nom: Textarea
Variants: Default, Focus, Error, Disabled

Spécifications :

  • Container : 100% x 120px (min)
  • Background : #1F2937 (gray-800)
  • Border : 1px solid #374151 (gray-700)
  • Text : #F9FAFB (gray-50)
  • Placeholder : #9CA3AF (gray-400)
  • Padding : 12px 16px
  • Border Radius : 8px
  • Font : 16px, Regular
  • Resize : vertical

States :

  • Default
  • Focus (#6366F1 border)
  • Error (#EF4444 border)
  • Disabled (opacity 50%)

Select Dropdown

Nom: SelectDropdown
Variants: Default, Open, Disabled

Spécifications :

  • Container : 100% x 48px
  • Background : #1F2937 (gray-800)
  • Border : 1px solid #374151 (gray-700)
  • Text : #F9FAFB (gray-50)
  • Padding : 12px 16px
  • Border Radius : 8px
  • Font : 16px, Regular
  • Dropdown : #111827 (gray-900) background

States :

  • Default
  • Open (dropdown visible)
  • Disabled (opacity 50%)

5. Modal Components

Modal

Nom: Modal
Variants: Default, Large, Small

Spécifications :

  • Overlay : rgba(0, 0, 0, 0.5)
  • Content : #1F2937 (gray-800)
  • Border Radius : 12px
  • Padding : 24px
  • Max Width : 500px (default), 800px (large), 400px (small)
  • Shadow : 0 20px 25px rgba(0, 0, 0, 0.1)

Éléments :

  • Header : Title + Close button
  • Body : Content area
  • Footer : Actions (buttons)

States :

  • Default
  • Large (800px width)
  • Small (400px width)
  • Loading (spinner)

Toast Notification

Nom: Toast
Variants: Success, Error, Warning, Info

Spécifications :

  • Container : 400px x 80px
  • Background : #1F2937 (gray-800)
  • Border : 1px solid #374151 (gray-700)
  • Text : #F9FAFB (gray-50)
  • Padding : 16px
  • Border Radius : 8px
  • Shadow : 0 10px 15px rgba(0, 0, 0, 0.1)
  • Position : top-right

States :

  • Success (green accent)
  • Error (red accent)
  • Warning (yellow accent)
  • Info (blue accent)

6. Player Components

Full Player

Nom: FullPlayer
Variants: Default, Playing, Paused, Loading

Spécifications :

  • Container : 100% x 400px
  • Background : #111827 (gray-900)
  • Border : 1px solid #374151 (gray-700)
  • Border Radius : 12px
  • Padding : 24px

Éléments :

  • Cover : 200px x 200px, left
  • Track Info : Title + Artist + Album, center-left
  • Controls : Play/Pause, Previous, Next, center
  • Progress : Waveform + time, center
  • Volume : Slider + icon, center-right
  • Queue : List + count, right

States :

  • Default (no track)
  • Playing (track loaded)
  • Paused (track paused)
  • Loading (spinner)

Waveform

Nom: Waveform
Variants: Default, Playing, Paused, Loading

Spécifications :

  • Container : 100% x 60px
  • Background : #1F2937 (gray-800)
  • Wave Color : #6366F1 (indigo-500)
  • Progress Color : #F59E0B (amber-500)
  • Border Radius : 4px
  • Padding : 8px

States :

  • Default (static)
  • Playing (animated)
  • Paused (static with progress)
  • Loading (skeleton)

7. Icon Components

Navigation Icons

Nom: IconNav
Variants: Home, Library, Discover, Community, Studio, Analytics, Marketplace, Education, Radio

Spécifications :

  • Size : 20px x 20px
  • Color : #9CA3AF (gray-400)
  • Active Color : #6366F1 (indigo-500)
  • Hover Color : #F9FAFB (gray-50)

Action Icons

Nom: IconAction
Variants: Play, Pause, Previous, Next, Like, Share, More, Search, Notification, Profile

Spécifications :

  • Size : 24px x 24px
  • Color : #9CA3AF (gray-400)
  • Hover Color : #F9FAFB (gray-50)
  • Active Color : #6366F1 (indigo-500)

Status Icons

Nom: IconStatus
Variants: Online, Offline, Busy, Loading, Success, Error, Warning, Info

Spécifications :

  • Size : 16px x 16px
  • Online : #10B981 (emerald-500)
  • Offline : #6B7280 (gray-500)
  • Busy : #EF4444 (red-500)
  • Loading : #6366F1 (indigo-500)

🎨 Variables et Styles

1. Color Variables

Primary: #6366F1
Secondary: #8B5CF6
Accent: #F59E0B
Success: #10B981
Error: #EF4444
Warning: #F59E0B
Info: #3B82F6

Gray-50: #F9FAFB
Gray-100: #F3F4F6
Gray-200: #E5E7EB
Gray-300: #D1D5DB
Gray-400: #9CA3AF
Gray-500: #6B7280
Gray-600: #4B5563
Gray-700: #374151
Gray-800: #1F2937
Gray-900: #111827

2. Typography Styles

H1: 48px, Bold, Line Height 1.2
H2: 36px, Bold, Line Height 1.3
H3: 24px, Semibold, Line Height 1.4
H4: 20px, Semibold, Line Height 1.4
Body: 16px, Regular, Line Height 1.5
Caption: 14px, Regular, Line Height 1.4
Small: 12px, Regular, Line Height 1.3

3. Spacing Variables

xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
2xl: 48px
3xl: 64px
4xl: 96px
5xl: 128px

4. Border Radius Variables

radius-sm: 4px
radius-md: 8px
radius-lg: 12px
radius-xl: 16px
radius-2xl: 24px
radius-full: 9999px

🚀 Plan d'Implémentation

Phase 1 : Setup (1 jour)

  • Création des variables de couleur
  • Setup de la typographie
  • Création des styles de base
  • Organisation des composants

Phase 2 : Composants de Base (2-3 jours)

  • Boutons (Primary, Secondary, Ghost)
  • Formulaires (Input, Textarea, Select)
  • Cards (Track, Playlist, User)
  • Modales (Modal, Toast)

Phase 3 : Navigation (1-2 jours)

  • Header principal
  • Sidebar navigation
  • Mini-player
  • Mobile navigation

Phase 4 : Player (1-2 jours)

  • Full player
  • Waveform
  • Contrôles
  • Queue

Phase 5 : Icons (1 jour)

  • Navigation icons
  • Action icons
  • Status icons
  • Social icons

Phase 6 : States et Interactions (1-2 jours)

  • Hover states
  • Active states
  • Loading states
  • Error states

📊 Checklist de Validation

Design System

  • Variables de couleur cohérentes
  • Typographie uniforme
  • Espacement cohérent
  • Bordures et rayons uniformes

Composants

  • Tous les variants créés
  • States complets
  • Interactions définies
  • Responsive adapté

Accessibilité

  • Contrastes respectés
  • Tailles de touch targets
  • Navigation clavier
  • Screen reader friendly

Performance

  • Composants optimisés
  • Assets légers
  • Variables utilisées
  • Styles réutilisables

Document créé le 2024-01-15 - Veza Platform Design Team