AI Engineer - Learn how to integrate AI into software applications
Earn Your CS Degree, Tuition-Free, 100% Online!
Overview
Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Master Figma fundamentals and essential web design principles through this comprehensive 73-minute tutorial that guides you step-by-step through creating a professional website design. Begin by exploring the featured McLaren Racing website to understand design structure and visual hierarchy, then dive into setting up your starter files in Figma and learn proper typesetting techniques for web interfaces. Discover how to build effective frames and implement Figma's powerful auto-layout feature to create responsive designs that adapt to different screen sizes. Explore image integration techniques, create custom icons using shape tools, and establish consistent design systems through styles and variables. Learn advanced visual techniques including adding gradients to images, incorporating background images effectively, and designing compelling call-to-action elements like sign-up buttons. Master creating diagonal patterns and visual elements that add depth and interest to your designs. Throughout the tutorial, develop a solid understanding of core design principles including color theory, typography, layout composition, and imagery selection that will elevate your web design skills. Complete the session with a practical challenge that reinforces all learned concepts and provides hands-on experience applying Figma tools and web design principles to create professional-quality website mockups.
Syllabus
Overview of website
Set-up starter file in Figma
Typesetting
Building frames
Auto-layout
Images
Use shape tool to make icons
Styles and variables
Adding a gradient to images
Adding a new section
Background image
Sign-up button
Diagonal pattern
Challenge
Taught by
Flux Academy