Heathbits - Heath Huffman - UX/UI/Product Designer

The Challenge

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

Faster than existing setups
Affordable for all offices
Usable by all designers
Remote collaboration capable
Scalable for each client
Backed up regularly
Consistent in visual design
Capable of advanced prototyping

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.

Research

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.

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

Platforma

$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

Custom

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.

CustomForm

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.

BrokenFixed 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.

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.

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.

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.

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.

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

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

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...

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.

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.

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 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

Animations

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.

Accuracy

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.

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.

Wireframe Style Guide

Wireframe Template

Wireframe Page

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.

A Design System for Moonshot