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
Layout Grids, Rows, and Columns in Figma: Structuring Your Designs
Add a Grid
Select a frame and click the plus icon in the Layout Grid section of the design panel to add a grid. By default, grids are set to a 10-pixel uniform grid.
Customize Grid Settings
- Grid Type: choose from columns, rows, or grid;
- Count/Number: adjust the number of columns or rows;
- Appearance: modify color and opacity;
- Type Settings: set columns to stretch or fix to the left, center, or right;
- Margins and Gutters: define spacing between frame edges (margins) and columns/rows (gutters).
Advanced Options
- Add multiple grids to a single frame by clicking the plus icon again.
- Modify or delete grids using the settings panel or the minus icon.
- Apply pre-set grid styles via the four-dot icon or import grids from the team library.
Using rulers and guides in Figma
Enable rulers
Rulers can be accessed through View > Rulers or by using the shortcut Shift + R. They appear on the top and left sides of the frame, with units measured in pixels.
Add Guides
To create guides, drag from the ruler and position them for alignment. Guides can be removed by dragging them back to the ruler.
Best Practices
Combine grids and guides for precision and to maintain organized layouts. Clean alignments enhance design clarity and improve the overall user experience.
Everything was clear?
Thanks for your feedback!
Section 4. Chapter 1
