Coconote
AI notes
AI voice & video notes
Export note
Try for free
How to Use Figma
Jul 24, 2024
How to Use Figma
Introduction
Presenter
: Kevin
Topic
: How to use Figma
Purpose
: Create, prototype, and collaborate on interface designs for free.
Personal Experience
: Used at Microsoft for software product designs.
Overview
Getting Figma
Starting a project
Adding Frames
Creating and editing shapes
Adding and formatting text
Placing images and masks
Working with layers
Adding components and constraints
Making a prototype
Previewing and sharing designs
Getting Started with Figma
Website Links
: Available in the video's description for setting up an account.
First Run Flow
:
Name Setup
: Enter your name for collaboration visibility.
Work Description
: Specify your type of work and collaborator type (e.g., freelancer, teammates).
Invitation
: Option to invite collaborators at this stage or later.
Purpose Selection
: Specify the reason for using Figma (e.g., just for fun, professional use).
Plan Selection
: Starter (free) or Professional plan.
Product Selection
: Figma (designing/prototyping) and FigJam (whiteboarding).
File Browser
Main Landing Page
: Recent files view, ability to filter and adjust views.
Drafts
: Personal sketches and ideas, view-only for others.
Teams and Projects
:
Creating Teams
: Invite members, create projects.
Organizing Files
: Moving files between drafts and projects.
Adding New Files
: Design or FigJam files.
Favorite Files
: Mark and access frequently used files.
Starting a New Design
Frames
:
Insertion
: Use Frame tool (shortcut 'F') or select default device sizes.
Dimensions
: Adjust dimensions manually or using preset dimensions.
Frame Management
: Renaming layers, adding additional frames, panning, and zooming.
Layers
:
Naming and Organizing
: Rename layers to relevant content.
Pages
: Creating and naming pages for different device types.
Editing Frames and Shapes
Background
: Set fill properties (color, gradient, image, video).
Images
: Insert shapes (e.g., rectangles), use as masks for images.
Adjustments
: Use design properties (e.g., dimensions, stroke, effects).
Navigation Bars
: Adding frames and shapes, drafting navigation elements.
Adding Text and Icons
Text Tool
: Insert text (shortcut 'T'), adjust properties (font size, alignment).
Icons
: Use shapes and pen tools to create icons (e.g., home, location pin).
Importing Icons
: Use community assets and templates (e.g., Iconamoon).
Components and Constraints
Creating Components
:
Turning Frames
into reusable components.
Local Components
: Drag and use in projects, changes in main components reflect everywhere.
Constraints
:
Setting Constraints
: Define how layers resize with the frame.
Locking Positions
: Positioning objects (e.g., navigation bars) on different screen sizes.
Designing the App UI
Home Screen
:
Background and Logo
: Adding and positioning image background and logo.
Styling
: Darken images, add text with design properties.
Location Screen
:
Repeating Elements
: Using components for location cards.
Updating Styles
: Reflect changes across all instances.
Cart Screen
: Add cart title, maintain consistency using styles.
Prototyping and Sharing
Creating Prototypes
:
Define Flows
: Set starting points and navigation actions.
Animations
: Define transitions between screens.
Testing Prototypes
: Preview functionalities, get feedback.
Feedback and Comments
: Add comments, collaborate using feedback.
Exporting Designs
: Options to export views and share with team.
Conclusion
Figma is a robust tool for design and collaboration, ideal for app and website development.
Encourages viewers to subscribe for more tutorials.
📄
Full transcript