Introduction to Design Systems with Figma

Introduction to Design Systems with Figma

“Dear student, we have reached the end of the course. Now you know what design systems . You have also learned a bit about their history, the parts that compose them and what benefits they can bring to your designs, products and work teams. We first defined the design principles that would be our basic "philosophy" and, once we were clear, we went to Figma and inspected the style guide to understand how to create the text and color styles, analyzing the scales for mobile and desk.

Then we design the elements and components that would be the backbone of everything we would do later: icons, buttons, card , item, dialog, among others. In addition to this, we also saw what patterns or patterns are, and what is the use of having them documented. Anyway, we saw everything you need so that you can have a scalable, consistent, coherent design system to unify the appearance and behavior of your interface designs. Once we had a very solid foundation, it was time to put the components to the test by designing the main screen of a travel website in three different sizes. This gave us a more realistic idea of how well prepared the components and styles are to respond to different situations. In the last part you have learned why an design system never ends, and therefore how it is necessary to document it so that the other members of your team know how to use it. To do this we use Zeroheight, the tool that has allowed us to have everything documented in one place. Remember that an design system is a team effort that involves many people, but you can always start with a good base with what we have done in the course so that later it is easier to continue growing. Share in the forum both the final result of your design system project and the steps that have led you to it. You can also think of other design principles, components or patterns that are different from the ones we have mentioned, and that better suit what you specifically need. Then, you can prepare and adapt them following the same guidelines and recommendations that we have seen in the course. Feel free to contact me if you have any doubts, questions, or comments. I will be happy to help you as much as I can so that the contents are useful and have value for your particular case. Keep in touch! ”

Partial transcription of the video

“Final project We come to the end of this Domestika course, and I trust I have taught you what you need to create an organized, scalable, coherent and consistent project using reusable components. Course concepts are for the web, but they can be used for mobile applications. I would love to see your results and comment on them in the Forum. Before saying goodbye, I will make a summary of the steps that I followed to design your final project. We saw what "design systems" are and the benefits of using them for you, your team and the product. Then we looked at the component parts. We understoo...”

This transcript is automatically generated, so it may contain mistakes.

Course summary for: Introduction to Design Systems with Figma

• Level: Beginner
• 99% positive reviews (424)
• 11739 students
• 5 units
• 24 lessons (4h 38m)
• 11 downloads

• Category

  Web & App Design

• Software

  Figma

• Areas

  App Design, Digital Product Design, Mobile Design, UX / UI