No products in the basket.
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.
Course Price:
Original price was: £194.00.£19.99Current price is: £19.99.
Course Duration:
4 hours, 22 minutes
Total Lectures:
28
Total Students:
363
Average Rating:
5
Welcome to the "Building Design System in Figma from Scratch – UI UX Mastery" course, your gateway to mastering the art of creating design systems for exceptional user interfaces. This comprehensive program covers the entire spectrum of design systems, from understanding their benefits and outputs to practical implementation in Figma.
Explore the fundamentals of design systems, including the purpose statement and design principles. Follow the seven steps to build your design system, starting with auditing your user interface and identifying good components. Learn about the hierarchy of components, design tokens, and roles, along with their values. Delve into typography, spacing, color systems, and grids, understanding their critical roles in design consistency. Explore theming and its levels, typography scales, type styles, and creating reusable color scales and styles in Figma.
Master the art of crafting buttons, icons, and larger components while discovering how to effectively use icons in form input fields. Build a comprehensive spacing system and navigate the intricacies of navigation, links, and page linking in Figma. By course end, you'll have the knowledge and skills to create robust design systems from scratch using Figma, enhancing 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
20
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...
20
Jul'23
Narcissistic Behaviour and Relationships: Understanding the Impact and Finding Healing
Relationships may be severely harmed by narcissistic behaviours, leaving emotional...
20
Jul'23
Childhood Trauma in Adults
What Is Childhood Trauma? Childhood trauma refers to distressing or...
20
Jul'23
Creating A Social Media Strategy
Set Clear Objectives:The first step in developing a successful social media...
20
Jul'23
Neuro-Linguistic Programming Techniques
Neuro-Linguistic Programming (NLP) is a fascinating and widely acclaimed approach...
19
Jul'23
Acceptance and Commitment Therapy in the UK
What is acceptance and commitment therapy? Acceptance and Commitment Therapy...