Figma is a superb vector-based tool for interface design. As part of its suite of functionality it includes a “styles” system, whereby various colors, gradients, strokes, shadows, and so on can be saved and reused.
In this course, we’ll be creating a simple website design, and we’ll use Figma’s styles system to make it themeable into multiple different-colored versions.
Let’s begin!
Learn Figma
We've built a complete guide to help you learn figma design, whether you're brand new to Figma's design tools, or you want to take your skills to the next level.
1.Introduction
1.1Welcome to the Course00:37
1.1
Welcome to the Course
00:37
2.Create the Main Design
2.1Set Up the Layout and Backgrounds20:54
2.1
Set Up the Layout and Backgrounds
20:54
2.2Add the Site Title and Menu06:42
2.2
Add the Site Title and Menu
06:42
2.3Add the Top Section Text and Button08:58
2.3
Add the Top Section Text and Button
08:58
2.4Create Feature Icon and Text07:06
2.4
Create Feature Icon and Text
07:06
2.5Duplicate Features and Add the Final Button04:40
2.5
Duplicate Features and Add the Final Button
04:40
3.Create Additional Themes
3.1Create Document Styles11:03
3.1
Create Document Styles
11:03
3.2Recolor Backgrounds04:37
3.2
Recolor Backgrounds
04:37
3.3Recolor the Title and Solid Button03:41
3.3
Recolor the Title and Solid Button
03:41
3.4Recolor the Icons and Hollow Button02:33
3.4
Recolor the Icons and Hollow Button
02:33
3.5Demo and Quick Notes on Additional Themes06:27
3.5
Demo and Quick Notes on Additional Themes
06:27
4.Conclusion
4.1Wrapping Up04:11
4.1
Wrapping Up
04:11
