Create a Design System from scratch in Figma – Bruno Saez

Create a Design System from scratch in Figma Information

Design Systems are becoming so popular because they make products more consistent, improve their usability, and reduce the design decision making. That’s great! But do you know how to build one? In this course you will learn what a Design System is and why matters, but most importantly, you will learn to create one from scratch in Figma.

In this course you will see how to set up all the needed design tokens, for instance how to define proper grids, layouts and spacing, manage icons and illustrations, choose and create color and typographic scales, and finally how to create the most-used components like buttons, inputs, text areas, checkboxes, radio buttons… We will see, as well, how to name components correctly using naming conventions to get you started. Finally, we will see how to use the Design System and how to apply it to your projects or even your company.

At the end of this course you will be able to create your own full Design System and apply it anywhere with confidence.

Although for this course we will be working with Figma, the process I am going to explain here it’s replicable in other software like Sketch or Adobe XD so if you don’t use Figma, don’t worry, you are more than welcome too and you can learn a new tool on the way. We will be using the full potential of Figma making our Design System with variants and autolayout.

I am Bruno Sáez, UX Designer and Design System manager currently working for a Big Data and Artificial Intelligence company.

So if you really want to learn how to create a Design System from scratch, this is the course for you.

Here’s what you’ll learn:

• Lesson 1: Welcome
• Lesson 2: Starting your Design System
• Lesson 3: Components
• Lesson 4: Templates & Documentation
• Lesson 5: Using your Design System
• Lesson 6: Conclusion

About Author

I am Bruno, UX designer with more than 20 years of experience based in Madrid. Since i was a kid i like painting and drawing. After becoming a journalist i started to work for different media companies as designer and consultant. After more than ten years working as Chief Design Editor at MARCA i decided to move and keep learning things.

I currently work in Stratio BD, where I help to think, define and design Big Data, Machine learning and AI software. I try to make things easier for the users in this complex world. Besides my work on the AI and ML module i manage the Stratio Design System. Working at Stratio had given me the opportunity to work on other great and challenging projects like Sanitas HCIS software for controlling all the hospitals amenities and their scheduling system, El Corte Inglés search with AI recommendations engine among others.

I also teach at UNIR (univerity of La Rioja) in the ‘User Experience Master Degree’ where i try to engage the students into design in the Design fundamentals and prototyping tools subject. Here we learn about design fundamentals, creating design systems and interaction.

But overall i like to spend my spare time going to the mountains, playing guitar, taking photos, observing bad interfaces to make them better and making typefaces like Regattia, my latest realease.

More courses from the same author: Bruno Saez

Salepage: Create a Design System from scratch in Figma – Bruno Saez

When will I receive my course?

You will receive a link to download your course immediately or within 1 to 21 days. It depends on the product you buy, so please read the short description of the product carefully before making a purchase.

How is my course delivered?

We share courses through Google Drive, so once your order is complete, you'll receive an invitation to view the course in your email.

To avoid any delay in delivery, please provide a Google mail and enter your email address correctly in the Checkout Page.

In case you submit a wrong email address, please contact us to resend the course to the correct email.

How do I check status of my order?

Please log in to iDesignCourse account then go to Order Page. You will find all your orders includes number, date, status and total price.

If the status is Processing: Your course is being uploaded. Please be patient and wait for us to complete your order. If your order has multiple courses and one of them has not been updated with the download link, the status of the order is also Processing.

If the status is Completed: Your course is ready for immediate download. Click "VIEW" to view details and download the course.

Where can I find my course?

Once your order is complete, a link to download the course will automatically be sent to your email.

You can also get the download link by logging into your iDesignCourse account then going to Downloads Page.