top of page
Phoenix Design System:
Icon Tutorial
Introduction
Phoenix is Workfront’s Design System that is used by over 20 designers in three countries and has been in the making for around 2 years. Our team was responsible for creating, maintaining, and evangelizing this design system while we were also working on redesigning Workfront’s Search and Navigation.
Problem
We did not have enough time to create all the icons other designers were requesting from us, which resulted in us missing deadlines because we could not fit all the work into the timeframe we had. We were also having a difficult time getting other designs to contribute to the design system.
Goal
Empower other designers to add their own icons to the Phoenix Design System.
Our team
My role
I assisted Brooke Bell in maintaining, documenting, and contributing to the Phoenix Design System. During this project, I built out the tutorials and mentored other designers on how to build and contribute icons to Phoenix.
First, we tried
First, we tried running workshops with small groups of designers. During these workshops, we outlined how to set up artboards in Illustrator, what our design standards were, and how to export the icons correctly.
Outcome
While the designers were extremely involved during the workshops, once they left we continued to get requests for new icons. After pushing back and asking designers to use what we taught them, we found that the designers were still confused and did not have a way to go back and review the material we presented.
We also found that while we were receiving a lot of requests, some designers didn’t immediately need to build any icons which resulted in them forgetting the process completely.
"Some designers didn't immediately need to build any icons"
Then we tried
After running the workshops and finding that designers needed more documentation to look at we decided to try something else. What we decided to do was go through the Workshop again, film it, then post the video for designers to review when they needed help.
Outcome
We posted the video and were expecting that to solve the problem, but the requests kept coming in. After interviewing a few designers we found that the videos were too long and that it took designers too long to find answers to their questions.
"It took designers too long to find answers to their questions. "
We needed to break it down
After our first two attempts, we reviewed what we had learned and decided that we needed to break down the process so it was easier to digest. Inspired by WikiHow we decided to build a step by step tutorial that we could send to designers any-time they had a question.
This is the tutorial we sent out:
Who is responsible for making icons?
Each designer is responsible for making the icons needed in their areas. Marvel is here to review designs and make sure iconography is consistent throughout our application, we are happy to help but we will not make icons for you.
Step 1
First, you will want to find the Illustrator file that contains the grids. You can find this in the DSM under Icons > Icon grids > Download the Illustrator Icon Grid Templates.
Find the icon grids in the DSM
Step 2
Download the file for the artboard(s) you need for your designs.
TIP: If you need multiple sizes, it's best practice to start with the smallest size and scale-up.
Download the icon grids
Step 3
When you open the file you will need to open it > Create a new layer (call it Artwork) > Lock the guides layer.
Create a new layer
Step 4
Design your icon using the downloaded grid on your new layer. Use the image below to learn how to use the guides.
Icon grid explained
Don't forget to follow our design standards:
A. All strokes should have a 1px width.
B. Corners should have a 3px radius.
C. Strokes should have rounded caps.
How to add rounded caps on a stroke
Step 5
Use Pixel Preview to make sure your icon is aligned directly to the grid. This can be found under View > Pixel Preview.
TIP: Right click your artwork and select make pixel perfect to align it perfectly to the grid.
Make icons pixel perfect
Step 6
Prepare for export by making a duplicate art board and outlining all strokes. Do this by selecting the stroke > Object > Path > Outline Stroke.
Unite your shapes by clicking the Unite icon in the Pathfinder options.
Outline strokes
Step 7
Before you export you will want to hide the guide layer.
Finally export the designs as an SVG.
Hide the guide layer and export as SVG
Step 8
The last step is sending your designs to Marvel to be approved and added to the DSM.
Send to Marvel:
-
An SVG for each icon (all sizes need their own SVG)
-
Ai File (Make sure the artwork is not outline so we can make edits, if needed.)
-
The name of each icon so we can put them into the system properly.
Congrats, you did it!
The outcome
After releasing this tutorial we have been able to send it to people when they have questions or ask us to create icons for them. This tutorial has been a part of our process for the last 5 months and designers now feel confident creating their own icons and no longer ask us to do it for them. Designers now send us the files to be approved and we add them to GitLab.
"Designers now feel confident creating their own icons and no longer ask us to do it for them."
What I have learned
Working on a Design System is extremely challenging especially with a small team. Going through this process has taught me that the best way to get designers to contribute to the design system is by breaking down the process so it's clear and easy to digest. Since this project, I have developed tutorials for other components, research tools, and our analytics tool because I have found it to be the best way to speak to and teach our design team.
bottom of page