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!
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
