How Creating a Design System in Figma Helped Me Understand the Product Better

A New Intern’s Challenge

Today, I’d like to share my personal experience as a beginner in the world of design systems. Just a month into my internship, I found myself tasked with creating our company’s first design system. It was a daunting challenge, but one that ultimately helped me understand the product better and grow as a designer.

And I had zero experience in Design Systems and the product was challenging for a beginner to understand, so at that point, I was assigned the task of handling the design system as we switch tools from Sketch to Figma, it gave me an edge because Figma was my sole tool.

I was so puzzled when everything started out. it was tough because the product was complex, and I didn’t know much about the industry

The Initial Attempt: Learning from Scratch

At the beginning of my internship, our team was transitioning from Sketch to Figma, and I was learning by exploring different files and designs. Eager to contribute, I created a basic design system using elements from free UI kits. However, it lacked the necessary details to be truly effective.

I was in college’s final sem then, coming from engg background, I didn’t know anything so my whole focus was to dive deep into this and just try to grow.

The Journey Begins: Deepening Product Understanding

Image from one of the early systems, that I created

It was easy to start out and just build a basic kit, but that UI kit wasn’t strong enough that engineers should also allocate their time to build our custom kit when they could easily use publically available ones.

As I continued working on the product, I began to see the value of the design system. Whenever I needed to create something new, I found myself considering its functionality and interaction. This process helped me understand the product on a deeper level.

Improving Skills: Learning to Create a Design System

To further enhance my design system, I started investing more time in learning about design systems and best practices. This included:

• Studying design system examples from well-known companies
• Reading articles and watching tutorials on design systems
• Participating in online design communities for feedback and guidance

These efforts helped me refine my skills and prepare for the next step in my journey.

The Transformation: A More Detailed Design System

After nine months of using my initial design system, I knew it was time for an upgrade. I took everything I had learned and applied it to create a more detailed, functional design system tailored to our product’s needs.

This new design system included:

• Consistent colour palettes and typography
• Reusable components and patterns
• Detailed documentation for designers and developers
• Accessibility guidelines

Design System Enhanced My Understanding of Product

Creating a design system was instrumental in enhancing my understanding of the product. Here’s how it helped me delve deeper into various aspects of the product:

1. Comprehensive Product Vision

Working on the design system compelled me to examine every component and interaction in the product. This deep dive into the product’s elements provided me with a more comprehensive understanding of the product’s vision and goals.

2. User-Centric Approach

Designing a system focused on usability required me to empathize with users and consider their needs, pain points, and preferences. This user-centric approach sharpened my insights into the product’s target audience and their expectations.

3. Effective Information Architecture

The design system encouraged me to analyze the product’s information architecture to ensure seamless navigation and usability. This process provided me with a better understanding of the product’s structure and how different components were interconnected.

4. Iterative Design Process

Working on a design system introduced me to the concept of iterative design. This approach enabled me to continuously refine the product’s design, making incremental improvements and addressing user feedback to enhance the overall user experience.

5. Cross-Functional Collaboration

Designing a system that catered to both designers and developers necessitated cross-functional collaboration. This collaboration provided me with valuable insights into the technical constraints, development processes, and other factors influencing the product’s design and functionality.