A CASE STUDY
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 high level goals were to set something up that was:
I was the lead designer and technologist on this endeavor. My primary responsibilities included:
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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 UX Design Manager at Google
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...Anonymous Unicorn UX/UI Designer
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.
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.
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.
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 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 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.
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.
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.
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.
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.
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