SI Noël • Année 2026

schedule Date limite : Vendredi 10 décembre 2026

Situation d'Intégration Figma UI/UX

Projet : Votre Bilan 2026 (Format Story)

Vous connaissez Spotify Wrapped!

Concevez une story interactive de 5 écrans mobiles résumant vos données personnelles ou vos temps forts de l'année. Maîtrise rigoureuse de l'Auto-Layout, du Smart Animate et démarche graphique documentée.

view_quilt Auto-Layout Obligatoire animation Smart Animate Requis

Architecture Narrative & UI

Les 5 Écrans du Format Story

Chaque plan respecte le gabarit mobile 390×844 px. L'élève doit assembler l'ensemble via des déclencheurs interactifs (Au tap, Après délai ou Glissement latéral) pour fluidifier la lecture.
Les écrans suivants sont à titre d'exemple, vous pouvez vous servir de cette mise en page telle quelle ou en créer une autre.

Écran 01 00:00:00

Couverture & Accroche

Titre impactant, avatar ou badge identitaire et bouton interactif invitant à démarrer.

9:41

auto_awesome

Bilan Personnel Mon Année 2026

Lancer la story arrow_forward

Déclencheur au tap

Exigences clés :

• Bouton composant au tap

• Visuel principal cadré

• Déclencheur son optionnel

Écran 02 00:00:03

Télémétrie & Chiffres Clés

Point d'ancrage quantitatif : grand nombre mis en scène et jauge graphique soignée.

82%

42 890

Minutes Totales

Top 2% de la cohorte

Exigences clés :

• Jauge vectorielle nette

• Typographie de données forte

• Unité et contexte explicites

Écran 03 00:00:06

Podium Top 3

Classement hiérarchisé : morceaux favoris, projets menés ou compétences acquises.

workspace_premium

Lauréat : Projet Figma Core

Exigences clés :

• 3 marches distinctes

• Vignettes et labels nets

• Auto-layout aligné par le bas

Écran 04 00:00:09

Badge de Réussite

Persona symbolique ou badge débloqué avec barre de compétence et attributs clés.

verified

Expert Auto-Layout

Progression :95%

Archétype Débloqué

Exigences clés :

• Archétype illustré

• Jauge d'attributs lisible

• Titre et descriptif concis

Écran 05 00:00:12

Fiche Récap & Partage

Poster Bento consolidé avec boutons de partage et boucle de relecture de story.

Minutes 42,8k

Série 114 J

Badge Expert 2026

Partager la carte

Rejouer la story

Exigences clés :

• Agencement Bento régulier

• Appel au partage simulé

• Réinitialisation fonctionnelle

Directive Essentielle • Étape 0 Préalable

Étape 0 Obligatoire : Choix du Courant Graphique

Avant de créer le moindre frame dans Figma, chaque élève doit sélectionner et défendre un mouvement artistique. Les 5 écrans devront refléter avec rigueur les principes typographiques, chromatiques et spatiaux de cette intention.

Courant 01 1919 — 1933

Bauhaus & De Stijl

La forme au service exclusif de la fonction. Grilles rigoureuses, couleurs primaires pures, asymétrie équilibrée et rejet de l'ornement superficiel.

Courant 02 Contemporain / Pop

Néo-Brutalisme / Memphis

Contour noir franc, ombres dures sans flou, couleurs vives saturées, stickers géométriques et typographie sans empattement robuste.

Courant 03 Rétro Années 90

Vaporwave & Rétro Web

Dégradés pastels crépusculaires, cyan et magenta doux, clins d'œil aux premières fenêtres OS, statuaire antique et nostalgie numérique.

Courant 04 Tactile & Réaliste

Skeuomorphisme Moderne

Ombres intérieures et extérieures subtiles, boutons en relief doux, surfaces tactiles inspirées du design d'appareils audio physiques.

Courant 05 Analogique & Matière

Papier Découpé / Collage

Superpositions de plans, bordures découpées, textures kraft et papier de presse, ombres de contact fines et approche fanzine soignée.

Courant 06 Radical & Électro

Glitch & Anti-Design

Décalages de trames, typographies déconstruites, artéfacts numériques assumés et mise en page expérimentale défiant les conventions.

Courant 07 Moderne / Lumineux

Glassmorphisme & Minimalisme

Surfaces blanches translucides, flous d'arrière-plan fins, bordures lumineuses à 1px, micro-dégradés froids et espacements généreux.

assignment_turned_in Validation Étape 0

Défense de l'Intention

Le choix artistique doit s'accompagner d'un minimum de 3 références de moodboard et être validé avant le début de la production graphique.

Validation requise en classe

Inspiration de Contenu

10 Pistes Thématiques (propositions)

Chaque élève choisit une piste ou soumet un thème personnalisé. Chaque profil combine données chiffrées, podiums et badges à débloquer. Ci-dessous quelques pistes à titre d'exemple.

fitness_center

Piste 01

Sport & Fitness

Séances cumulées, records personnels, volume de course, matchs et progression athlétique.

Donnée : 428 km parcourus

Badge : Sprinteur d'Élite

headphones

Piste 02

Musique & Festivals

Minutes d'écoute, top 5 artistes, micro-genres découverts et programmation de festival rêvée.

Donnée : 54 200 min écoutées

Badge : Curateur Top 0,5%

movie

Piste 03

Cinéma & Séries

Films notés, nuits de visionnage, réalisateurs fétiches et coups de cœur cinéma de l'année.

Donnée : 74 films & 12 séries

Badge : Cinéphile Assidu

sports_esports

Piste 04

Gaming & Esports

Taux de victoire, succès Steam débloqués, montées en rang et temps passé sur vos titres favoris.

Donnée : 64% victoires classées

Badge : Maître Stratège

flight_takeoff

Piste 05

Voyages & Escapades

Kilomètres explorés, villes visitées, trajets de train et carnets de découverte en plein air.

Donnée : 18 400 km de transit

Badge : Explorateur Infatigable

restaurant

Piste 06

Food & Gastronomie

Cafés découverts, sessions cuisine, classement des meilleures adresses et recettes fétiches.

Donnée : 86 recettes réussies

Badge : Chef Passionné

school

Piste 07

Vie au Lycée

Cafés avant 8h, devoirs rendus à temps, travail d'équipe et grands moments de l'année scolaire.

Donnée : 100% devoirs déposés

Badge : Survivant de Terminale

brush

Piste 08

Portfolio Créatif

Calques Figma créés, croquis terminés, rendus 3D et projets de design graphique menés.

Donnée : 940 plans exportés

Badge : Pixel Parfait

devices

Piste 09

Temps d'Écran

Applications indispensables, temps d'usage hebdomadaire, productivité et hygiène numérique.

Donnée : 5h 20m moyenne jour

Badge : Équilibré Digital

menu_book

Piste 10

BookTok & Lecture

Romans lus, tomes de manga finis, citations préférées et constitution de votre bibliothèque idéale.

Donnée : 42 000 pages lues

Badge : Lecteur Passionné

Cadre Professionnel • Standards de l'Industrie

Exigences Techniques Figma & Conformité

Ce projet évalue votre capacité à concevoir selon les méthodes professionnelles de design produit. Eviter tout fichier reposant sur des calques anarchiques sans Auto-Layout.

Obligatoire view_quilt

Auto-Layout Strict

Chaque bouton, carte, rangée et écran global doit utiliser l'Auto-Layout (Shift + A). Evitez les éléments flottants placés manuellement.

Contrôle enseignant : Vérification dans les calques.

Structure UI widgets

Composants & États Survol

Boutons principaux, indicateurs de story et éléments récurrents doivent être configurés en composants maîtres avec variantes d'état (Normal, Survol, Clic).

Contrôle enseignant : Vérification de l'arborescence dans l'onglet Composants.

Qualité de Fichier label

Nommage Rigoureux des Calques

Aucun calque « Frame 142 » ou « Rectangle 12 ». Adoptez une convention sémantique propre et hiérarchisée.

Contrôle enseignant : Audit rapide de la hiérarchie du panneau de calques.

Prototypage animation

Prototype Smart Animate

La séquence des 5 écrans doit être animée de façon fluide avec les courbes d'assouplissement de Figma. Transition naturelle entre les étapes.

Contrôle enseignant : Test en mode Présentation mobile plein écran.

Épreuve Orale mic

Soutenance Orale (3 min)

Chaque élève présente son projet devant le jury : 2 minutes de démonstration de la story + 2-3 minutes pour justifier le choix du courant artistique et de l'Auto-Layout.

Organisation : Le jour de la présentation SI.

Intégrité history_edu

Audit d'Historique de Version

Le travail doit être réalisé progressivement sur votre compte IATA. Les modèles copiés-collés de la communauté sans historique d'édition progressif seront refusés.

Avertissement : Tout plagiat de template communautaire recevra 0/20.

Évaluation Certifiante

Barème de Notation Détaillé

Grille d'évaluation transparente basée sur 4 critères d'égale importance (5 points par critère).

Critère d'Évaluation	Exemplaire (5 pts)	Satisfaisant (4 pts)	En Progression (<3 pts)
1. Intention Graphique & Identité Défense Étape 0, typographie cohérente, palette maîtrisée.	Courant artistique défendu avec maturité ; palette et polices en parfaite adéquation.	Style identifiable mais 1 ou 2 éléments génériques affaiblissent l'harmonie.	Style absent ou non défendu ; rendu fil de fer sans personnalité.
2. Hiérarchie Visuelle & Finition UI Contrastes, lisibilité, espaces blancs réguliers, micro-rédaction.	Lecture fluide, excellents contrastes de texte, lisibilité irréprochable sur 9:16.	Lisible dans l'ensemble mais quelques zones denses ou retours à la ligne maladroits.	Textes minuscules illisibles, contrastes insuffisants, éléments désaxés.
3. Structure Technique Figma Auto-Layout à 100%, composants maîtres, nommage sémantique.	Auto-Layout exemplaire sur tous les calques. Variantes de composants nettes et modulaires.	Auto-Layout utilisé à 80% ; quelques frames manuels isolés ou calques non renommés.	Calques anarchiques, absence d'Auto-Layout, formes flottantes sans grille.
4. Interaction & Prototype Smart Animate, fluidité de navigation, soutenance orale (3 min).	Prototype dynamique très soigné, transitions soyeuses, pitch oral clair et convaincant.	Prototype fonctionnel mais transitions brusques ; pitch oral un peu hésitant.	Liens brisés, impossibilité de naviguer, absence à la soutenance orale.