New season, New skills! All Courses at $9.99

Design Systems for Websites using Figma

  • Language: English
  • Certificate: of completion
  • Subtitles: English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Duration: 5 Hours 5 Mins
Now
9.99$
/$100

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

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

Having worked across creative fields, Digital Designer Filip Felbar knows how a lack of structure can cause problems. His process is dedicated to structure and making things easier and more accessible. That’s where design systems come in. A design system is a collective library that puts together all elements needed for a team to plan, realize and develop a product efficiently and in line with their brand. It can feature everything from style guidelines to coding information.

In this online course, Filip shares with you what design systems are and his approach to developing and recycling them. Also learn to navigate Figma’s tools effectively to create digital design systems for websites. Explore global components and auto layout to speed up your process!

Modules

What you will learn
in this course.

  • Lessons
  • Lesson 1
    Introduction
    • About Me
    • Influences
  • Lesson 2
    Design Systems
    • Introduction to Design Systems
    • How Design Systems Can Help You Speed Up Your Workflow
    • Introduction to the Project and Approach
  • Lesson 3
    The Web and System Design Process
    • Setting up the Figma File and Beginning the First Explorations 1
    • Setting up the Figma File and Beginning the First Explorations 2
    • Expanding the Explorations and Design System 1
    • Expanding the Explorations and Design System 2
    • Organizing the Design System Pages 1
    • Organizing the Design System Pages 2
    • Exploring Variants When Creating Components
  • Lesson 4
    Refining the Website and Design System
    • Refining the Design System with an Assembled Page 1
    • Refining the Design System with an Assembled Page 2
    • Refining the Design System with an Assembled Page 3
    • Setting up New Pages with the Complete Design System 1
    • Setting up New Pages with the Complete Design System 2
    • Setting up New Pages with the Complete Design System 3
    • How to Approach Creating Documentation for the Design System
  • Lesson 5
    Wrapping Up and Going Beyond Web
    • Cleaning up and Using an Auto Layout
    • Utilizing the Design on Further Brand Elements
    • Final Thoughts

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
9.99$
/$100

Course Content

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

Features

  • English
  • English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
  • Beginners
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion

If you have any questions about this course, please contact us

Start the course and upskill your professional toolkit.

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses