About the author
Ant Design System for Figma was created by one guy. Learn more about Matt and his projects.
My name is Matt (Mateusz in Polish) and I'm a product designer from Bialystok, Poland. My story with Figma started in May 2017. In 2017 I've also read about atomic design by Brad Frost. I enjoyed it 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 a product design consistent, build products faster, invest more time in other areas such as research or tests and that every design token and component has its role in the system. I felt that it's something I want to do in my design career. Creating style guides, documentation and components was exciting for me, and I could spend hundreds of hours recreating different systems from scratch.
Product Design Kit
In December 2018, I released my first big project called Product Design Kit - a free components and styles library made exclusively for Figma. It's a kick-starter pack for small projects based on the atomic design approach and modified for my needs. To learn more about the story behind it, I would recommend reading this Medium post. The article received highly positive feedback (over 4K claps), and it was a very positive surprise since it was my first article ever. Right now, I can see that PD Kit is still getting new downloads every day.
Ant for Figma
After the release of the PD Kit, I felt the need to continue growing in the area of design systems. I liked organizing components and styles, creating patterns and guidelines. I've read a few books and dozens of articles in this field. I was also exploring various systems like Carbon, Material, Polaris, etc. I've noticed that among all systems I've researched, I really liked to go back to Ant Design System to look for inspiration in components and styles organization. It was one of the largest design systems I learned about, and it had almost every component I could use. It was so handy that I've started to move its guidelines and components to Figma someday. Day after day, component after component.
After three months of working after hours, I've managed to create over 2100 components following the Ant Design library's principles. In June 2019, I released the Ant Design System for Figma. Minding all the time spent on doing this, I've decided to make it a premium resource and sell it on Gumroad. I've noticed an opportunity to help companies kick start their large projects based on React and Figma. I wrote an article about it on Medium too. Now, Ant Design System is helping thousands of individuals and companies. I am maintaining it and providing support for people who bought it. I recently updated it with Auto Layout and Variants feature.
In 2020, I teamed up with Greg Rog from learnux.io to create my next big thing. We launched SystemFlow - a Designer-First, utility Framework for Webflow and Figma, with 1000+ CSS classes, pre-built components, layouts, and more. I was responsible for the system creation and documentation, while Greg took care of marketing, education, customer support, and the automation part. We use SystemFlow to create website projects for our clients in a swift. If you want to learn more about the project, you can visit systemflow.co and read Greg's article on Medium.
Up until now, I've built dozens of systems, including client work and side projects. If you are wondering how I'm finding the time to do freelance work and all these projects after hours, it's simple. The products I'm doing, I create for my own workflow to help me deliver client work faster.
In 2021, I released my next big project - Figmaster. Figmaster is a Figma plugin - a workbook for Figma that contains a large set of exercises on how to build your modern design system from scratch.
By doing exercises in Figma, you learn and create your guide style and component library simultaneously. It is a format that will help you get the most out of each lesson. By learning - you create, and by the way, you get to know keyboard shortcuts, plugins, and techniques of working in Figma that will speed up your workflow. Everything happens in Figma - no distractions.
In this course, you will learn how to set up all the needed design tokens, such as defining proper grids, layouts, spacing, managing icons, choosing and creating color and typographic scales. You will also learn how to make the components like buttons, inputs, modals, text areas, checkboxes, notifications, radio buttons… You will learn how to name components correctly using naming conventions and translate your components into variants. You will also learn how to improve your workflow by using handy keyboard shortcuts, plugins, and tricks. At the end of this course, you will create your own complete Design System and apply it anywhere with confidence.
In the team version, you will learn how to work on a design system in a team and how to onboard new designers with the Figmaster. I will also share resources so you can learn more about design systems theory and get inspiration from the existing systems.
We will use the full potential of Figma, making our Design System with variants and auto layout.
Stay in touch
Thanks for reading! If you are interested to learn more about my products or if you want to connect with me drop me a message via email.
If you want to get the latest news or announcements, you can subscribe to my newsletter or follow me on my social media channels: