Complete Beginner’s Guide to Figma — From the Basics of UI Design to Figma AI Automation

This course is a 26-session, approximately 13-hour hands-on course for those opening Figma for the first time, covering everything from the fundamentals of UI design to the latest AI automation features. Figma has now become an essential tool for UI design, but with so many features, it can be overwhelming to know where to start. In particular, if you do not properly understand concepts like Auto Layout and Components, you will keep taking workarounds and ultimately remain stuck manually moving shapes one by one. This course builds up these concepts step by step through examples. The first part covers the interface, vector tools, and graphic styles. Once you learn how to work with shapes and paths and register color and text styles as a system, your workflow speed will change. You will then learn the principles of automatically arranging elements with Auto Layout. The middle section focuses on Components and Variants. You will practice creating a single button, managing its different states, and building a structure that can be reused across multiple screens. In the responsive layout sessions, you will learn to design UIs that do not break when the screen size changes and extend them to mobile layouts. The final six sessions are what set this course apart. You will learn how to import existing web pages into Figma using the 'html . to . design' plugin, turn designs into actual web pages with Figma Site, and generate code by entering prompts with Figma Make. The latest Figma AI features are also covered. You can follow along even if you did not major in design or have never used graphic tools before. By the end of the course, you will be able to design web and mobile UIs yourself and reduce your working time with AI features.