Course Content
UI/UX Design with Figma
UI/UX Design with Figma
2. Creating and Organizing Objects in Figma
Layers in Figma: Organizing and Managing Your Design ElementsUsing Groups in Figma: Structuring and Nesting Objects EfficientlyShapes in Figma: Creating and Customizing Design ElementsAlignment of Objects in Figma: Precision and Layout OptimizationPen Tool in Figma: Creating Custom Shapes and Vector GraphicsFigma Version History: How to Track and Restore ChangesType Tool in Figma: Adding and Styling Text for UI/UX DesignFonts in Figma: Choosing and Applying Typography EffectivelyTypographic Hierarchy in Figma: Enhancing Readability and UI Design
3. Creating Visuals in Figma
Placing Photos and Videos in Figma: Enhancing Your Designs with MediaUsing Masks in Figma: Clipping and Layering for Advanced VisualsBlend Modes in Figma: Creating Stunning Effects and OverlaysColor and Gradient Fill in Figma: Mastering Palettes for UI/UX DesignButtons and Auto Layout in Figma: Streamlining Interactive ElementsFigma Components: Building Reusable Design Systems EfficientlyStyles in Figma: Creating Consistent Design Systems for UI/UXPlugins and Widgets in Figma: Extending Functionality for Better Workflow
4. Mastering Prototyping in Figma
Layout Grids, Rows, and Columns in Figma: Structuring Your DesignsGrid Theory in Figma: Designing for Precision and ConsistencyFrames vs. Groups in Figma: Choosing the Right StructureConstraints in Figma: Responsive Design Made EasyPrototyping Basics in Figma: Creating Interactive User FlowsVariants in Figma: Streamlining UI Components for EfficiencyComponent Properties in Figma: Enhancing Reusable Design ElementsPractice: Creating Different Buttons in Figma
5. Submitting Work: from Wireframe to Showcase
Wireframing in Figma: Laying the Foundation for a Great UIAnimating UI in Figma: Bringing Designs to LifeDesigning a Mobile App in Figma: From Concept to PrototypeFinalizing the Design: Polishing Your UI for Development HandoffTesting Your App Design: Ensuring a Seamless User ExperienceShowcasing Your Work: Presenting Your Figma Projects
Alignment of Objects in Figma: Precision and Layout Optimization
- The Alignment settings are found in the Design panel under the Position section;
- For a single object, alignment is relative to the frame;
- For multiple objects, alignment is relative to each other unless grouped;
- To align multiple objects across a frame, group the objects first, as groups behave like a single object, making alignment relative to the entire frame.
Everything was clear?
Thanks for your feedback!
SectionΒ 2. ChapterΒ 4
