Design System Build, Figma to Production Code by Goran BabarogicDesign System Build, Figma to Production Code by Goran Babarogic
Design System Build, Figma to Production CodeGoran Babarogic
Cover image for Design System Build, Figma to Production Code
Your product has three versions of the same button and two definitions of a card. Every new screen is a negotiation, and half of what design ships gets rebuilt differently in code anyway.
I build the system that ends that, and I build it through to code. Not a Figma library your engineers then have to interpret. A token architecture that generates the CSS your product actually uses, with a check in your pipeline that fails the build if the two ever drift apart.
The rule that carries the most weight: the same name in Figma, in the token file, and in the CSS class. No translation layer. What the designer types is what the engineer types. Every translation step is a place drift enters, so I remove the step rather than document it.
Sixteen years of product design with a front-end background, which is why this ends in a running build rather than a handoff.
Best fit if you have a live product, no real system, and design and code are already pulling apart.
Not a fit if you are pre-launch and need building blocks fast. My UI Kit service is cheaper and more honest for that.
FAQs

Starting at$8,500
Duration5 weeks
Tags
Figma
Design Systems Specialist
UI Designer
Service provided by
Goran Babarogic maxSerbia
$100k+
Earned
55
Paid projects
4.76
Rating
332
Followers
Design System Build, Figma to Production CodeGoran Babarogic
Starting at$8,500
Duration5 weeks
Tags
Figma
Design Systems Specialist
UI Designer
Cover image for Design System Build, Figma to Production Code
Your product has three versions of the same button and two definitions of a card. Every new screen is a negotiation, and half of what design ships gets rebuilt differently in code anyway.
I build the system that ends that, and I build it through to code. Not a Figma library your engineers then have to interpret. A token architecture that generates the CSS your product actually uses, with a check in your pipeline that fails the build if the two ever drift apart.
The rule that carries the most weight: the same name in Figma, in the token file, and in the CSS class. No translation layer. What the designer types is what the engineer types. Every translation step is a place drift enters, so I remove the step rather than document it.
Sixteen years of product design with a front-end background, which is why this ends in a running build rather than a handoff.
Best fit if you have a live product, no real system, and design and code are already pulling apart.
Not a fit if you are pre-launch and need building blocks fast. My UI Kit service is cheaper and more honest for that.
FAQs

$8,500