Creating an Effective Get-Started-Kit for Design Systems
Written on
Chapter 1: Introduction to Get-Started-Kits
This article aims to explore how to develop a "Get-Started-Kit" for design systems, which can significantly speed up the onboarding experience for new team members.
Designers who are either new to an organization or recent graduates may struggle to leverage a design system's full capabilities immediately. In a previous section, we discussed the framework and types of content that can be housed within a design system. To effectively utilize it, newcomers need to familiarize themselves with the system's components, including style guides and operational procedures. While this learning curve can be time-consuming, the objective of this article is to guide you in creating a Get-Started-Kit that will facilitate this process.
The Challenge
The journey of integrating into a company with an established design system and style guide can be daunting until one grasps the various standards and protocols. This experience is particularly familiar to designers who are often brought in on a temporary basis, making the transition even more challenging. Although their influence on the product may be limited during this initial phase, minimizing the time from onboarding to becoming an efficient contributor is crucial for enhancing product quality. Streamlining this transition can lead to fewer errors, reduced review cycles, increased autonomy, and improved decision-making tools, ultimately benefiting the organization.
The Solution: Get-Started-Kit
Initially crafted as a foundational resource for designers who may be inexperienced with design systems, the Get-Started-Kit has proven valuable for designers at all levels of expertise.
Components of the Get-Started-Kit
UI Assets
This section includes various essential UI components such as buttons, input fields, navigation bars, footers, responsive layouts, and sample screens. Utilizing Figma's "Go to main component in the library" feature simplifies the process of locating these elements within the design system.
Example Screens
This segment showcases examples of login, navigation, and settings pages for each product. The benefits of providing example screens are twofold: designers receive ready-made templates that they can adapt, and they gain an intuitive understanding of the design without needing to memorize the style guide.
Structure of the Kit
Currently, the kit is organized into four main sections:
- UI Assets
- Design Exploration
- Design Refinement
- Handover to Engineers & Documentation
These sections can be expanded as needed. Adopting a consistent structure across problem-solving processes allows all designers and developers to comprehend the designer's thought process more easily, reducing the number of handover meetings and improving the developer grooming process.
Status Indication
Section headers play a crucial role in the kit's structure. They not only delineate various phases of the workflow but also indicate the status of screens—such as In Progress, Ready for Review, Done, and Under Exploration—allowing developers to self-inform about the designer's progress without needing to reach out directly.
Documentation
Well-documented designs are essential for project success. Adequate documentation retains knowledge and facilitates smooth transitions between designers. Moreover, it allows for easier handoffs and revisiting past challenges. Documentation should clearly outline the problem, provide potential solutions, and clarify implementation details for engineers.
Instructions
Each section should have clear instructions to prevent designers from needing to memorize procedures. These guidelines act as checklists, ensuring that all designers follow the same steps throughout their problem-solving processes.
Chapter 2: How to Construct a Get-Started-Kit
The Get-Started-Kit acts as an extension of the design system, encompassing all necessary materials to expedite problem-solving.
UI Assets
Figma offers robust tools to analyze the frequency of asset usage within the design system. Your UI Assets selection should include the most commonly used elements, while less frequently used icons and components can be excluded. It’s crucial that the elements in the kit are linked to the design system to ensure effective learning for designers.
Example Screens
Conduct interviews with other designers to identify frequently utilized screens and those that best represent brand guidelines. Select a few of these to include in your kit.
Structure
The kit's organization should align with the design processes in your organization. If UX designers also handle research, a section for design research should be included.
Status Indication
This aspect enhances the structure and depends on your organization's definitions of done and workflows.
Documentation Templates
Create templates to capture essential information regarding the problem-solving process. For instance:
- Clearly describe the problem.
- List user scenarios where the problem occurs.
- Identify any missing research needed to resolve the issue.
- Define measurable goals for the problem.
Documentation for Handover to Engineers
This documentation often entails detailed descriptions of the solution's functionality. To facilitate an efficient handover, consult your engineering team about the information they require for a swift transition.
Instructions
Draft explicit instructions for each section to guide designers through their tasks. These can also include examples to help them get started.
Get-Started-Kit in Action
The screenshot below illustrates a design solution structured around the Get-Started-Kit, showcasing various user scenarios.
The first video titled "Build it in Figma: Create a Design System — Foundations" presents foundational concepts for building a design system effectively.
The second video, "Your First Design System in Figma (Beginner Tutorial)," offers a beginner-friendly introduction to creating a design system in Figma.