Challenge 1: Ensuring Proper Hand-off and Knowledge Share
What I didn’t know was that the client already had a design system in place. Due to a bad handoff, I was not told about it, and it was not being put to use in the designs that I was asked to complete. I was left with the task of creating a design system to hold my work to. Luckily, I had just completed Figma Academy, which included in-depth and advanced lessons on color systems, base components, component management, color systems, and typography. Though I have been using Figma for a few years, Figma Academy gave me a deeper understanding of the tool that I was so familiar with.
Challenge 2: Creating the Framework that Fits the Project
With this under my belt, I was able to create a simple framework for my work. The main aspects of this ad-hoc design system that needed to be determined were:
- Grids and Spacing
- Form Components
A number of these elements were based on the client’s official marketing documents, so I was able to set this design system up in a way that was consistent with previously existing styles and elements. For each main aspect of the design system, I created a page for the information to live on so that it could be accessed by developers and designers alike. For each element of the design system that would be re-used on a “global” level, I made sure to turn them into components and styles in the design system’s library so they could easily be accessed and applied to different projects. I created designs that were consistent with their branding, consistent between designs, and ready to be handed off to developers in time for the website’s launch.
Challenge 3: Dispelling Misconceptions Around Design Systems
Some may feel a design system might limit creativity or work. Having set styles, colors, fonts, and rules for your designs can sound like there is no room for exploration or creativity. But the reality is quite the opposite:
- Design systems give you the building blocks to create larger elements for future projects such as forms, toasts, tables, cards, and content areas.
- Design systems ground your work in consistency. The work that had been done before had inconsistent spacing between elements and colors that were used without purpose or direction. By using a coherent design system, designs can feel more professional and consistent, and stay in-line with branding.
- Design systems give you the consistent tools to problem solve, experiment and test with, and help answer “how” and “why” a solution can work.