568 lines
12 KiB
Markdown
568 lines
12 KiB
Markdown
---
|
|
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*
|