Introduction to Product Design Kit for Figma (2024)

My toolkit for designing digital products: a side project that evolved while doing other projects.

Quick collaboration

I work remotely and Figma makes my life easier. It’s a perfect tool for collaboration with my colleagues. Giving and receiving feedback in seconds is awesome! You just send a link to the Figma file and that’s it. No need to download, install or update anything. Everyone can see and comment on your designs. Having an up-to-date browser is enough. Think of all the time you save! You can use it on whatever you want. I use it to cook dinner or play RDR2 for example :)

Faster workflow

Everything happens in the browser and it happens really fast. I have never experienced crashes or lags while working with Figma. Even more, the browser-based workflow is really great. For example I can go to a website, right click on an SVG image and click Inspect, then I just copy the svg code, paste it in Figma and as a result, I will have this vector image ready to edit in my design. Next awesome thing is that when I download an image, I can just drag and drop it in Figma right after it appeared at the bottom in Chrome.

Autosave

Figma is cloud-based and all you need to do is autosave to the server so no need to worry in case you forget to save your work or something bad happens to your computer.

All-in-one

You can design, prototype and do developer handoff with one tool.

Styles and Components

Help me design faster and keep my designs consistent. This is a killer feature that PD Kit is based on.

Figma is free

Not convinced yet?

If you never tried Figma you should definitely check it out. It’s easy to learn and there are also great tutorials on Figma official youtube channel to easily help you start. If you want to read more about Figma search for more articles on Medium. There are a lot!

As a designer in a small team of three, I do everything related to design: user flows, wireframing, prototyping, visual design, design documentation and sometimes writing HTML & CSS code.

While doing different projects over and over again, I realised that I was repeating myself creating digital wireframes from scratch, setting up the style guide for each project, creating components and applying all styles and rules to them. This took a huge amount of time and since I was the only person who designs in our team I had to improve my workflow. On top of that, with the addition of new services to our offer (design sprints and rapid prototyping) the need for something to improve the speed of designing arose.

I thought to myself: what if I could design a system to make the process faster and use it in every project to save time on production work? I was thinking of something that will support me in every stage of the digital design process. I started to work on the Product Design Kit. Save time. Focus on solutions.

About a year ago I read about atomic design by Brad Frost and started to research the topic of design systems. I discovered several design systems and started reading about them in medium articles, blogs and books. I learned that they help to keep product design consistent, build products faster, allow to invest more time in other areas such as research or tests and that every design token and component has its own role in the system.

Keeping all this in mind, I started to think how I could apply it all into my own system.

I made a list of items I needed to make it all work:

Wireframe kit to quickly move solutions from paper to screen;
Design style guidelines such as typography, colors, elevation, grid for consistent and well documented projects
Place for design assets such as images and icons so I can use and edit them quickly
Set of easily customizable components for faster workflow
Style guide page for easier developer handoff

Even more, all of this should be somehow connected and flexible so I wouldn’t have to do anything from scratch again.

In this section you will read about features of product design kit and reasoning behind them.

Grid

Some time ago I’ve explored 8-Point Grid and decided to use it in my projects. The same goes for the Product Design Kit. If you are not familiar with 8-Point Grid System you can read more about it in this great medium article by Elliot Dahl. I design all projects using this system so I can have less decisions on maintaining a consistent rhythm in spacing. However, some of the smaller elements of the interface like icons, smaller texts or components can have spacing divisible by 4. I think that I’ve also gone a little bit crazy over column grid because desktop column layout has 12 columns 64px wide and 32px gutter between them. It works ok for screen sizes above 1152px but for smaller screens columns get smaller and column layout is not following 8-pt grid increments. I’m still trying to figure out the best solution for me.

Typography

For typography I set line heights to be increments of 8 so they can nicely sit on the 8pt grid. Smaller text sizecan be divisible by 2 and bigger texts are the increments of 4. PD kit comes with Open Sans as the main font family. The font is a part of Google Fonts and since Figma uses Google Fonts there is no need to install fonts before using PD Kit.

Color

I really love the way Carbon Design System team approached color so I do the same. In Carbon DS, every color has its own role in the system and colors live in groups. Brand colors are those that have primary, secondary, tertiary and supporting colors. UI colors have all neutral grey colors that are used in backgrounds, borders and icons. Text colors are used in headings, paragraphs, body etc. Hover colors are obviously used for hover states and Support colors are used for all Errors, Warnings, Success and Info messages. I’m also using the naming system invented by guys from Carbon DS.

The only modification I do is when I want to add color tints to Brand colors. I just add color digit at the end of each color name. For example: for lighter version of Primary color it would go like this: $brand-01–100 (assuming that brand-01 is 500 on the color palette — I use this simple tool to create color palettes)

Grey Scale Editor

I made a simple color blending tool to create consistent grey scale for projects. It uses overlay blending mode on a given color and helps me create neutral colors for UI group.

Components

For components I decided to follow atomic design approach. However, PD kit has only atoms and molecules as components because every project I do has a different layout and more complex components (organisms). Using only atoms and molecules allows me to work faster and be more flexible.

Each component is created with styles, shapes and other components so it’s easy to adjust everything to my needs in just few clicks. For example, a button is created with shape (a rectangle which is a component) and button text style. I can easily change the button radius and text while editing these elements. All the components have constraints applied so it’s easy to resize them without ruining how they were structured.

Assets

The idea for visual assets was simple: keep everything in one place and easily add new objects so they can be used throughout the whole system so when I edit them the change is applied to all at once. I’ve created separate frames for assets and system icons. When I add an icon or image I simply make them a component, then set constraints so they can scale and be easily added from the components panel. In my projects I use material design icons because they are 24x24px and nicely sit on the 8pt grid. PD Kit comes with just a few UI icons for navigation but it’s an easy and fast process to find and add icons to the set by simply downloading the icon from this site and making it a component.

Wireframes

You are probably thinking: Wait… what about wireframes? The answer is really simple: All of the rules above are applied to the wireframe kit. Of course, there are no color palettes for wireframes but all the elements have color style applied (light and dark greys) so when I change primary color ($brand-01), every element in the system that has this color style applied will change. The same applies to the rest of the color groups.

Naming

Naming convention is pretty simple:

For styles it goes like this: Style Group / Style Name (for example: Headings / H1)

For components: Component name / Component Modification / State (for example: Input / Input + Placeholder / active )

I’ve decided to put everything in 3 pages: Design, Customize and Style Guide.

Design page

A page where all designing and prototyping happens. This page is also first so after someone clicks on the Figma file link it appears first.

Customize page

This is the page where all customizing happens and also where all components and assets live. Every frame related to different design elements has a short explanation and tutorial or youtube video link on how to use the related Figma feature.

Style Guide page

Style guide is a page dedicated to developers where all design guidelines and assets are listed. When designing the style guide page I focused on developers experience so everyone who is new to Figma can easily learn how to inspect design files. I created an introduction page where engineers can read how to inspect items in Figma and how to export all assets. Style guide doesn’t have components and its states, simply because I showcase states on the design pages and they also live on the customize page. It’s a time saver but in case someone is interested in seeing how I would place components and its states, I created a sample button page.

You can download Product Design Kit from www.pdkit.co. This kit is still a work in progress and I want to improve it over time so feel free to message me on Twitter to inform me what I can do better for the next versions. You can also follow me on Gumroad to get notified about future releases of PD Kit and other upcoming resources.

Mateusz Wierzbicki

Follow me for updates on what I am creating.

gumroad.com

A huge thanks to Ben Jaspaert, Peter van Laer, Greg Dlubacz, Thomas Lowry, Jake Knapp & John Zeratsky (Make Time) for helping to turn this project into reality.