UX Research · UX Design · Livre blanc
Le streamer: un designer qui s'ignore
Concevoir l'expérience visuelle d'un flux Twitch : faire cohabiter le jeu et l'habillage.
Heetstudio
UI DesignUX DesignDéveloppementProjet personnel
Concevoir son propre outil, c'est le meilleur test de cohérence.
01Le projet
Ce que ce projet raconte.
Ce portfolio est à la fois une vitrine et un terrain d'expérimentation. Chaque composant a été pensé pour être réutilisable, chaque animation justifiée par l'usage. Le design system repose sur un pipeline Figma → tokens CSS, avec un mode sombre géré nativement via des variables sémantiques.
30+
composants sur mesure
100%
tokens issus de Figma
0
librairie UI tierce
Rôle
Designer & Développeur
Durée
En cours
Année
2026
Outils
Voir le siteFigmaReact 19Tailwind v4MotionVite
02La démarche
Design System
Tous les composants partent de tokens définis dans Figma (couleurs, typographie, espacement, border-radius) et exportés directement en variables CSS. Le dark mode est géré à un seul endroit — les composants n'ont jamais besoin de connaître le thème.
Composants animés
Motion (ex Framer Motion) est utilisé pour les animations de scroll, les transitions de page et les micro-interactions. Le WordScroll utilise une CSS animation native mesurée au pixel près pour éviter tout saut à la boucle.
Architecture
React 19 avec Vite, Tailwind v4 en mode JIT, alias de chemins stricts. Les données (projets, expériences, outils) sont découplées dans src/data pour pouvoir faire évoluer le contenu sans toucher aux composants.
04À voir aussi
D'autres projets à découvrir.
