Design System from Scratch in Figma

Figma零基础搭建设计系统

学习如何从零开始在Figma中创建可复用的UI设计系统，涵盖视觉规范、组件构建、模式组合及完整页面设计，让设计更高效、一致且智能。中高级课程，3小时37分钟。

Published 5/2026
Created by Georgiana Dumitru
MP4 | Video: h264, 1920×1080 | Audio: AAC, 44.1 KHz, 2 Ch
Level: Intermediate | Genre: eLearning | Language: English | Duration: 26 Lectures ( 3h 37m ) | Size: 2.4 GB

Learn how to create reusable UI systems that make design faster, smarter, and more consistent.

What you’ll learn
⚡ Understand design systems – Grasp the purpose, benefits, and core principles behind scalable and consistent UI systems.
⚡ Create visual guidelines – Define typography, color palettes, spacing, icons, and illustration rules for a cohesive look and feel.
⚡ Build reusable components – Design buttons, inputs, forms, navigation elements, and other UI components that can be used across projects.
⚡ Combine components into patterns – Construct practical UI patterns such as sign-up forms, checkout flows, product cards, modals, and navigation bars.
⚡ Design complete screens – Apply your system to real screens, including product pages, sign-up flows, and other.
⚡ Practical exercises and homework to create your own digital design system from scratch.

Requirements
❗ To get the most out of this course, you should have a basic understanding of UI/UX design principles and be comfortable working in Figma. You don’t need to be an expert — a beginner or intermediate level is perfectly fine — but knowing how to navigate Figma and having some familiarity with designing digital interfaces will help you follow along more easily and complete the exercises with confidence.

Description
Hi there everybody,

This course will guide you step by step through the complete process of building a digital design system from scratch.

You’ll start by learning the core foundations and guidelines of a design system, including typography, colors, spacing, icons, and illustration rules. Then, you’ll move into creating reusable UI components such as buttons, inputs, forms, and navigation elements.

As the course progresses, you’ll learn how to combine those components into real design patterns like sign-up forms, checkout flows, product cards, modals, and bottom navigation bars. Finally, you’ll apply everything by designing complete screens and interfaces used in real digital products.

Each section includes practical exercises and homework assignments, allowing you to build your own design system while learning. By the end of the course, you’ll have both the knowledge and the hands-on experience needed to create organized, scalable, and UI systems for your own projects or clients.

Whether you are a beginner designer or already working on digital products, this course will help you improve your workflow, think more systematically, and create interfaces that feel consistent, polished, and easier to scale across different platforms and future projects with confidence.

Have fun and enjoy the process.

Thank you!

Georgiana