How the Elastic UI design system (EUI) connects between its Design (Figma) and Code (React) libraries.

One of the biggest challenges with maintaining a design systems for an entire company is making assets available for both mock creation and the coded components. Usually the two are not the same as they service different needs. Drag and drop symbol usages for designers to create prototypes and actual code implementation like a set of React components for engineers to build with.

The EUI team tried combining them with one of those DESIGN!! + CODE!! tools, but apparently our setup is too complicated…

Caroline L Horn

Design engineer and all around geek for design systems. Find me at Elastic working on and other designy stuff. Also

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store