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
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 1Introduction
-
About Me
-
Influences
-
-
Lesson 2Design Systems
-
Introduction to Design Systems
-
How Design Systems Can Help You Speed Up Your Workflow
-
Introduction to the Project and Approach
-
-
Lesson 3The 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 4Refining 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 5Wrapping 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 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).
Course Content
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!
Features
- English
- English, Spanish, French, Japanese, Italian, Portuguese (Machine translation)
- Beginners
- Access on mobile and Desktop
- Full time access
- Certificate of completion
-
Filip Felbar
Teacher at awwwards.com
If you have any questions about this course, please contact us
