Welcome to the "Building Design System in Figma from Scratch – UI UX Mastery" course, where you'll master creating design systems for outstanding user interfaces. This comprehensive program covers design system fundamentals, hierarchy, typography, spacing, and more in Figma. By course end, you'll create robust design systems from scratch using Figma, elevating your UI/UX design expertise. Join us on this journey to become a UI/UX design master.
What Will You Learn?
- Understand the benefits and outputs of design systems.
- Create a purpose statement for your design system.
- Define design principles and hierarchy of components.
- Implement typography, spacing, color, and grid systems.
- Develop reusable styles and components in Figma.
Who Should Take The Course?
- UI/UX designers and developers looking to enhance design consistency.
- Professionals aiming to create efficient and organized design systems.
- Anyone interested in mastering Figma for UI/UX design.
Requirements
- Basic familiarity with Figma or other design tools is helpful but not required.
- A computer with Figma installed for hands-on practice.
Course Curriculum
-
- Introduction to Design Systems, benefits and outputs of Design System 00:11:00
- What is Purpose Statement in Design System 00:03:00
- Design Principles and how to come up with them 00:05:00
- 7 Steps to Building your Design System 00:06:00
- How to Audit User Interface Building a UI Inventory 00:04:00
- What are good Components in a Design System 00:10:00
- Hierarchy of Components in Design System 00:08:00
- Design Tokens, roles and their values in Design System 00:06:00
- Typography in your Design System 00:03:00
- Spacing System Vertical and Horizontal 00:05:00
- Color System and what you need to do about it 00:06:00
- Grid System and Layout – What’s the difference with examples 00:04:00
- How theming works and the level of theming in your Design System 00:05:00
- Typography System – Typography Scale and Type Styles 02 00:10:00
- Color System – Create Color Scales and Styles to reuse in Figma 01 00:15:00
- Color System – Create Color Scales and Styles to reuse in Figma 02 00:13:00
- Buttons and Icons – How to Swap Icons inside button components 01 00:22:00
- Creating bigger Typography Components 00:09:00
- Using Icons in Form Input Fields 01 00:08:00
- Using Icons in Form Input Fields 02 00:10:00
- Creating Bigger Components in Figma 01 00:27:00
- Creating bigger components in Figma 02 00:16:00
- Building Spacing System in Figma 01 00:11:00
- Building Spacing System in Figma 02 00:10:00
- Navigation, links and linking pages in Figma 00:08:00
- Buttons and Icons – How to Swap Icons inside button components 02 00:18:00
- Define your Grid System in Figma 00:04:00
-
- Order Certificate 00:05:00
New Courses
Blogs
Jul'23
ADHD Training for Teachers: Empowering Educators to Support Students with Attention Challenges
Relationships may be severely harmed by narcissistic behaviours, leaving emotional scars and...
Jul'23
Narcissistic Behaviour and Relationships: Understanding the Impact and Finding Healing
Relationships may be severely harmed by narcissistic behaviours, leaving emotional...
Jul'23
Childhood Trauma in Adults
What Is Childhood Trauma? Childhood trauma refers to distressing or...
Jul'23
Creating A Social Media Strategy
Set Clear Objectives:The first step in developing a successful social media...
Jul'23
Neuro-Linguistic Programming Techniques
Neuro-Linguistic Programming (NLP) is a fascinating and widely acclaimed approach...
Jul'23
Acceptance and Commitment Therapy in the UK
What is acceptance and commitment therapy? Acceptance and Commitment Therapy...
