Contenuti del Corso
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?
Tutto è chiaro?
Grazie per i tuoi commenti!
Sezione 1. Capitolo 3