Responsive UX/UI Design in Figma 1.5h deep dive 2024 UPDATE!

Descripción

Deep Dive: Figma Auto Layout, Constraints, Breakpoints & Modes(1.5h) NEW! Full Config 2024 Update Featuring the New Figma UI Design! Auto layout driving you crazy? Scared of what will happen with your design in the browser? Then this class is just right for you! We will learn everything about how to set up responsive designs in Figma. This is going to be a real deep dive into auto layout, constraints, and, most importantly but rarely discussed, how to deal with breakpoints for your UI design, ranging from a simple setup to a more advanced approach with variables and modes. Understanding and combining these tools will help you set up components, design patterns, and entire pages that align with code settings. With the Figma course material file, you can work alongside me or return to exercises with detailed instructions in your own time. This class is right for you if you have basic knowledge of Figma or if you are an advanced Figma user and want to brush up on your skills. Auto Layout deep dive • What is auto layout? • Setting up auto layout frames • The auto layout menu • The auto setting • Advanced auto layout menu • Resize settings • Vertical resizing tips • Ignore auto layout • Auto layout components and variables • Setting min and max values • Auto layout wrap • Fixed aspect ratio images (hack) • Learn about nesting: parent-child relationship • Suggest auto layout • Some magic with tables: auto layout and AI • More advanced setup (examples) • Auto layout pages • Auto layout and CSS flexbox • Slot components with auto layout Constraints • What are constraints in Figma? • Constraints and grids • A quick intro to grids in Figma Breakpoints & Modes • Introducing CSS breakpoints • Breakpoints in Figma • Modes and screen sizes: a quick intro • Binding variants to modes • Hide and show with booleans • Responsive typography with modes • Figma course material file

Lo que aprenderás

• Auto Layout
• Constraints
• Testing responsive components with Breakpoints
• Documenting responsive components and pages
• Absolute positioning
• Fix aspect ratio
• Auto layout resizing
• How to find the right breakpoints and translate them to Figma
• How to media queries work under the hood in CSS
• Breakpoint Plugin
• Note: We will NOT deal with coding responsive web!
• Figma working material file with plenty of exercises
• Access to the moonlearning student files library

Requisitos

• We start at 0 with responsive design, but you should have basic Figma knowledge
• You need access to a (free) Figma account