← ProjetsSC.09 / 09

DrawYourCode

Plateforme design-to-code

Rôle
Projet de fin d'études, conception et développement
Contexte
SASTEC Group
Période
2021
En ligne
Produit privé
LAYERS → TOKENS → <Component />
Illustration · pas de capture publiqueFig. 09

01 — Vue d'ensemble

Une plateforme qui transforme les design tokens et l'arborescence des calques Figma en composants React modulaires.

Le défi

Traduire les calques d'un designer en composants qu'un développeur garderait vraiment.

Stack

  • Figma REST API
  • Node.js
  • React

02 — Architecture

Ce que j'ai construit, couche par couche.

  • ■ Interface
  • ■ API & logique
  • □ Données
  • □ Cloud & livraison
  • □ Qualité & sécurité
  1. ExterneFigma REST APIAPI & logiqueNode.js generator
  2. API & logiqueNode.js generatorInterfaceReact components
Interface
Composants React modulaires depuis les design tokens : passage au code 40 % plus court.
API & logique
Service Node.js qui lit l'API REST Figma et génère des composants.

03 — Ce que j'ai fait

  1. 01

    Conception et développement de la plateforme sur l'API REST Figma et Node.js.

  2. 02

    Génération de composants React modulaires à partir des design tokens et des calques.

04 — Résultats

  • Passage du design au code 40 % plus court

Projet suivant · SC.01Lines Up →