Share Description
In this course, you will :
- Explain the brief and how to collaborate with a UX persona.
- After that, you'll learn how to make basic wireframes.
- Then we'll look at how to properly incorporate colours and images into your designs.
- learn the dos and don'ts of selecting fonts for web and mobile apps.
- learn how to design your own icons, buttons, and other UI elements.
- Components, Constraints, and Multi Dimensional Variants are among the frightening terms you'll encounter. They are all very simple to grasp once you know how.
- Also make our lives easier by using free UI kits and Figma plugins, which will significantly speed up our workflow!
- Create a simple Style Guide that will be ready for client handoff.
- learn how to create simple and advanced micro interactions, page transitions, and animations.
Syllabus :
- Introduction to Figma Essentials training course
- Getting started with Figma training
- What is Figma for & does it do the coding?
- Whats the difference between UI and UX in Figma
- What we are making in this Figma course
- What is Lo Fi Wireframe vs High Fidelity in Figma
- Creating our design file & introducing frames in Figma
- The basics of type & fonts in Figma
- Rectangles, Circles Buttons & Rounded corners in Figma
- How to use color in Figma
- Strokes plus updating color defaults in Figma
- Object editing and how to escape in Figma
- Scale vs Selection Tool in Figma
- Frames vs Groups in Figma
- Where to get Free icons for Figma
- Matching the stroke of our icons
- How to use Plugins in Figma for icons
- How to use Pages in Figma
- How to prototype in Figma
- Prototype animation and easing in Figma
- Testing on your phone with Figma Mirror
- What is Smart Animation & delays in Figma
- Sharing & Commenting on Figma file with Stakeholders
- Share editing with other UX designers in Figma
- How I get inspiration for UX projects
- How to create a mood board in Figma
- How to work with Columns & Grid in Figma
- Tips, Tricks, Preferences and Weirdness in Figma
- Color Inspiration & the eyedropper in Figma
- How to create a color palette in Figma
- How to make gradients in Figma
- How to create & use Color Styles in Figma
- Font on Desktop vs Browser Figma
- What fonts can I use plus font pairing in Figma
- What common font sizes should I choose in web design
- How to make Character Styles in Figma
- Lorem ipsum & Placeholder text in Figma
- Useful things to know about text in Figma
- How fix missing fonts in Figma
- Drawing tips and tricks in Figma
- Squircle buttons with ios rounded courses in Figma
- Boolean Union Subtract Intersect Exclude Pathfinder in Figma
- What is the difference Union vs Flatten Figma
- Smart Selection & Tidy up in Figma
- Do I need to know Illustrator with Figma
- Tips & tricks for using images in Figma
- Masking Cropping images in Figma
- Free image & plugin for Figma
- Do you need Photoshop for UX design in Figma
- What is Autolayout & expanding buttons in Figma
- Auto Layout for spacing
- How to use constraints in figma
- Combining Nested frames Auto Layout & Constraints in Figma
- Adding Text Box Autoheight to Autolayout in Figma
- Nice drop shadow & Inner drop shadow effects in Figma
- Blur Layer & Background Blur & Image Blur in Figma
- How to make Neumorphic ui buttons in Figma
- How to save locally & save history in Figma
- What are components in Figma
- Updating & Changing & Resetting your components
- You can’t kill main components in Figma
- Where should you keep your main components in Figma
- Intro to the forward slash / naming convention in Figma
- How to make a variable component in Figma
- Another way to make variables in Figma
- How to make a Multi Dimensional Variant in Figma
- How to make a form using variants in Figma
- Putting it all together in an desktop example
- How to add a popup overlay modal in Figma
- How to make & prototype a tool tip in Figma
- What are Flows in Figma
- Slide in mobile nav menu overlay in Figma
- How to pin navigation to top in Figma
- How to make horizontal scrolling swipe in Figma
- Automatic scroll down the page to anchor point in Figma
- What are Teams vs Projects vs Files in Figma
- How do you use team libraries in Figma
- The difference between animation & micro interactions
- Animation with custom easing in Figma
- How to make animated transitions in Figma
- Micro interactions using interactive components in Figma
- Micro interaction toggle switch in Figma
- Micro Interaction burger menu turned into cross in Figma
- How to change the thumbnail for Figma Files
- How to export Images out of Figma
- How to share you document with clients & stakeholders
- Talking to your developer early in the figma design process
- Sharing Figma with developers & engineers handoff
- What are the next level handoffs aka design systems
