← WorkSC.09 / 09

DrawYourCode

Design-to-code platform

Role
End-of-study project, designer and developer
Context
SASTEC Group
Period
2021
Live
Private product
LAYERS → TOKENS → <Component />
Illustration · no public screenshotFig. 09

01 — Overview

A platform that turns Figma design tokens and layer trees into modular React components.

The challenge

Translate a designer's layers into components a developer would actually keep.

Stack

  • Figma REST API
  • Node.js
  • React

02 — Architecture

What I built, layer by layer.

  • ■ Interface
  • ■ API & logic
  • □ Data
  • □ Cloud & delivery
  • □ Quality & security
  1. ExternalFigma REST APIAPI & logicNode.js generator
  2. API & logicNode.js generatorInterfaceReact components
Interface
Modular React components from design tokens: 40% shorter handoff.
API & logic
Node.js service reading the Figma REST API and generating components.

03 — What I did

  1. 01

    Designed and built the platform on the Figma REST API and Node.js.

  2. 02

    Generated modular React components from design tokens and layer trees.

04 — Results

  • 40% shorter design-to-code handoff

Next project · SC.01Lines Up →