When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

NEW Figma 2023: Beginner to Pro Class in under 4h!
Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

This Course Includes
skillshare
0 (0 reviews )
4 hours 32 mintues
english
Online - Self Paced
course
SkillShare
About NEW Figma 2023: Beginner to Pro Class in under 4h!
00 Intro Beginner+Exercise
!!! PLEASE WATCH !!! New Figma UI in beta
What Is Figma? Who does the coding?
SETUP - 01 Getting Figma Registration Process
SETUP - 02 Figma in the Browser vs
SETUP - 03 The Figma file browser – Figma's home
SETUP - 04 creating design files
DOWNLOAD working file
BASICS - 01 Adding frames to our file
BASICS - 02 A few handy shortcuts
BASICS - 03 Design file overview
BASICS - 04 Adding shapes and colours
BASICS - 05 Size menu – manipulating shapes and frames
BASICS - 06 Align, tidy up, and measure
BASICS - 07 Adding and working with text
BASICS - 08 Nesting frames – The Figma superpower
BASICS - 09 Frames vs Groups
BASICS - 10 Designing with nested frames
BASICS - 11 Re usable grids with styles
BASICS - 12 Figma community and Plugins
BASICS - 13 Adding images
BASICS - 15 Duplicating methods
BASICS - 16 Drawing in Figma
BASICS - 17 Scaling in Figma
PROJECT: Get the file!
PROJECT: Introduction
PROJECT Part 1.1: Wireframe
PROJECT Part 1.2: Design Idea
COMPONENTS - 01 Re use elements with components and instances
New Figma UI & auto layout
COMPONENTS - 02 Overriding instances
COMPONENTS - 03 What to override and what not to
COMPONENTS - 04 Reverting components and overrides
COMPONENTS - 05 Nesting components
COMPONENTS - 06 Component sets with variants
COMPONENTS - 07 Move components to their own page
COMPONENTS - 08 Keeping components organised
COMPONENTS - 09 Advanced component features introduction
PROJECT Part 2: Components
VARIABLES - 01 Introduction to variables
VARIABLES - 02 Working with colour variables
VARIABLES - 03 Organising with variable collections and groups
VARIABLES - 04 Size and spacing variables
STYLES - 05 And what about styles?
STYLES - 06 Typography and styles
VARIABLES & STYLES - 07 Documenting variables and styles
PROJECT Part 3.1: Colour Variables
PROJECT Part 3.2: Typography
RESPONSIVE - 01 What is auto layout?
New Figma UI & components
RESPONSIVE - 02 Adding auto layout
RESPONSIVE - 03 Auto layout components and variables
RESPONSIVE - 04 Responsive card with resizing
RESPONSIVE - 05 Auto or space between
RESPONSIVE - 06 Nesting auto layout with system
RESPONSIVE - 07 Absolute positioning
RESPONSIVE - 08 Auto layout pages
RESPONSIVE - 09 Constraints in Figma
RESPONSIVE - 10 Constraints and grids
RESPONSIVE - 11 Which Frame Size Should I Use?
PROJECT Part 4: Responsive
PROTOTYPING - 01 The Figma prototype workspace
PROTOTYPING - 02 Setting scroll behaviour
PROTOTYPING - 03 Connecting screens
PROTOTYPING - 04 Dropdown menu with overlays
PROTOTYPING - 05 Animation types
PROTOTYPING - 06 Interactive components
PROTOTYPING - 07 Figma Mirror – Preview on your device
SHARING - 01 Sharing and inviting others
SHARING - 02 Setting up a thumbnail
LIBRARIES - 03 Shared team libraries in Figma
LIBRARIES - 04 Setting up a shared team library
LIBRARIES - 05 Connecting to a shared team library
LIBRARIES - 06 Updating shared team libraries
SHARING - 07 Sharing design, components, styles, and variables
SHARING - 08 Dev mode Sharing with development
PROJECT Part 5: Prototyping
Thank You
What You Will Learn?
- Getting Started with Figma (3.5h).
- 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.You'll learn how to establish styles and variables for consistency, create responsive designs with auto layout, and add basic prototyping to bring your designs to life—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.
- 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.
- --> Part 2 Course Project, building an App.
- 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.
- 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?.
- Basic Prototyping.
- Prototyping in Figma.
- Setting scroll behaviour.
- Connecting screens.
- Dropdown menu with overlays.
- Animation types.
- Interactive components.
- Figma Mirror – Preview on your device.
- 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.
- © moonlearning.io with moon learning moonlearning.