Overview
Overview
Overview
After the Neptune Design System was created I didn't stop refining and improving it. I started looking at each component individually to see how I could increase efficiency further with them. This is an example of the button component that was originally handled by variants. After all was said and done, there was 180 different variants for all the buttons we needed within the system. After moving everything to be handled through variables, I got what once was 180 different varients down to a single component.
After the Neptune Design System was created I didn't stop refining and improving it. I started looking at each component individually to see how I could increase efficiency further with them. This is an example of the button component that was originally handled by variants. After all was said and done, there was 180 different variants for all the buttons we needed within the system. After moving everything to be handled through variables, I got what once was 180 different varients down to a single component.
My role: Lead UX Designer
My role: Lead UX Designer
My role: Lead UX Designer
Problem
Problem
Problem
Having all of our components built using variants was how Figma always produced components. It makes it easy for designers to quickly produce components and increases efficiency of designers using the components. However, with new advancements in AI tools and vibe coding our elements there was an opportunity for our components to talk to these systems more programmatically.
Having all of our components built using variants was how Figma always produced components. It makes it easy for designers to quickly produce components and increases efficiency of designers using the components. However, with new advancements in AI tools and vibe coding our elements there was an opportunity for our components to talk to these systems more programmatically.
Solution
Solution
Solution
By using variables we allow these tools to read and output assets exactly how we expect them to be built and we can handle it all from the design side. After we had this implemented, the tool we were using (Builder.io) was able to read these components and automatically create a single component for us exactly as we expected. It created a button that developers could use out of the box and use our naming convention for how they wanted to work.
By using variables we allow these tools to read and output assets exactly how we expect them to be built and we can handle it all from the design side. After we had this implemented, the tool we were using (Builder.io) was able to read these components and automatically create a single component for us exactly as we expected. It created a button that developers could use out of the box and use our naming convention for how they wanted to work.
