Figma accélère sur un terrain devenu central : la frontière entre maquette et produit. Après avoir annoncé une intégration avec Claude Code d’Anthropic, l’éditeur de design Figma enchaîne avec Codex d’OpenAI. L’idée : permettre aux équipes de créer, modifier et itérer sur des designs… sans quitter leur environnement de code, et inversement. Une évolution qui ressemble moins […]
Introducing Codex to Figma with OpenAI Join Figma designer advocate, Ana Boyer and OpenAI product designer, Ed Bayes as they talk through roundtripping betwe...
Bonne nouvelle pour ceux qui en ont ras la casquette de se taper des allers-retours entre Figma et VS Code ! Parce qu'avec
Onlook
, l'éditeur visuel open source qui vous permet de modifier le design de vos apps React directement dans le navigateur, vous allez pouvoir cliquer simplement sur un élément de design, et en changer la couleur, la typo...etc et hop, ça modifiera le code derrière.
Pas mal, non ?
Vous ouvrez votre projet Next.js dans Onlook, et vous vous retrouvez avec une interface à la Figma, sauf que c'est branché sur votre code source. Vous sélectionnez un titre, un bouton, n'importe quel composant, et vous modifiez son style visuellement... couleurs, padding, marges, polices, tout y passe.
Et en fait, le truc qui change tout par rapport à un inspecteur CSS classique, c'est que quand vous cliquez sur "Publish", les modifications atterrissent DIRECTEMENT dans vos fichiers .tsx. C'est donc du vrai code propre, pas du CSS inline dégueulasse.
Côté technique, l'outil gère nativement TailwindCSS (parce que bon, en 2026, si vous faites du React sans Tailwind, vous aimez forcément le cuir qui claque et la souffrance). Vous éditez en mode visuel, ça génère les bonnes classes Tailwind, et vous gardez un contrôle total. Y'a aussi un mode LLM intégré... "rends ce bouton bleu avec des coins arrondis" et hop, c'est fait. Comme ça, pas besoin de chercher si c'est rounded-lg ou rounded-xl dans la doc.
Pour ceux qui connaissent
Bolt.DIY
ou qui se souviennent d'
Amplify Studio
(le truc de AWS qui tentait de faire le pont Figma vers React), Onlook prend le problème dans l'autre sens. Au lieu de partir du design pour générer du code, on part du code existant et on le modifie visuellement. Du coup, pas de code généré bancal à maintenir, c'est finalement VOTRE codebase qui est éditée.
Le projet est open source sous licence Apache 2.0 sur
GitHub
et la version open source est gratuite et self-hostable, donc vous pouvez la faire tourner chez vous sans débourser un centime. Après pour ceux qui veulent du cloud managé avec collab temps réel, y'a des plans payants.
Après attention, c'est encore jeune et le support se limite à React et Next.js pour l'instant, donc si votre stack c'est Vue ou Svelte, ça ne marchera pas. Et l'IA mouline un peu sur les layouts complexes mais le projet avance vite, la communauté est active, et pour un outil gratos qui fait le lien entre design et code en open source, y'a pas grand-chose d'équivalent.
Des snippets CSS qui illustrent les propriétés ajoutées ces dernières années à CSS et comment elles remplacent d'autres propriétés historiques avantageusement.
Des snippets CSS qui illustrent les propriétés ajoutées ces dernières années à CSS et comment elles remplacent d'autres propriétés historiques avantageusement.
Introduction aux fonctions avancées modernes du CSS pour faire des sites qui s'adaptent à l'écran sur lequel ils sont affichés sans utiliser de media queries.
Introduction aux fonctions avancées modernes du CSS pour faire des sites qui s'adaptent à l'écran sur lequel ils sont affichés sans utiliser de media queries.
Y'a un truc qui me rend joyeux avec le web, c'est quand des devs décident de pousser les technos dans leurs retranchements juste pour prouver que c'est possible.
Et VoxCSS, c'est totalement ça : une bibliothèque JavaScript qui permet de faire du rendu voxel complet en utilisant uniquement le DOM et le CSS. Alors attention, quand je dis "uniquement", je veux dire sans WebGL et sans l'élément <canvas>. Juste des éléments HTML empilés intelligemment qui tirent parti de l'accélération matérielle du navigateur pour les transformations 3D.
Pour cela, VoxCSS utilise des grilles CSS superposées sur l'axe Z pour créer un espace volumétrique. Chaque niveau de profondeur est une grille CSS classique, décalée avec des translations 3D. Les voxels eux-mêmes sont des cuboïdes HTML composés de plusieurs faces positionnées avec des rotations CSS.
Par défaut, la scène utilise une perspective de 8000px et le fameux transform-style: preserve-3d pour que la magie opère... Un pur hack de génie qui transforme votre navigateur en moteur 3D sans passer par les API habituelles !
Et le rendu n'est pas dégueu du tout puisque le moteur gère les couleurs, les textures, et même différentes formes comme des rampes, des pointes ou des coins pour sortir du simple cube de base. Pour ceux qui se demandent comment ça se passe pour les ombres, VoxCSS simule également un éclairage en jouant sur l'opacité des faces, ce qui donne ce petit relief indispensable au style voxel. Vous pouvez même choisir entre différentes projections (cubique ou dimétrique) pour donner le look que vous voulez à votre scène.
Côté performances, même si on parle de manipuler potentiellement des milliers d'éléments DOM, l'équipe de Layoutit Studio a bien bossé. Y'a un système de "culling" pour ne pas calculer les faces cachées (on n'affiche que la surface extérieure, quoi) et une option de fusion (le mergeVoxels) qui permet de regrouper les cubes adjacents pour alléger la structure HTML. C'est pas activé par défaut, mais c'est indispensable dès que votre château Minecraft commence à prendre de l'embonpoint.
L'installation se fait via
npm install @layoutit/voxcss
La lib est hyper flexible puisqu'elle propose des wrappers pour React, Vue et Svelte, tout en restant utilisable en vanilla JS.
Vous posez votre caméra (<voxcamera>) pour gérer le zoom et la rotation, vous injectez votre scène (<voxscene>), et roule ma poule. Cerise sur le gâteau pour les artistes, VoxCSS inclut un parser pour charger directement vos fichiers .vox créés dans MagicaVoxel.
Si vous voulez tâter la bête sans coder, allez faire un tour sur Layoutit Voxels, l'éditeur qui sert de démo technique. Ils ont aussi sorti Layoutit Terra qui génère des terrains entiers avec la même techno.
Franchement, pour un gros jeu en prod, OK pour du WebGL, mais pour créer des éléments interactifs stylés, des petites scènes 3D ou juste pour la beauté du geste technique, c'est un sacré bel outil.
Et puis, faire de la 3D sans toucher à un seul shader, ça a un petit côté cool je trouve.
La spécification CSS pour les layouts de type "masonry" (blocs en quinconce) est quasiment terminée, et la preview peut être testée dans Safari. Quelques noms de propriétés vont probablement changer, mais l'article décrit très clairement comment ça fonctionne.
Connexion
