Description
Getting Started with Figma + Optional Course Project and Figma file
A beginner’s course in UX/UI design with Figma
This course is a comprehensive introduction to Figma from absolute Figma beginner to advanced features. Short and focused, providing you with all you need to know to tackle any design.
We’ll start from scratch by setting up your Figma account and familiarising ourselves with its file structure. Then, we’ll dive into the fundamentals of Figma, such as setting up frames and nesting them, adding shapes, text, colours, and grids, and creating solid UI designs. Once you’re comfortable with the basics, we dive into more advanced subjects like creating solid UI designs and working with components for reusable elements.
We will add styles and variables for consistency, create responsive designs with auto layout, and add basic prototyping to bring our designs alive, always keeping collaboration with development in mind.
With step-by-step exercises and valuable tips and tricks, you’ll become proficient in Figma in under 4 hours. It’s perfect for beginners or those switching from other design software like Sketch or Adobe XD to Figma.
Getting Started
1. Getting Figma – Registration Process
2. Figma in the Browser vs. Figma App
3. The Figma file browser – Figma’s home
4. Creating design files in Figma
Figma Basics
Adding frames to our file
A few handy shortcuts
Design file overview
Adding shapes and colour
Size menu – manipulating shapes and frames
Align, tidy up, and measure
Adding and working with text
Nesting frames – The Figma superpower
Frames vs Groups
Designing with nested frames
Re-usable grids with styles
Figma Community and Plugins
Adding images
Drawing in Figma
Scaling in Figma
Optional Course Project Part 1: Building a wireframe and design
Introducing Components
Re-use elements with components and instances
Overriding instances
What to override and what not to
Reverting components and overrides
Nest components
Component sets with variants
Move components to their own page
Keeping components organised
Advanced component features introduction
Optional Course Project Part 2: Turning our design into a component-based design
Variables and Styles
Introduction to variables
Working with colour variables
Organising with variable collections and groups
Size and spacing variables
And what about styles?
Typography and styles
Documenting variables and styles
Optional Course Project Part 3: Adding variables and styles to our app
Responsive Design
What is auto layout?
Adding auto layout
Auto layout components and variables
Resize settings
Auto or space between
Nesting auto layout with system
Absolute positioning
Auto layout pages
Constraints in Figma
Constraints and grids
Which frame size should I use?
Optional Course Project Part 4: Making our app responsive
Basic Prototyping
Prototyping in Figma
Setting scroll behaviour
Connecting screens
Dropdown menu with overlays
Animation types
Interactive components
Figma Mirror – Preview on your device
Optional Course Project Part 5: Bring our design alive with prototyping
Sharing with other designers and developers
Sharing and inviting others
Setting up a thumbnail
Shared team libraries in Figma
Setting up a shared team library
Connecting to a shared team library
Updating shared team libraries
Sharing design, components, styles, and variables
Dev mode: Sharing with development
Utilize Figma to enhance your prospects in UI Design, User Interface, User Experience Design, UX Design, and Web Design, facilitating your path to secure a job working with UX/UI Design in Figma
This is an original course by moonlearning
À qui ce cours s’adresse-t-il ?
Total Beginners!
Switching over from another Design Software to Figma (e.g Sketch or Adobe XD)
Afficher plus
