Design Systems for Websites using Figma

Name: Design Systems for Websites using Figma
Author: Filip Felbar

Reviews

A course by Filip Felbar
Digital Designer

$12 $100 88% off

Buy

full creative pass

Get access to this course and over 100 more for digital designers and creative developers, all for just $12/month

Learn more

Subscribe now!

15 Day Money-Back
Guarantee

Learn how to build design systems for visually appealing websites using Figma and streamline your workflow.

Category	Course format	Language	Duration	Level
Design Systems	Online	English with Subt.	5 Hours 5 Mins	Beginners

With extensive experience across creative fields, Digital Designer Filip Felbar understands the challenges a lack of structure can bring. His approach focuses on creating clarity and accessibility, and that's where design systems play a crucial role. A design system is a comprehensive library that includes all the elements necessary for teams to efficiently plan, design, and develop a product in line with their brand. It can include everything from style guidelines to code specifications.

In this course, Filip will introduce you to design systems and show you his method for developing and adapting them. You'll also learn how to use Figma's tools to create robust digital design systems for websites. Explore global components and auto-layout features to significantly enhance your design workflow!

Course Content

Explore Every
Course Chapter

Lessons

Chapters

Duration
Lesson 1

Introduction

2

13:22 Mins

View more
- About Me
  
  05:45 Mins
- Influences
  
  07:37 Mins
Lesson 2

Design Systems

3

21:34 Mins

View more
- Introduction to Design Systems
  
  06:58 Mins
- How Design Systems Can Help You Speed Up Your Workflow
  
  08:00 Mins
- Introduction to the Project and Approach
  
  06:36 Mins
Lesson 3

The Web and System Design Process

7

1 Hour 54 Mins

View more
- Setting up the Figma File and Beginning the First Explorations 1
  
  18:40 Mins
- Setting up the Figma File and Beginning the First Explorations 2
  
  16:19 Mins
- Expanding the Explorations and Design System 1
  
  19:36 Mins
- Expanding the Explorations and Design System 2
  
  20:04 Mins
- Organizing the Design System Pages 1
  
  14:43 Mins
- Organizing the Design System Pages 2
  
  11:00 Mins
- Exploring Variants When Creating Components
  
  14:18 Mins
Lesson 4

Refining the Website and Design System

7

2 Hours 6 Mins

View more
- Refining the Design System with an Assembled Page 1
  
  20:25 Mins
- Refining the Design System with an Assembled Page 2
  
  19:59 Mins
- Refining the Design System with an Assembled Page 3
  
  15:46 Mins
- Setting up New Pages with the Complete Design System 1
  
  19:57 Mins
- Setting up New Pages with the Complete Design System 2
  
  20:09 Mins
- Setting up New Pages with the Complete Design System 3
  
  20:48 Mins
- How to Approach Creating Documentation for the Design System
  
  09:15 Mins
Lesson 5

Wrapping Up and Going Beyond Web

3

28:52 Mins

View more
- Cleaning up and Using an Auto Layout
  
  12:54 Mins
- Utilizing the Design on Further Brand Elements
  
  13:32 Mins
- Final Thoughts
  
  02:26 Mins

Meet the teacher

Filip Felbar

Digital Designer

Digital designer and front-end developer helping businesses and brands communicate with their audience in a meaningful way. I specialise in creating immersive and engaging digital experiences. Utilising a variety of tools but primarily Figma and WordPress (paired with Elementor).

Now

12$

/$100

Course Content

With extensive experience across creative fields, Digital Designer Filip Felbar understands the challenges a lack of structure can bring. His approach focuses on creating clarity and accessibility, and that's where design systems play a crucial role. A design system is a comprehensive library that includes all the elements necessary for teams to efficiently plan, design, and develop a product in line with their brand. It can include everything from style guidelines to code specifications.

In this course, Filip will introduce you to design systems and show you his method for developing and adapting them. You'll also learn how to use Figma's tools to create robust digital design systems for websites. Explore global components and auto-layout features to significantly enhance your design workflow!

Features