Force Mobile Design System
Overview
When our design team started to grow and take on more projects, our ability to stay consistent with our symbol libraries became a challenge. We knew that a properly developed design system would help us build and collaborate more efficiently, but in order to get there we would need to revise our workflow and start designing our systems from the ground up.
My Role
Product Design Lead
Skill set
Design Systems
Improving our workflow
At the time, our designer toolkit consisted of Whimsical, Sketch, Abstract, Flinto, and Zeplin, for wireframing, visual design, version control, prototyping, and developer handoff. We had way too many tools and found that simple updates required a long workflow. It was also hard to track comments and feedback across multiple platforms. As this project and other projects grew, we needed a more collaborative, robust, and efficient working platform to keep our pace moving forward and eliminate our design debt.
To accomplish this, I proposed the transition to Figma. This would replace Sketch, Abstract, and Flinto, and allow us to design, prototype, and leave feedback within a single app. It would also allow our team to truly collaborate and work simultaneously, which wasn’t achievable in Sketch or Abstract. As an added bonus, switching to Figma would be a lower monthly cost in software expenses.
Replacing Sketch, Abstract, and Flinto with Figma in our workflow
Exporting Sketch files from Abstract and importing into Figma
Migration to figma
After getting the green light from my design team and our product managers, developers, and additional stakeholders, we began the migration. I led the team in organizing and moving our design files from Sketch and Abstract to Figma, starting with the Force mobile manager and driver apps. Unfortunately, after importing our Sketch files, we also imported the unorganized symbol libraries that came with it, so the next step was to overhaul the design system.
Design System Overhaul
If you’re a product designer, chances are you’ve already heard of a design system. The design community uses the term in various ways, but we can define it as
“...a set of interconnected patterns and shared practices coherently organized to achieve the purpose of digital products.” -Alla Kholmatova, Design Systems
As a team, we had some previous knowledge of how a design system should work, but our existing systems lacked the organization and consistency needed to scale and be efficient. What was also missing was a shared understanding of how to style and layout our designs across our various products. To kickstart this initiative, we decided to begin overhauling our most recent project, the Force Mobile Design System.
THE PLAN
1
Audit the design system
2
List the styles and components
3
Build the pattern library
4
Design for better communication
5
Incorporate the Zeplin styleguide
Step 1: Audit the design system
In order to fully understand what wasn’t working with our system, I started with a full audit of our existing components, color styles, and type styles. I took screenshots of these elements and placed them in Whimsical so I could quickly view all of them at a glance. This process made it easier to point out existing design inconsistencies, as well as remove any elements that were either unused or irrelevant.
Using Whimsical to visually collect all existing Sketch symbol libraries and run a design system audit
Step 2: List the styles and components
The next step was to list down the components, type, and colors used throughout both mobile apps. I took screenshots of our app feature sections and mapped them out in Whimsical to analyze our use of these patterns. I then went through each screen to see if there were opportunities to pare down type styles, find a more uniform use of color, and build more consistency into our components.
Our previous design system had no real constraints, so it eventually became overloaded with too many rogue unorganized elements. My goal with this design system was to create a concise group of organized styles and components that would be more comprehensible and easier for us to implement and scale in the future.
One thing I’ve definitely learned from building a design system is that it’s much easier to add than it is to remove.
Using Whimsical to list existing components, type, and colors used in our Force mobile apps
Step 3: Build the pattern library
To make sure our components could be utilized in a more consistent and efficient manner, I reviewed the symbols we created in Sketch and researched how Figma’s unique features could be leveraged to create better building blocks.
Styles
I was surprised to see that color styles were treated more globally, and could be applied to fills, strokes, and even type. This made selecting and updating colors for multiple screens very easy. Text styles were an even bigger surprise because there was no need to create an individual style for each alignment, color, and size variation, which was always a time consuming process in Sketch. Because of this, I was able to get rid of more than half of our original type styles.
Figma's global treatment of colors—applying to fill, stroke, and type
An example of how color can be applied to text, independent of the type style
Without the constraint of color and alignment, I was able to remove over half of the previous type styles
In addition to color and type styles, Figma implemented some other helpful features, such as image fills and effect styles. This helped to add even more consistency, especially when applying user and vehicle photos, or various types of drop shadows.
An example of how image fills can be easily applied through the use of color styles
An example of effect styles used to apply various types of drop shadows
Components
When it came to building components, the auto-layout feature was truly a game changer because it allowed for our components to adapt dynamically to the content within, yet still allowed for uniform padding and spacing between the text or elements inside. This was really helpful for things like buttons, cards, or layouts where the length of text would dictate the width or height of the component.
Using auto layout to create a tooltip component
A place for everything
By far, the thing I appreciated the most was Figma’s thoughtful organization for all of these elements. Searching and managing text, colors, and components was much more straightforward in Figma than it was in Sketch. This was because of Figma’s simple interface, layout, and naming structure. Little things, like adding font size and line height next to the text style label, or having the ability to add descriptions to each style and component made it easier for us to view important details about our designs.
Figma's thoughtful organization, layout, and descriptions
Designing the design system
While the various parts of the design system were being created, I also worked on organizing and bringing everything together in a cohesive way. Within the same file, elements were grouped into categories and then grouped again into subcategories based on their feature or purpose. Trimming down the previous design system took a great deal of initial time and effort, but I think I was able to create a solid foundation that would be much more manageable and functionally scalable in the future.
Step 4: Design for better communication
One of the key benefits of transitioning to Figma, was our ability to collaborate in the same workspace. Designing as a team was faster than we had ever imagined. No more waiting for another person to finish with a file, because we were all working simultaneously on it. This presented a new question for me.
Could we utilize Figma’s built-in features to help us communicate more efficiently in our workspace?
The answer was yes! I came up with the idea of annotations that could be used to communicate directly in Figma. Once again, with the help of auto layout these annotations could expand dynamically when adding text. I started by creating a few demo components that could help us do things like show the current status of design flows, leave notes, or chat with a team member. After some testing with the team and several iterations, I ended up with a group of useful everyday tools. I even added additional components for use cases that would be helpful in the future, such as a JIRA badge and an update log.
Statuses
These labels help the design team and other stakeholders know the current progress of flows and individual screens, if copy needs to be reviewed, or if designs are ready to be uploaded to Zeplin.
Sticky note
Although Figma has a comment feature, these stickies allow for the team to quickly jot down ideas and updates during a video conference, call, or meeting.
Chat message
While working on the same file, team members can use this chat message to have a live conversation while in the Figma workspace, versus switching back and forth from Slack.
JIRA badge
Zeplin did a great job at allowing designers and developers to reference JIRA tickets for each project or screen, so I thought, why not add the same functionality in Figma?
Update log
With Zeplin, we have to constantly leave descriptions for any new screens we upload. I thought it would be nice to keep a running log of these descriptions for reference.
Step 5: Incorporate the Zeplin styleguide
The final step was to upload our hi-fidelity screens, along with the colors, type, and components I had created in Figma. What made Zeplin useful in our workflow was its ability for developers to quickly reference all relevant spacing, styles, and components at a glance through the use of its global styleguide. It also did a great job at revealing which screens were using which components, and how they were all connected and reused throughout the apps.
Zeplin global styleguide for the mobile manager and driver apps
Final Thoughts
Just the beginning
To be honest, I had no idea what I was getting into when taking on this project. This was my first attempt at improving a workflow and overhauling a design system, but I feel like I've learned so much in the process. There was somewhat of a learning curve when adopting Figma, but once we were over that hump, it made a considerable improvement in how we designed and communicated as a team. Although the Force mobile design system is newly revamped, I know that the effort doesn't end here and it will take additional patience and diligence as it continues to evolve and grow.
The Developer Piece
A missing piece of the puzzle, in terms of validation and implementation of our pattern library, was developer collaboration. As part of a small company, we outsourced a majority of our developers and engineers and couldn't benefit from having dedicated team members working closely with our design team. Because of this, Zeplin became very crucial in our workflow and helped to streamline much of our developer handoff, even while they were overseas.
Get in Touch