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
Project Setup in Figma
Renaming projects
Double-click the project name at the top to rename it. Press Enter/Return to save changes.
Key interface components
-
Pages and layers: located on the left, these are used to organize content;
-
Design panel: found on the right, this panel contains settings for design, prototyping, and animation workflows;
-
Toolbar: Positioned below the canvas, this section includes tools that will be discussed in the next chapter.
Drop-down menu
Accessible via an arrow icon, this menu includes:
- New window: opens a separate Figma window;
- New tab: similar to the "Create New" button;
- Open in browser: view the project in a browser;
- Open file from clipboard: paste and open files directly;
- Close/reopen tabs: manage Figma tabs and windows;
- Plugins and interface scale: adjust scale (e.g., 110%) or manage plugins;
- Preferences: access settings, help guides, updates, and "About Figma".
Minimize UI Icon
Toggles visibility of the left and right panels.
Search Icon
Quickly find assets or components within a project.
Presentation Mode
- Use the Present icon to display frames in device mockups (e.g., iPhone, MacBook);
- Change the device or toggle the mockup frame on/off;
- Enter full-screen mode via a button in the top-right corner.
Sharing Options
- Use the Share button to share files via links, email invitations, or by copying developer/prototype links;
- Set permissions (view/edit) and access options to publish to the community or get embed code.
File Management
Search and filter projects by:
- File Type: design files, FigJam boards, slides;
- Creator, organization, or folder.
Display Options
- Choose between grid/thumbnail view or list view;
- Sorting by name, creation date (oldest/newest).
1. What additional feature does the desktop version of Figma offer compared to the browser version?
2. In Presentation Mode, what does the "Show Device Frame" option do?
Everything was clear?
Thanks for your feedback!
Section 1. Chapter 3