NEW Figma 2024: Getting started the Beginner to Pro Class
- Offered byUDEMY
NEW Figma 2024: Getting started the Beginner to Pro Class at UDEMY Overview
Duration | 5 hours |
Total fee | ₹399 |
Mode of learning | Online |
Difficulty level | Beginner |
Official Website | Go to Website  |
Credential | Certificate |
NEW Figma 2024: Getting started the Beginner to Pro Class at UDEMY Highlights
- 30-Day Money-Back Guarantee
- Certificate of completion
- Full lifetime access
- Learn from 2 articles
NEW Figma 2024: Getting started the Beginner to Pro Class at UDEMY Course details
- Setup your own free Figma account!
- Setting up UI Designs with Figma
- Setup a complete User Interface Design with Figma
- Share your work with other Designers and Developers
- Make your Designs Shine in Presentation Mode
- Basic Prototyping with Figma
- Creating reusable elements with components
- Advanced component sets with variants
- Understanding variables and styles
- Keeping up to date with latest releases
- Share and document your design with development
- Create shared team libraries
- Creating simple style guides for colour, typography and spacing
- Creat simple micro interactions for buttons and hover
- Work as a team
- Freebees to be used right away in your designs
- Figma exercise files so you can work alongside me
- Getting Started with Figma + Optional Course Project and Figma fileA 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 Started1. Getting Figma - Registration Process2. Figma in the Browser vs. Figma App3. The Figma file browser – Figma's home4. Creating design files in FigmaFigma BasicsAdding frames to our fileA few handy shortcutsDesign file overviewAdding shapes and colourSize menu manipulating shapes and framesAlign, tidy up, and measureAdding and working with textNesting frames The Figma superpowerFrames vs GroupsDesigning with nested framesRe-usable grids with stylesFigma Community and PluginsAdding imagesDrawing in FigmaScaling in FigmaOptional Course Project Part 1: Building a wireframe and design Introducing ComponentsRe-use elements with components and instancesOverriding instancesWhat to override and what not toReverting components and overridesNest componentsComponent sets with variantsMove components to their own pageKeeping components organisedAdvanced component features introductionOptional Course Project Part 2: Turning our design into a component-based designVariables and StylesIntroduction to variablesWorking with colour variablesOrganising with variable collections and groupsSize and spacing variablesAnd what about styles?Typography and stylesDocumenting variables and stylesOptional Course Project Part 3: Adding variables and styles to our appResponsive DesignWhat is auto layout?Adding auto layoutAuto layout components and variablesResize settingsAuto or space betweenNesting auto layout with systemAbsolute positioningAuto layout pagesConstraints in FigmaConstraints and gridsWhich frame size should I use?Optional Course Project Part 4: Making our app responsiveBasic PrototypingPrototyping in FigmaSetting scroll behaviourConnecting screensDropdown menu with overlaysAnimation typesInteractive componentsFigma Mirror Preview on your deviceOptional Course Project Part 5: Bring our design alive with prototypingSharing with other designers and developersSharing and inviting othersSetting up a thumbnailShared team libraries in FigmaSetting up a shared team libraryConnecting to a shared team libraryUpdating shared team librariesSharing design, components, styles, and variablesDev mode: Sharing with developmentUtilize 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 FigmaThis is an original course by moonlearning
NEW Figma 2024: Getting started the Beginner to Pro Class at UDEMY Curriculum
Welcome
Intro
What Is Figma? Who does the coding?
Get the Figma working file!!!
Download the Figma working file here!
Setup
Getting Figma - Registration Process
Figma in the Browser vs. Figma App
The Figma file browser – Figma's home
Creating design files in Figma
Figma Basics
Make sure you have your file ready!
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
A little favour
Duplicating
Drawing in Figma
Scaling in Figma
COURSE PROJECT Introduction
COURSE PROJECT Part 1.1: making our wireframe
COURSE PROJECT Part 1.2: Wireframe to design
Introducing Components
Re-use elements with components and instances
Make sure you have your file ready!
Overriding instances
What to override and what not to
Reverting components and overrides
Nesting components
Component sets with variants
Move components to their own page
Keeping components organised
COURSE PROJECT Part 2: Turning our design into components
Variables and Styles
Introduction to variables
Make sure you have your file ready!
Working with color variables
Organising with variable collections and groups
Size and spacing variables
And what about styles?
Typography and styles
Documenting variables and styles
COURSE PROJECT Part 3.1: Adding colour variables
COURSE PROJECT Part 3.2: Adding Text Styles
Responsive Design
What is auto layout?
Make sure you have your file ready!
Adding auto layout
Auto layout components and variables
Resize settings: Responsive Cards
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?
COURSE PROJECT Part 4: Making our design responsive
Basic Prototyping
Prototyping in Figma
Make sure you have your file ready!
Connecting screens
Dropdown menu with overlays
Animation types
Interactive components
Setting scroll behaviour
Figma Mirror – Preview on your device
COURSE PROJECT Part 5: Turning our design into a prototype
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
Extra: Demystifying Resolution, Points & Pixels
Points Pixel and Screen Resolution
Why We Design at 1x
Getting Best Results on All Resolutions
Summary
Extra: Colours
Pick Mix and Match Colours Like a Pro
Colour Inspiration
60 30 10 Rule of Colour Distribution
Archive old course
Link to previous course content
Before you go
Thank you!
NEW Figma 2024: Getting started the Beginner to Pro Class at UDEMY Faculty details
Other courses offered by UDEMY
Student Forum
Anything you would want to ask experts?
Creativity and DesignWeb DesignUI UX DesignNEW Figma 2024: Getting started the Beginner to Pro Class