501st Legion — Figma Make Experiment

Le projetThe projectEl proyecto

Un hommage à la 501^ᵉ Légion, conçu avec l'IA A tribute to the 501st Legion, built with AI Un homenaje a la Legión 501, diseñado con IA

Après avoir participé à un webinar sur Figma Make, j'ai souhaité tester les capacités de l'outil à travers un projet personnel mêlant design immersif, accessibilité et IA générative. Passionné par l'univers Star Wars et la série animée Star Wars: The Clone Wars, j'ai créé un site one-page dédié à la 501ᵉ Légion, unité de clones du Général Jedi Anakin Skywalker, rendant hommage à la fraternité et à la loyauté des clones.

After attending a Figma Make webinar, I wanted to put the tool to the test through a personal project combining immersive design, accessibility and generative AI. As a Star Wars fan and devoted follower of Star Wars: The Clone Wars, I created a one-page site dedicated to the 501st Legion — the clone unit of Jedi General Anakin Skywalker — as a tribute to the brotherhood and loyalty of the clones.

Tras participar en un webinar sobre Figma Make, quise poner a prueba las capacidades de la herramienta a través de un proyecto personal que combinara diseño inmersivo, accesibilidad e IA generativa. Apasionado por el universo de Star Wars y la serie animada Star Wars: The Clone Wars, creé un sitio one-page dedicado a la Legión 501, la unidad de clones del General Jedi Anakin Skywalker, como homenaje a la fraternidad y la lealtad de los clones.

Un projet d'étude non commercial, conçu pour explorer les nouvelles approches de conception web assistées par IA.

A non-commercial study project, designed to explore new AI-assisted web design approaches.

Un proyecto de estudio no comercial, concebido para explorar los nuevos enfoques de diseño web asistidos por IA.

501st Legion platform — multiple screens overview

Vue d'ensemble — Histoire, Chronologie, Héros, Jedi, Alliés, À proposPages overview — History, Chronology, Heroes, Jedi, Allies, AboutVista general — Historia, Cronología, Héroes, Jedi, Aliados, Acerca de

ProblèmeProblemProblema

Figma Make peut-il produire un site immersif et accessible ? Can Figma Make produce a site that is immersive and accessible? ¿Puede Figma Make producir un sitio inmersivo y accesible?

Explorer comment Figma Make peut produire un site à la fois immersif, cohérent et accessible, tout en respectant les contraintes visuelles et UX d'un univers aussi riche que Star Wars.

Exploring how Figma Make can produce a site that is at once immersive, coherent and accessible, while honouring the visual and UX constraints of a universe as rich as Star Wars.

Explorar cómo Figma Make puede producir un sitio inmersivo, coherente y accesible, respetando al mismo tiempo las restricciones visuales y de UX de un universo tan rico como Star Wars.

RechercheResearchInvestigación

Références, standards et limites References, standards and limits Referencias, estándares y límites

🎨

Références visuellesVisual referencesReferencias visuales

Étude approfondie des références visuelles issues de The Clone Wars — palette, typographie, atmosphère et identité de la 501ᵉ Légion.In-depth study of visual references from The Clone Wars — colour palette, typography, atmosphere and the 501st Legion's visual identity.Estudio en profundidad de las referencias visuales de The Clone Wars — paleta, tipografía, atmósfera e identidad de la Legión 501.

♿

Bonnes pratiques WCAG 2.1WCAG 2.1 best practicesBuenas prácticas WCAG 2.1

Analyse des critères WCAG 2.1 pour garantir la lisibilité et l'accessibilité — contrastes, focus visible, navigation clavier — même sur un design très stylisé.Analysis of WCAG 2.1 criteria to ensure readability and accessibility — contrast ratios, visible focus, keyboard navigation — even within a heavily styled design.Análisis de los criterios WCAG 2.1 para garantizar la legibilidad y la accesibilidad — contrastes, foco visible, navegación por teclado — incluso en un diseño muy estilizado.

🔬

Limites de Figma MakeFigma Make limitsLímites de Figma Make

Tests sur les limites de personnalisation et d'interactivité — scroll fluide, modales, header flottant — pour évaluer ce que l'outil génère nativement vs ce qui requiert un affinage manuel.Tests on customisation and interactivity limits — smooth scroll, modals, floating header — to assess what the tool generates natively versus what requires manual refinement.Pruebas sobre los límites de personalización e interactividad — scroll fluido, modales, header flotante — para evaluar lo que la herramienta genera de forma nativa frente a lo que requiere ajuste manual.

SolutionSolutionSolución

Un site one-page immersif et accessible An immersive, accessible one-page site Un sitio one-page inmersivo y accesible

🗂

Structure narrativeNarrative structureEstructura narrativa

Site one-page immersif structuré autour de sections clés — Héros, Jedi, Chronologie, Citation, À propos — pour guider l'utilisateur dans l'univers de la 501ᵉ.Immersive one-page site structured around key sections — Heroes, Jedi, Chronology, Quote, About — guiding the user through the 501st's universe.Sitio one-page inmersivo estructurado en torno a secciones clave — Héroes, Jedi, Cronología, Cita, Acerca de — para guiar al usuario por el universo de la 501.

⚡

Design futuriste cloneFuturistic clone designDiseño futurista clone

Palette bleu 501ᵉ, header "liquid glass" flottant, modales interactives et composants uniformisés — inspirés des interfaces militaires de l'univers Clone Wars.501st blue palette, floating "liquid glass" header, interactive modals and unified components — inspired by the military interfaces of the Clone Wars universe.Paleta azul 501, header "liquid glass" flotante, modales interactivas y componentes unificados — inspirados en las interfaces militares del universo Clone Wars.

♿

Accessibilité intégréeBuilt-in accessibilityAccesibilidad integrada

Chaque élément respecte les normes d'accessibilité — contrastes suffisants, focus visible, navigation clavier complète — sans sacrifier l'immersion visuelle.Every element meets accessibility standards — sufficient contrast, visible focus, full keyboard navigation — without sacrificing visual immersion.Cada elemento cumple las normas de accesibilidad — contrastes suficientes, foco visible, navegación completa por teclado — sin sacrificar la inmersión visual.

RésultatsResultsResultados

Une preuve de concept qui tient la route A proof of concept that holds up Una prueba de concepto que funciona

✅

Prototype completComplete prototypePrototipo completo

Un prototype complet et cohérent généré via Figma Make, affiné manuellement pour renforcer la direction artistique et l'identité visuelle.A complete, coherent prototype generated via Figma Make, then manually refined to strengthen the artistic direction and visual identity.Un prototipo completo y coherente generado mediante Figma Make, refinado manualmente para reforzar la dirección artística y la identidad visual.

🎮

UX fluide et immersiveFluid, immersive UXUX fluida e inmersiva

Une expérience utilisateur fluide, immersive et conforme aux standards d'accessibilité — démontrant qu'immersion et accessibilité ne sont pas incompatibles.A fluid, immersive user experience that meets accessibility standards — proving that immersion and accessibility are not mutually exclusive.Una experiencia de usuario fluida, inmersiva y conforme a los estándares de accesibilidad — demostrando que inmersión y accesibilidad no son incompatibles.

🤖

IA comme accélérateurAI as an acceleratorIA como acelerador

Une preuve de concept démontrant que les outils IA peuvent accélérer la conception sans compromettre la qualité UX — à condition de maintenir une direction artistique claire.A proof of concept showing that AI tools can accelerate design without compromising UX quality — provided a clear artistic direction is maintained throughout.Una prueba de concepto que demuestra que las herramientas de IA pueden acelerar el diseño sin comprometer la calidad UX — siempre que se mantenga una dirección artística clara.

Pour accéder au prototype, cliquez sur le lien ci-dessous. Il est disponible en français et anglais. Vous devrez être connecté à un compte Figma.

To access the prototype, click the link below. It is available in French and English. You will need to be logged in to a Figma account.

Para acceder al prototipo, haz clic en el enlace de abajo. Está disponible en francés e inglés. Necesitarás estar conectado a una cuenta de Figma.

Voir le prototype View prototype Ver el prototipo

Regard critique Critical reflection Reflexión crítica

Ce que Figma Make permet vraiment What Figma Make actually enables Lo que Figma Make realmente permite

Ce projet était avant tout un test de maturité de l'outil. Figma Make tient ses promesses sur le design-to-code — mais avec des conditions. Voici une lecture honnête de ce que l'outil permet et ce qu'il ne remplace pas.

This project was primarily a maturity test for the tool. Figma Make delivers on its design-to-code promise — but with conditions. Here is an honest reading of what the tool enables and what it doesn't replace.

Este proyecto fue ante todo una prueba de madurez de la herramienta. Figma Make cumple su promesa de design-to-code — pero con condiciones. Aquí hay una lectura honesta de lo que la herramienta permite y lo que no reemplaza.

✅

Ce qui fonctionne nativement What works natively Lo que funciona de forma nativa

Layout, composants, responsive basique, navigation et export HTML propre. La vitesse de prototypage est réelle — de la maquette à une page live en quelques heures. Idéal pour valider rapidement une direction visuelle. Layout, components, basic responsive, navigation and clean HTML export. The prototyping speed is real — from mockup to a live page in a few hours. Ideal for quickly validating a visual direction. Layout, componentes, responsive básico, navegación y exportación HTML limpia. La velocidad de prototipado es real — de la maqueta a una página live en pocas horas. Ideal para validar rápidamente una dirección visual.

✏️

Ce qui nécessite un affinage manuel What needs manual refinement Lo que necesita ajuste manual

La direction artistique fine, les micro-interactions, l'accessibilité avancée et la cohérence entre sections nécessitent des ajustements manuels dans le code généré. L'outil produit une base solide, pas un rendu production final. Fine art direction, micro-interactions, advanced accessibility and cross-section consistency require manual adjustments to the generated code. The tool produces a solid base, not a final production render. La dirección artística fina, las microinteracciones, la accesibilidad avanzada y la coherencia entre secciones requieren ajustes manuales en el código generado. La herramienta produce una base sólida, no un render de producción final.

🚫

Ce que l'outil ne remplace pas What the tool doesn't replace Lo que la herramienta no reemplaza

Les applications critiques, l'accessibilité RGAA/WCAG complète, l'internationalisation multi-langues et la scalabilité sur un Design System partagé restent hors de portée sans développement humain. L'outil n'est pas un remplacement — c'est un accélérateur d'exploration. Critical applications, full RGAA/WCAG accessibility, multi-language internationalisation and scalability on a shared Design System remain out of reach without human development. The tool is not a replacement — it's an exploration accelerator. Las aplicaciones críticas, la accesibilidad RGAA/WCAG completa, la internacionalización multilingüe y la escalabilidad en un Design System compartido siguen fuera del alcance sin desarrollo humano. La herramienta no es un reemplazo — es un acelerador de exploración.

💡

En contexte professionnel In a professional context En contexto profesional

Figma Make est pertinent pour des livrables d'exploration rapide, des prototypes clients ou des landing pages simples. Sur un produit SaaS ou mobile à fort enjeu, il servirait d'outil de validation amont — jamais de pipeline de livraison. Figma Make is relevant for rapid exploration deliverables, client prototypes or simple landing pages. On a high-stakes SaaS or mobile product, it would serve as an upstream validation tool — never as a delivery pipeline. Figma Make es relevante para entregables de exploración rápida, prototipos para clientes o landing pages simples. En un producto SaaS o móvil de alto impacto, serviría como herramienta de validación upstream — nunca como pipeline de entrega.