Design systems & Abstract

Any designer on a growing team has grappled with this question: How do you maintain a centralized design system? How do you enable all the designers on your team to find and use the latest design components — buttons, icons— and collaborate on the same set of design files without tripping over one another?

Our first Community Meetup

We recently brought a group of forward-thinking design leads together to share how they’re solving these problems using Abstract. Aaron Bailey (Thumbtack), Jared Erondu (Lattice), and Amy Devereux (Envoy) discussed how they approach this problem at their respective companies. Despite the different sizes and stages of their teams, a clear theme still emerged: design systems need to fit the size and workflow of the team.

Thumbtack: Parallel Projects for Design Systems

Aaron Bailey, who leads the newly-formed Design Systems team at Thumbtack, shared a bit about their previous approach. They had a central design systems file, but without a designated owner, it became outdated very quickly. The constant state of flux made it hard to know which components were final and which were drafts, so designers sourced components from all over the place, exacerbating any inconsistencies.

Aaron’s team solved this by doing an audit of all their Sketch files, new and old, and building a fresh foundation on Abstract. They created two sets of projects: a Design Systems project for the broader design and engineering teams to pull assets from, and their own ‘sandbox’ project where they work on future and incomplete systems work. This way the design system is always clean and up to date.

As a way to start training the broader team and build trust in the system again, Thumbtack’s Design Systems team started releasing ‘toolkits’ of new components. For example, they created an icon toolkit, containing the designs for all their icons, plus the frontend documentation where the naming is consistent for both i.e. “left arrow small” so there was no confusion between designers and developers. The team now makes use of Linked Libraries, to share Sketch Symbols across all their projects inside Abstract.

Abstract supports both sides of our growing design system. On one side, the working files where our team is building, testing, and iterating on system components not ready for use, and the other, the product our team ships: a single source of truth containing all of our design system patterns.

Aaron Bailey | Design Systems Lead at Thumbtack

Lattice: Collections for Company-wide Transparency

Jared Erondu, who leads design at Lattice, developed a process to give the entire company insight into the design team’s process each week — all done through Abstract. First, he looks at all of the team’s commits for the week. He then creates a collection for each major project and finds all the relevant artboards. Finally, he writes a company-wide email with links to each project collection, an overview of the designer’s goal, where they are in the process, and a request for feedback. This weekly email has a nearly 100% open rate from the company, and has led to greater transparency and a better understanding company-wide of where their product is heading.

Abstract is a great way to show the evolution of a design, which is critical to changing the perception of our work from magic to tireless problem-solving. It promotes focus and transparency and it’s all there — every last change.

Jared Erondu | Design Lead at Lattice

Envoy: Branches for Team Collaboration

Abstract is especially helpful for designers with different areas of expertise. When Jon, our product designer, is working on mobile flows and he needs icons, I can create a branch off his, and update the icons, while he continues working. We can make progress without disrupting each other’s workflows.

Amy Devereux | Visual Designer at Envoy

Amy Devereux is Envoy’s visual designer, where she works alongside the two product designers on her team. Before Abstract, the team frequently encountered conflicted copies and constantly worried about overwriting master files. They even went so far as to schedule ‘design shifts’ during which only one team member would be allowed to work on a given file at a time. They solved this with Abstract — each designer creates their own branch before beginning their work. This has been especially helpful when working with contractors: they get access to all the design assets they need, and the Envoy team gets insight into what’s being completed with confidence that their existing work is safe.

Our Next Meetup

This is the first of many community events to come, so if you’d like to get involved, tell us: What problems are you and your design team facing?

Complete this brief survey to tell us more about what you’d like to see covered in our next event.