About Course
Dive into the realm of design and user experience with Spectrum Film School’s online course. Perfect for beginners, we demystify UX, guiding you from basics to crafting interactive prototypes. Collaborate, master Figma, and gain insights into real-world projects. Empower yourself to manage UX projects and make a lasting impact in the creative world.
What Will You Learn?
- How to begin working as a UX Designer using Figma.
- How to use Figma for Essential UX Design & UI Design
- How to make fully interactive prototypes.
- How to work with a UX personas.
- You will be able to add UX designer to your CV.
- Build a UX project from beginning to end.
- What the client expects of you as a UX designer.
- How to create simple wireframes.
- How to implement colours & images properly in your designs.
- The dos & don'ts around choosing fonts for web & mobile apps.
- How to create your own icons, buttons & other UI components.
- Terms such as Components, Constraints & Multi Dimensional Variants.
- Free UI kits & plugins for Figma which will speed up our workflow dramatically!
- How to build a simple style guide, ready for client handoff.
- How to make both simple & advanced micro interactions, page transitions & animations.
- Learn to design websites & mobile phone apps.
- Work with fonts & colors.
- Test on mobile phones.
- Export production ready assets.
- Create your first UX brief & persona.
- Learn professional workflow tricks & shortcuts.
- All the techniques used by UX professionals
Course Content
Getting Started
-
Intro to Figma Essentials
00:00 -
Getting started with Figma
00:00 -
What is Figma?
00:00 -
Difference between UI & UX
00:00 -
What we are making in this Figma course
00:00 -
Class project 01- Create your own brief
Wireframing – Low Fidelity
-
What is Low Fidelity Wireframe vs High Fidelity in Figma
00:00 -
Creating our design file & introducing frames in Figma
00:00
Type, Color & Icon Introduction
-
The basics of type & fonts in Figma
00:00 -
Rectangles Circles Buttons Rounded corners in Figma
00:00 -
How to use color in Figma
00:00 -
Strokes plus updating color defaults in Figma
00:00 -
Object editing and how to escape in Figma
00:00 -
Scale vs Selection Tool in Figma
00:00 -
Frames vs Groups in Figma
00:00 -
Class project 02- Wireframe
-
Where to get Free icons for Figma
00:00 -
Matching the stroke of our icons
00:00 -
How to use Plugins in Figma for icons
00:00 -
Class project 03 – Icons
Page
-
How to use Pages in Figma
00:00
Prototyping – Level One
-
How to prototype in Figma
00:00 -
Prototype animation and easing in Figma
00:00 -
Testing on your phone with Figma Mirror
00:00 -
Class project 04 – Testing on your phone
Animation Level One
-
What is Smart Animation & delays in Figma
00:00 -
Class project 05 – My first animation
Commenting
-
Sharing & Commenting on Figma file with Stakeholders
00:00 -
Share editing with other UX designers in Figma
00:00
Moodboard – High Fidelity
-
How I get inspiration for UX projects
00:00 -
How to create a mood board in Figma
00:00 -
Class Project 06 – Moodboard
Columns
-
How to work with Columns & Grid in Figma
00:00
Tips & Tricks
-
Tips Tricks Preferences and Weirdness in Figma
00:00
Colors
-
Color Inspiration & the eyedropper in Figma
00:00 -
How to create a color palette in Figma
00:00 -
How to make gradients in Figma
00:00 -
How to create & use Color Styles in Figma
00:00 -
Class Project 07 – Colors & Columns
Text & Fonts Advanced
-
Font on Desktop vs Browser Figma
00:00 -
What fonts can I use plus font pairing in Figma
00:00 -
What common font sizes should I choose in web design
00:00 -
How to make Character Styles in Figma
00:00 -
Lorem ipsum & Placeholder text in Figma
00:00 -
Useful things to know about text in Figma
00:00 -
How fix missing fonts in Figma
00:00 -
Class project 08 – Text
Drawing
-
Drawing tips and tricks in Figma
00:00 -
Squircle buttons with ios rounded courses in Figma
00:00 -
Boolean Union Subtract Intersect Exclude Pathfinder in Figma
00:00 -
What is the difference Union vs Flatten Figma
00:00 -
Class Project 09 – Making stuff
-
Smart Selection & Tidy up in Figma
00:00
Working with Illustrator
-
Do I need to know Illustrator with Figma
00:00
Images
-
Tips & tricks for using images in Figma
00:00 -
Masking Cropping images in Figma
00:00 -
Free image & plugin for Figma
00:00 -
Working with Photoshop
00:00 -
Class Project 10 – Images
-
Autolayout & Constraints
00:00 -
Class project 11 – Buttons
00:00 -
Auto Layout for spacing
00:00 -
How to use constraints in figma
00:00 -
Combining Nested frames Auto Layout & Constraints in Figma
00:00 -
Adding Text Box Autoheight to Autolayout in Figma
00:00 -
Class Project 12 – Responsive Design
-
Nice drop shadow & Inner drop shadow effects in Figma
00:00
Effects
-
Blur Layer & Background Blur & Image Blur in Figma
00:00 -
How to make Neumorphic ui buttons in Figma
00:00 -
Class project 13 – Effects
Saving & History
-
How to save locally & save history in Figma
00:00
Components & Instances
-
What are components in Figma
00:00 -
Updating & Changing & Resetting your components
00:00 -
You can’t kill main components in Figma
00:00 -
Where should you keep your main components in Figma
00:00 -
Intro to the forward slash / naming convention in Figma
00:00 -
Class Project 14 – Components
Variants & Variables
-
How to make a variable component in Figma
00:00 -
Another way to make variables in Figma
00:00 -
How to make a Multi Dimensional Variant in Figma
00:00 -
Class Project 15 – Variants
Making a Form
-
How to make a form using variants in Figma
00:00 -
Class Project 16 – Form
-
Putting it all together in an desktop example
00:00
Prototyping – Level Two
-
How to add a popup overlay modal in Figma
00:00 -
How to make & prototype a tool tip in Figma
00:00 -
What are Flows in Figma
00:00 -
Slide in mobile nav menu overlay in Figma
00:00 -
Class project 17 – Prototyping
-
How to pin navigation to top in Figma
00:00 -
How to make horizontal scrolling swipe in Figma
00:00 -
Automatic scroll down the page to anchor point in Figma
00:00
Teams & Projects
-
What are Teams vs Projects vs Files in Figma
00:00
Libraries
-
How do you use team libraries in Figma
00:00
Animation And Micro Interactions
-
The difference between animation & micro interactions
00:00 -
Animation with custom easing in Figma
00:00 -
Class Project 18 – My Second Animation
-
How to make animated transitions in Figma
00:00 -
Class Project 19 – Page transition
-
Micro interactions using interactive components in Figma
00:00 -
Micro interaction toggle switch in Figma
00:00 -
Micro Interaction burger menu turned into cross in Figma
00:00 -
Class Project 20 – Micro interaction
Thumbnail
-
How to change the thumbnail for Figma Files
00:00
Exporting
-
How to export Images out of Figma
00:00 -
How to share you document with clients & stakeholders
00:00 -
Talking to your developer early in the figma design process
00:00 -
Sharing Figma with developers & engineers handoff
00:00 -
What are the next level handoffs aka design systems
00:00 -
Class Project 21 – Finish your design
What Next
-
What next for you and Figma
00:00