A Design System for Moonshot


In late 2019 Moonshot's parent company PacterEdge had close to a hundred designers spread out through cities all over the world. We needed a way as a global company to utilize, share, and collaborate with each other on demand as needed.

I was picked to be the lead on an ambitious project to setup the remote tools and design systems necessary to maximize the billable hours of our designer resources no matter their location.

To comply with any non-disclosure agreements, I have omitted and obfuscated confidential information in this case study. All information in this case study is my own and does not necessarily reflect the views of Moonshot.

The Challenge

The high level goals were to set something up that was:

My Role

I was the lead designer and technologist on this endeavor. My primary responsibilities included:

  • Researching the top vector-based design systems and presenting them to the Moonshot design team to pick one.
  • Research the top WIREFRAME component libraries available in picked design system and present them to the Moonshot design team to pick one.
  • Setting up the picked design system and component library for everyone to use.
  • Creating a matching, easy to update, style guide that would automatically restyle all components in the component library when updated to client brand guidelines.
  • Implementing the most advanced prototyping system possible that would work with picked tools and libraries while advancing our ability to prototype in AI, VR, AR, VUX, and other emerging technologies.


To kick off my research I asked my fellow Moonshot designers for recommendations on their favorite vector-based design tools, systems, and component libraries. I then spent the next two weeks reviewing these and other recommendations found online before presenting them to the Moonshot design team for final approval.

system design reviews

Vector-Based Design Systems

Based on company inventory and team member suggestions of vector-based design tools to use, I created a short list of options to explore that consisted of Sketch, Figma, and Adobe XD. In combination with these vector tools were two additional resources (Abstract & InVision) that, depending on the tool, may be needed in addition in order to support backup, sharing, collaboration, version control, and prototyping.

I researched online and carefully documented reviews of each tool combination, their advantages and disadvantages, and all pricing/cost information. In addition, I downloaded and tried out all these tools myself, making sure to document my findings about what I liked and disliked about each. I then presented my findings to the design team with my final recommendation.

Without diving too much into the details, the team unanimously agreed to go with my recommendation of using Figma as our vector-based design system.

*It is important to note that Figma by itself is ONLY a vector-based design system made for design teams. IT IS NOT A COMPLETE DESIGN SYSTEM SOLUTION. While this product does provide all developer specifications needed for a dev team to do their job, it does not provide the actual coded components themselves. To do that would mean having a dependency on a development team to create a synchronizable matching component library and that is not our intention. We are a design studio and our projects are independent of any development that may (or may not) be needed for a client project.

Wireframe Component Libraries

Next, we needed a good wireframe component library. There was no need to create everything from scratch when there are lots of well thought through libraries already established that we could start with. After taking more feedback from the team and doing some more online research, I narrowed down our choices to 6 libraries (one being a custom internal library that we had already started).

InVision Form

  • Free
  • No HTML Templates
  • Follows Atomic Design
  • 190 Templates, 200+ Components
  • Comes with wireframe design by default
  • Have to convert to Figma


  • $159 for file, $68 HTML
  • Has HTML Templates
  • Does NOT follow Atomic Design
  • 173 Templates, 536 Components
  • Comes with wireframe design by default
  • Comes with Figma version

Prime Design System

  • Subscription ($48 a year)
  • No HTML Templates
  • Follows Atomic Design
  • 173 Templates, 150+ Components
  • No default wireframe design
  • Have to convert to Figma

Frames For Sketch

  • $88 (free updates)
  • No HTML Templates
  • Does NOT follow Atomic Design
  • 140 Templates, 250 Components
  • Comes with wireframe design by default
  • Have to convert to Figma

Cabana Design System

  • $68 (free updates)
  • No HTML Templates
  • Does NOT follow Atomic Design
  • 20 Templates, 150 Components
  • No default wireframe design
  • Comes with Figma version


  • Free
  • No HTML Templates
  • Does NOT follow Atomic Design
  • 20 Templates, 50 Components
  • Comes with wireframe design by default
  • Have to convert to Figma

Design Comparisons

In addition to research, I spent a few days recreating a few of our older mockups we had designed with our custom component library using each of the other 5 libraries for visual comparison.

custom wireframes vs form

And the Winner is...

After doing another presentation to the design team on my wireframe component library findings and showcasing several example designs using each, we decided to move forward with InVision Form. There were advantages and disadvantages of each library, but after carefully considering Form’s number of components & templates, professional look & feel, and price, we felt it was the best choice for our shop.

Figma Configuration

Now that we knew what we wanted for a vector-based design system, it was time to set it all up. This ended up being a little more complicated than I initial thought as the import process, component flexibility, and the library selection was more limiting and broken than expected. These issues would need resolving before we could share out a globally library to all our designers.

Component Flexibility

Even as initially setup in Sketch, the InVision Form library components by default were not flexible. On resize or manipulation of any of the components, they would break. Throw in additional import issues and bugs when we converted everything to Figma, and there was quite a bit of fixing and rework that needed to be done.

fixed broken FIGMA components

Component Customization

Many of the components that came with InVision Form were redundant to other created components with only slightly different modifications. To simplify and make our component library leaner and more flexible, I created single advanced components with configurable options that replaced multiple existing components. For example, every card I created had three image options: Default Icon, Profile Icon, or Set A Custom Icon.

created custom FIGMA components

Component Library Launch

After several weeks of work tweaking and extending our wireframe component library to satisfaction, I followed up with Moonshot branding and incorporation of an Atomic Design structure for all our components. I then set up the library with example layouts and new Figma Auto Layout grids to inspire and give designers a jump start on new projects. All colors, fonts, and iconography were customizable for easy conversion to client brand specific styles. The final and last step was publishing it out to Figma as a shared library for all our designers to use.

Full FIGMA Component Library

A few more weeks out we launched several small projects using the new Moonshot Wireframe Component Library. I followed up on feedback from other designers as they used our design system, implementing new recommendations and making tweaks where needed.

Real World Application

Real World Application

Advanced Design Systems

A complete design system goes beyond vector-based tools and their libraries. It includes the sharing and using of the same elements and styles between designers and developers. So how does that happen? That is the dilemma facing design systems today. As of right now, the gap between design and development has not been solved. There are tools such as InVision DSM that are attempting to do this.

Design Systems Discussion by InVision

The Quest for a Single Source of Truth

These types of design systems create ‘tokens’ from vector-based design libraries (such as Sketch, Figma, or Adobe XD) that contain styling information like colors, fonts, border-radius, etc. These tokens are then passed to the development team as variables that they use in their production level code to actually style websites and apps. Now design teams can control all styling information, thus creating a single source of truth so to speak. This helps bridge the gap between design and development while allowing both to remain mutually exclusive from each other.

Design System Managers

While effective and definitely a step in the right direction, this type of setup has its limitations. Because the designer tools are vector-based, no code is actually generated for elements designed in these tools (just styling information). You cannot create a component in Sketch, like a button, and have the code generated for the development team. This is a huge limitation caused by the insistence of designers to keep using vector-based design tools that do not (and never will) effectively translate their designed components into actual code.

Don’t blame design systems for the shortcomings of vector illustration tools. As long as design tools enforce the vector format on user interface designers, implementation of a single source of truth will remain impossible.
Marcin Treder
Marcin Treder UX Design Manager at Google

Should Designers Learn to Code?

Wherever you currently work as a UX/UI Designer, the vector design and prototyping tools/systems you are using now may be different from the ones you used at your previous job. Website code, however, is universal. No matter what tools you may personally like to use to code a website, they always translate into the same thing: HTML, CSS, & JavaScript. Even mobile apps can be created with web code. Is learning to do basic web coding really that much harder than learning 100 different vector design and prototyping tools? Especially when they are trying to mimic code anyway but never actually succeed at it? This would eliminate the need for a third-party service and provide a real single source of truth used by both designers and developers.

Code Based Design Tools

Code Based Design Tools

The answer may not be making UX/UI Designers learn to code, but minimally, the tools we use to design website should be code-based instead of vector-based. With code-based design tools, when a designer designs a component, it generates relevant HTML/CSS/JavaScript displayed through a browser showing exactly what the user will see. This is important as it offers the most realistic view of designs and interactions because the designer and developer are using the same technologies.

The biggest challenge for designers will be losing the ability to drag, drop, and resize components the way they are used to. Code-based design systems will follow the rules of HTML & CSS. That means that everything will be inline and block level elements. By default, everything floats to the upper left corner of a page/screen. In order to arrange content, designers will have to learn and understand grid systems like CSS Grid and Flexbox to get elements positioned where they want them. If you code, you already understand this.

...there's way too much information to decode apps and websites. You get used to it, though. Your brain does the translating. I don't even see the code. All I see is grid, carousel, form...
Unicorn UX Designer
Anonymous Unicorn UX/UI Designer

Pattern Lab

Pattern Lab is the code-based design system that I picked to use for Moonshot's advanced prototyping needs. All fonts, colors, and styles used in its style guide are created with real CSS code and can be applied to any components, templates, or pages in its library.

Pattern Lab Styles

In addition to styles, it also allows you to create a library of coded components. These components can then be put together to create a page template, which can then be used to create multiple page instances. The real power comes from JSON data files behind each page instance that tells it what content to display.

Pattern Lab Components

Using the styles from the Moonshot Figma Wireframe Library, I created a matching coded library of the same components. Because Figma is a vector-based tool, this was a manual process. Using Pattern Lab currently requires the user to know how to code. Because most of our designers do not know how to code, we have to have both. My hope is that in the future more designers will transition to Pattern Lab or some other code-based design tool. This will provide them the opportunity to see the power behind using real code for mockups, prototypes, and dev specs.

Speed, Power, & Efficiency

Initial setup is slow. Very slow and time consuming. This is the reason so many design teams and studios never set up a design system. I have only once been given approval to actually do so myself, and it was for this project. Prior to that, all the design systems I have set up I did without asking, on my own time, or between projects.

I found it was better to ask for forgiveness than permission. Why? Because once everyone sees the speed, power, & efficiency of a well-designed system, they almost always come on board. The trick is that they have to see it first in order to believe it.

I’m going to march down the page and sort of say, alright, here is a section that needs to do this, and oh yeah, we’ve got a component that does this. And so that actually by the end of it I’ve just got a simple text list...
Josh Clark
Josh Clark Founder of Big Medium

In fact, once you have a design system up and running, designers may not even be needed for designing some pages! I can vouch for this myself in past places I have worked. Once I had the designs system set up, it was just a matter of me dropping in a list of components and updating the data file. That’s it! Not only did I have a mockup of every viewport size possible for presentation, but I also had a working prototype, with full interaction capabilities and micro-animations included, all done in half the time it took my fellow designers to do their static mockups! How’s that for efficiency?

You can work with the developer and the interaction designer directly to build out and scaffold out a page using design system components that you've already got. You don’t even need the designer for that because those components are already designed...
Dan Mall
Dan Mall Founder of SuperFriendly


There are no limitations to the amount or types of animation effects I can implement. Because it is real code, it can do everything that a production level coded system can do. Vector-based prototyping tools are very limited in their animation and interaction capabilities and are not nearly as powerful or capable as their code-based counterparts.


Yes, vector-based design tools can create beautiful designs. However, this almost always leads to inaccurate translation of the design in development. That’s because images don’t translate into accurate HTML, CSS, and JS by themselves. Colors, text, and gradients used by design teams through their vector tools will look different than the way browsers present the same specs when coded. This creates a big gap in design translation.

Inaccurate Shadow Translation

Check out this example and this tweet that sum it up.

Advanced Prototyping

One of the requirements from Moonshot was to find a way to implement newer technologies into a prototyping experience. How do you prototype Voice, AR, VR, and AI through vector-based design tools? Some have very limited capabilities to work with these technologies, but in general, they are incapable of prototyping them.

Pattern Lab is code based, so it can work with any APIs or open source tools that interact with these technologies. Anything that can be done in production can be done in a code-based prototype.

Pattern Lab Examples

To demo the power of Pattern Lab, I created a template and page using the wireframe component library I had coded. I then copied that project and created a new project where I replaced the styles with actual brand styles of a previous client.

The Wireframe Version

Here are examples of the Style Guide & Component Library, Template, and Page I created using the Figma wireframe styles. Notice the advanced interaction capabilities, features, and micro-animations it has by clicking, scrolling, and resizing elements of the website.

The Styled Version

Here are examples of the Style Guide & Component Library, Template, and Page I created using the styles from a Kraft-Heinz Recipe project I had worked on earlier. Updating the style guide automatically updates all the component, template, and page styles. Because it’s rarely 100% perfectly styled after doing this, I can go in and make style changes and updates to any individual components I want to.

Design System Insights

In conclusion, I was able to accomplish everything we wanted from a design system, at one-third the price, with twice the efficiency. While it is not a single solution, it does do everything we need. As newer design tools and technologies advance, my hope is that the gap between design and development will eventually be bridged by a single solution.


Faster and more efficient than existing design shop setup


Cheaper than existing design shop setup


Collaborative, usable, scalable, backed up, consistent


Prototyping options and capabilities