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.

SkillShare logo

NEW Figma 2023: Beginner to Pro Class in under 4h!

Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

     0 |
  • Reviews ( 0 )
Free

This Course Includes

  • iconskillshare
  • icon0 (0 reviews )
  • icon4 hours 32 mintues
  • iconenglish
  • iconOnline - Self Paced
  • iconcourse
  • iconSkillShare

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.