Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

Class Project 10 - Images

This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 30:36
SECTION: 2
Wireframing - Low Fidelity 11:03
SECTION: 3
Type, Color & Icon Introduction 1:12:34
SECTION: 4
Pages 8:32
SECTION: 5
Prototyping - Level 1 30:08
SECTION: 6
Animation Level 1 10:46
SECTION: 7
Commenting 14:09
SECTION: 8
Moodboard - High Fidelity 13:40
SECTION: 9
Columns 13:54
SECTION: 10
Tips & Tricks 7:21
SECTION: 11
Colors 34:48
SECTION: 12
Text & Fonts Advanced 47:48
SECTION: 13
Drawing 35:41
SECTION: 14
Working with Illustrator 4:16
SECTION: 15
Images 17:55
SECTION: 16
Working with Photoshop 11:58
SECTION: 17
Autolayout & Constraints 52:08
SECTION: 18
Effects 15:30
SECTION: 19
Saving & History 5:42
SECTION: 20
Components & Instances 36:15
SECTION: 21
Variants 23:04
SECTION: 22
Making a form 34:05
SECTION: 23
Prototyping - Level 2 43:01
SECTION: 24
Teams & Projects 5:19
SECTION: 25
Libraries 11:03
SECTION: 26
Animation & Micro Interactions 1:05:40
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 34:21
SECTION: 29
What next 15:53

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Student class projects

0 0
Avatar

Willem van Biljon

@willemvanBiljon

Added in the images to all the pages, and included the screenshot of the generated project brief, so folks could comment on if the selected images are appropriate. Also updated the user flow with a few more pages, as since I changed the company name to include the plural "bicycles", the single-product flow seemed off. There is still some design work left to do on the last four pages.
0 0
Avatar

melissa van passel

@melissavanPassel
0 0
Avatar

Killian Philips

@killianPhilips
0 0
Avatar

Stuart McLean

@stuartMcLean
0 0
Avatar

Jena Morse

@Jena
0 0
Avatar

Kim East

@kimEast
0 0
Avatar

Mariam Vardanyan

@mariamVardanyan
0 0
Avatar

Timea Varga

@timea

Home Page Image: Freepik Product Details Icons: Phosphor Icons
1 0
Avatar

Marisa King

@marZ

I'm laughing at myself because on the one hand I'm thinking I might be off-brief but on the other, I can totally picture Martin (my persona) fitting this style. The brief didn't say what KIND of latest trends he likes keeping up with, so I went with Gen-X into millennial-inclined sneakers. Martin has no kids and lives in the Caribbean. I dunno, I feel like he has this kinda vibe. lol. (I always go too deep with personas, and they end up becoming more like creative writing characters.) I'm having fun with this.
0 0
Avatar

Massiullah Abdul Rahim Zai

@massiullahAbdulRahimZai

Class Project 10 - Images
0 0
Avatar

Nicole Dyrnes

@nicoleDyrnes
0 0
Avatar

Jin Park

@jinPark
0 0
Avatar

Sude Taşın

@sudeTaşın
0 0
Avatar

Tao Antrim

@taoAntrim
0 0
Avatar

Stef van der Vliet

@stefvanDerVliet
0 0
Avatar

Anna Kristou

@annaKristou
0 0
Avatar

Brian Platt

@brianPlatt
1 0
Avatar

Bob Lux

@bobLux

My images and my brief. I think the images and the text apply well to an older person who has done well for himself in life. This - obviously - expensive high-quality coffee machine will allow Sebastian to enjoy the finer things in life, and its focus on quality, and returning to the quality of how espresso used to be, plus it being manufactured by a small company - will make this hand-built machine a great fit for Sebastian.
1 0
Avatar

Tumo Setswammung

@tumoSetswammng

I will be for any review and/or critque of my work
1 0
Avatar

Allan Teigar

@AllanTeigar
1 0
Avatar

Natusha Janelidze

@Natusha
0 0
Avatar

Nhat Uyen Bui

@nhatUyen
0 0
Avatar

Sasirekha Duraisamy

@sasirekhaDuraisamy
0 0
Avatar

Nia Taylor

@niaTaylor1
1 0
Avatar

Nela Jošek

@nelaJošek

Class Project 10
1 0
Avatar

Kristina Nikicevic

@kristinaNikicevic
0 0
Avatar

Mario Torres

@marioTorres

not bad i think lol
0 0
Avatar

Zaida Carrion-Rodriguez

@zaidaCarrionRodriguez
0 0
Avatar

Matthew Cannon

@matthewCannon
0 0
Avatar

ANASTASIOS EVANGELOPOULOS

@TasosEvage

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

Hi everyone, it is class project time. Basically, I just want you to add some images to your mobile Hi-Fi mock-up, and send me a screenshot. So obviously, you're not going to use headphones, unless you're lucky enough to also get headphones, for your brief, whatever your brief said, keep in mind the person, the persona that you are working for. 

So appropriate images for them, so here it is, add images to the Hi-Fi, experiment with the plugin as well. So just try any of those plugins about installing images, and keep in mind your brief and persona, when you are choosing images. Take a screenshot of all the pages that have images, and upload it, also share on social media, especially now that we're starting to fill out our website. 

What you might want to do here, is actually take a screenshot of your brief, and persona as well, when you are uploading it, especially if you're looking for feedback, because - I don't know why I'm turning that off. - but you need to be, you know, this stuff might be helpful, probably not your task flow, but this kind of, yours is going to look different from mine, but where it has your company name, and what it is, especially if you're looking for feedback, because then other people can read it, and know how they're judging your images. 

 That is it, I'll see you in the next video.

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024