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
Plugins and Widgets in Figma: Extending Functionality for Better Workflow
Plugins and widgets extend Figma's functionality, offering additional features created by the community.
- Go to the Tools bar, select Actions, then Plugins and Widgets, then search for a plugin or launch an already saved one;
- The Community section in Figma is the best way to browse plugins or explore categories;
- To install a plugin, click Open In, select your project, and save.
Examples of Plugins
- Styler: helps automate style creation. Rename layers as needed, run the plugin, and it generates grouped color styles;
- Iconify: recommended for finding and using icons);
- Typescales: it replicates typography hierarchy setup directly in Figma.
Examples of Widgets
Widgets, however, are designed for collaboration and interaction, widgets complement plugins, which are better for automation.
- Navigate: adds navigation buttons to guide teammates or clients through designs;
- Voice Memo: lets you record and attach voice notes to specific parts of your design for feedback or instructions.
To remove a plugin or widget, go to the Plugins and Widgets window, click the three dots next to the item, and select Remove.
In short, plugins make your design process faster and smarter, while widgets make collaboration and interaction smoother and more fun. Together, they're like the ultimate power-up for Figma!
Make sure to check out the community's page for more plugins and widgets. You're going to find a lot that will suit your needs!
Everything was clear?
Thanks for your feedback!
Section 3. Chapter 8
