UI/UX Crash Course with Figma

Learn to design a responsive marketing landing page from scratch using Figma. This course covers the interface, design principles like visual hierarchy and spacing, component architecture, auto layout, and interactive prototyping.

Coursified Library ↗

source: DesignCourse

Outline · 13 modules · quiz after each

01Introduction, Setup & AssetsCreate a Figma account and navigate the desktop app or browser interface3 min

02Frames, Canvas Dimensions & ToolsCreate a new page and use the Frame tool to define the design area3 min

03Hero Setup & Color StylesConstruct a Hero section using a background rectangle4 min

04Layout Grids & AlignmentImplement a layout grid with margins to define content boundaries3 min

05Typography, Hierarchy & SpacingSelect appropriate fonts (e.g., Manrope) and set weights6 min

06Components, Variants & Auto LayoutConvert elements into Components for reusability8 min

07Header Call-to-Action ButtonDesign a primary button with a fill color and rounded corners3 min

08Prototyping InteractionsCreate hover state variants (e.g., outlined vs. filled) for buttons3 min

09Responsive Header ComponentGroup navigation and CTA elements into a single Header component3 min

10Hero Content & Visual HierarchyCreate a large headline using a distinct font (e.g., Console Laws) to establish hierarchy5 min

11Background Images & ContrastPlace background images behind content using layer ordering (bracket keys)4 min

12Testimonials & Trust SignalsDesign a testimonial section with appropriate typographic hierarchy6 min

13Card Design & Auto LayoutsConstruct a feature card using a title, description, and container frame3 min

clones

learner

New

no ratings yet

modules

Cloning copies the outline, quizzes and assessment into your account. The video stays on YouTube; attribution to Coursified Library stays on the course.

Details

Duration1h 05m

Assessment26 questions · pass 70%

Quiz questions184

LanguageEnglish

CertificateYes · verifiable

NewNo ratings yet