Overview
Learn how to design a responsive website in Figma with this comprehensive beginner tutorial from Flux Academy. Transform a rough sketch into a beautiful design for both desktop and mobile devices in this 1 hour 44 minute crash course. No prior knowledge is required as the tutorial covers working with text, shapes, images, masking, gradients, effects, auto layout, components, and prototyping. Before starting, install the recommended fonts (Instrument Serif and Jost) and duplicate the Figma starter file to follow along. The tutorial is organized into chapters covering getting started, reviewing assets, creating desktop frames, working with images and text, using plugins, implementing auto layout, designing buttons with prototyping functionality, and creating a mobile version of the design.
Syllabus
0:00 How to get started
3:34 Reviewing provided assets
6:03 Desktop frame
7:20 Images
11:20 Text
37:38 Plugins
40:50 Auto layout
58:34 Button design and prototyping
1:35:20 Mobile version
Taught by
Flux Academy