---
id: "figma-components"
title: "🧩 Composants Figma - Veza Platform"
sidebar_label: "🧩 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*