Summary
Keywords
Full Transcript
Learn UI/UX Design Like a Pro — 95% OFF (Limited Time!) Enroll in the Complete UI/UX Design Course (Figma + AI + Real Projects) https://www.udemy.com/course/complete-uiux-design-course-figma-ai-real-project/?referralCode=1AC2CAE903AE3CF207C9 Free UI/UX Design Course for Beginners → https://youtu.be/6KKgvvlXCjo?si=8bo6QrVDjOGW5dRL Welcome back to UI/UX Masterclass 2025! In this lesson we build a production-ready Settings screen in Figma — including consistent back-buttons, headings, settings rows, and a reusable toggle component (on/off states). We also cover how to add text and color styles, name layers, and keep your UI system tidy and scalable. What you’ll learn in this video: Create a consistent Settings screen layout with Auto Layout and spacing. Build and save Text Styles (caps/subtext/title) and Color Styles (primary, gray, white). Design a pixel-perfect toggle (on/off) component with variants and properties. Replace icons with plugin icons and match icon families for consistency. Organize rows (dark mode, notifications, sound, learning goals) with proper padding and alignment. Tips for rounding, strokes, shadows, and naming for a developer-ready handoff. Why this matters: Proper styles + components speed up your workflow, prevent visual inconsistencies, and make prototypes investor- and developer-ready. Part of the Become a UI/UX Designer in 2025 Masterclass — full project course (optional): https://www.udemy.com/course/complete-uiux-design-course-figma-ai-real-project/?referralCode=1AC2CAE903AE3CF207C9 Let’s Connect: Instagram → https://www.instagram.com/welldux_official/ LinkedIn → https://www.linkedin.com/company/88064389/ Dribbble → https://dribbble.com/welldux Behance → https://www.behance.net/welldux X (Twitter) → https://x.com/welldux Website → https://welldux.com/ Let’s build your design career together. Ignore for SEO Tags ux design process explained ux design process ux design process step by step what is ux design process ux design ux design tutorial ux design tutorial for beginners learn ux design what is ux design what is ux design and ui design design ux design sprint ux designer ux designer career ux for beginners product design user interface design web design tutorial what is ux what is ux? user experience user experience designer what is user experience uiux design ui ux design course ui design ux design ui ux design full course for beginners ui design course ui ux design beginner course figma tutorial figma ui design ux design ui ux design ui ux tutorial figma for beginners ui design tutorial ux design for beginners learn figma learn ui ux design figma ui ux course daily ui challenge ui ux full course figma app design ui design figma user experience design product design ux design process ux design steps figma components figma prototype tutorial ui ux freelancer figma portfolio project figma design system ux design sprint web design tutorial figma 2025 tutorial figma 2026 tutorial #figma #uiuxdesign #SettingsScreen #ToggleComponent #designsystem #TextStyles #ColorStyles #figmatutorial #autolayout #prototyping #uiuxmasterclass #learnfigma #figma2025 #WellduxDesign
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
