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.

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.

Figma Works on Any Platform Figma works on any operating system that runs a web browser. Macs, Windows PCs, Linux machines, and even Chromebooks can be used with Figma. It is the only design tool of its type that does this, and in shops that use hardware running different operating systems, everyone can still share, open, and edit Figma files.

In many organizations, designers use Macs and developers use Windows PCs. What does Figma do to help bring these groups together? Figma’s universal nature prevents the annoyance of PNG-pong (where updated images are bounced back and forth between design team disciplines). In Figma, there is no need for a mediating mechanism to make design work available to everyone.

Real-time file collaboration helps mitigate “design drifting”—defined as either misinterpreting or straying from an agreed-upon design. Design drifting usually happens when an idea is conceived and quickly implemented while a project is in progress. Unfortunately, this often leads to deviating from the established design, causing friction and re-work.

What is Figma used for? Using Figma, a design lead can check in to see what the team is designing in real time by simply opening a shared file. If a designer somehow misinterprets the brief or user story, this feature allows the design lead to intervene, correct course, and save countless hours that would have otherwise been wasted. (By comparison, teams using Sketch have no immediate way of telling if designers are going astray.)

Side note: Some designers don’t like to be “spied on” when they’re working, so it’s up to the design lead to explain the benefits. In general, most designers quickly see the value in such a feature and easily adapt to working in a shared environment.

Figma Uses Slack for Team Communication Figma uses Slack as its communication channel. When a Figma channel is created in Slack, any comments or design edits made in Figma are “slacked” to the team. This functionality is crucial when designing live because changes to a Figma file will update every other instance where the file is embedded (a potential headache for developers). Changes to a mockup, warranted or not, are immediately vetted, and the feedback channel is live.

This form of selective sharing, from file down to frame, lets designers, product owners, and developers share exactly what is needed in bug tracking tools and community software like Confluence or SharePoint.

Embedded Figma Files Provide Real-time Updating Figma also shares live embed code snippets to paste an iFrame in third-party tools. For example, if Confluence is used to display embedded mockup files, those files are not “updated” by saving a Figma file—those embedded files ARE the Figma file.

If a change is made to the mockup by anyone in Figma, that change can be seen live in the embedded Confluence mockup. (You can read more about Figma and Confluence integration here.)