The Stencil Power Booster
In every large organization there are many designers. As is a well know fact, they are all quite busy. Numerous stakeholders, folks asking them for this, that and the other.
Even with guidelines, constant pushing and pulling and short turnaround times as a constant. Shortcuts are made to save time and effort.
We struggled for quite sometime before we were able to get on a beta for stencils from Sketch. This is when we were able to put some structure and power behind our Design System program.
Technology
Current tooling at hand; Figma, Adobe, Sketch….
Timeline
Parallels the design cycle of
each Design System release Short answer, quarterly.
Role
Designer & Strategist
Date Completed
Each quarter
In order to fully put in the power of the design system the stencils had to follow our Atomic structure of the design system.
There were several reasons for this. To be flexible in the way that it would have common pages for ease of setup of common pages. Yet, it would allow for unique patters that a diverse portfolio requires. Using this structure would also keep item visually consistent.
A requirement that really took up some extra effort though we felt is was necessary, was the wire frame version of the Stencils. We made this decision for two reasons; first, some groups did not know really what they were designing (I know, discussion for another time) though quick rough sketches were boosters for illustrating ideas from a lot of words. Second, we were coming across some folks outside the design teams with aptitude for design and we wanted them to visualize their idea, at the same time. We preferred that they also validate and work with us as partners in the processes.
The Stencils are created in concert with the overall Atomic release schedule. One item of note, is that there are multiple people from multiple product teams and the Atomic team are working on this in concert. As well as the Atomic Code which keeps all this version and access controlled.
The above is an video of the High and Low Fidelity Stencils being used to construct various items.
As may or may not be so obvious and an important nuance to the stencils is that each item from Atom to Organism have built in spacing, padding and behavior. Creating Lego like building block to accelerate the creation process.
Peter Phinney 