UI/UX Principles: Figma

RISD X ACM Outreach Hackathon: WS 2

​

​

Table of contents

01

04

02

05

03

06

UI Design Principles + Can’t Unsee Quiz

What is UI/UX?

What is Figma

Let’s Get Started– Build Your Portfolio in Figma

Basics + Wireframing + Prototyping in Figma

Aesthetics + Final Prototype Examples

UX = User Experience

UI = User Interface

​

​

What is UI/UX?

​

Think: Efficiency/Functionality

Think: Aesthetics

​

​

UI Design Principles

Can’t Unsee UI Quiz:

https://cantunsee.space/

Why do we use Figma?

What is Figma?

​

​

What is UI/UX?

​

A framework that we can use to:

• Design wireframes for our websites and apps
• *Simulate live functionality of our websites and apps
• Collaborate with other designers in real time

Think: Web/App Design

​

​

Let’s get started.

Create a Figma account and start a new design for your personal portfolio:

​

• Go to figma.com
• Create an account
• Press “New Design File”
• Rename your file to “<YourName>’s Portfolio”

​

​

figma.com

Common Tools

​

​

Main menu

Move Tools

Frame

Shapes

Drawing Tools

Text box

Additional resources (plug-ins, extensions)

Present

Design vs.

Prototype

Design:

Create/design your wireframes

​

Prototype:

Simulate the functionality of your website/app

​

​

There are 2 modes in Figma– Design and Prototype

Basics:

Let’s create your portfolio’s home page:

• Select your frame tool
• Create a frame that is 1280 X 832

*(you can adjust your frame’s width and height in the design sidebar)

• Rename this frame to “Home”

​

Now let’s add your name to the frame:

• Select the text tool and type your name
• Select the font and resize to your preference

​

​

Frames and Text

Basics:

Then let’s create a rectangle to simulate a button:

• Select the rectangle tool and size a rectangle to your liking.
• Insert a text box into the rectangle that reads “Contact Me”
• *Group these elements together
• Center this rectangle in the middle of your frame

​

Shapes

Basics:

Click the frame and press the present tool to check your design progress!

​

Test/

Present

Basics:

Let us know if you need any help! This is what your screen should look like with your name.

Wireframing:

• Creating the layout of all the different pages of our website!
• This is one of the first steps you and your team should take after forming your project idea for a website/app
• Think: You wouldn’t start building a house without a floor plan/blueprint first

What is wireframing?

Wireframing:

Let’s create the wireframes for our portfolio:

• Create a frame for each of the following pages: Home, About, Contact, Portfolio

​

​

​

Drafting

Wireframing:

Now let’s add content to each frame:

• Home: Create a navigation bar at the top of your page that you can use to navigate through your websites pages. (Use rectangles and text boxes for this! Group items using Ctrl + G.) Add this navbar to every page.
• About: Create a professional description about you in a text field.
• Contact: Use social media icons to create buttons
• Portfolio: Let’s leave this blank for now :)

​

​

Drafting

Wireframing:

Let us know if you need any help! This is what your screen should look like with your name.

Prototyping:

• Connecting your wireframes for simulation!
• This is the stage where we actually simulate what the user will experience as we walk through our web/mobile app!
• Throughout your project, you’ll want to prototype often to ensure a seamless user experience!

What is prototyping?

Prototyping:

Let’s connect the wireframes for our portfolio:

• In the right hand sidebar click “Prototype”. Now we are in Prototype mode and not Design.
• Look at your NavBar in your “Home” frame. Connect the buttons to their respective frames.
• Use the default settings for the interaction.
• Your “Flow 1” is where your prototype is going to automatically start

Connecting wireframes

Prototyping:

*Note: experiment with the interaction details to get cool animations + transitions!

Connecting wireframes

Components/Variants:

• Components are ways that we can recycle pieces of our design! Variants are ways that we can make these pieces change state (color, size, position, etc)
• Think: A button that changes colors once you hover over it
• The key to an efficient and cool UI.

What are components/

variants?

Components/Variants:

Creating a Component

Let’s create a component for our NavBar:

• Go back to Design Mode
• Copy and paste your current navbar into a blank space
• Select all elements of your NavBar
• Press at the top of your toolbar to create a component.
• Rename your component to “NavBar”
• Go to Prototype Mode
• Link all elements in your NavBar to the correct frames
• Replace all iterations of your NavBar with your component from the right sidebar in “Assets”

Components are pieces of your design that can be reused!

Components/Variants:

Creating a component

Components/Variants:

Creating a Variant

Let’s create a button that changes whenever we hover over it:

• Create a rectangle in blank space. Insert a text field that says “Am I the best hacker alive?” Group the rectangle and text.
• Create a component. Rename it to “HoverButton”
• Select HoverButton component and click to create a variant.
• Change the text in our new variant to “Yes”. Change the color of the rectangle to a different color.
• Add HoverButton to the center of your Portfolio frame.

Variants can be made from components; they allow you to create alternate versions of a default component. This allows for some pretty cool animations!

Components/Variants:

Creating a Variant

Cont.

• Go to Prototype Mode
• Link the default rectangle to the variant rectangle
• Change the interaction details to “While Hovering”
• Add HoverButton to the center of your Portfolio frame.

Variants can be made from components; they allow you to create alternate versions of a default component. This allows for some pretty cool animations!

Components/Variants:

Creating a Variant

Variants can be made from components; they allow you to create alternate versions of a default component. This allows for some pretty cool animations!

Aesthetics

Creating an Aesthetic

Create an aesthetic for your portfolio!

• Color Scheme?
• Fonts?
• Vibe? (modern, edgy, bubbly, etc.)
• Theme?

​

Go to coolors.co to help generate aesthetic color schemes!

​

https://coolors.co/0d0630-18314f-384e77-8bbeb2-e6f9af

​

Final Prototype Examples

Let’s take a look at an example of a finished prototype on Figma:

​

https://www.figma.com/file/V64fYHs5yPrGcyIjuzsK1z/Stellar?node-id=0%3A1&t=Zvag9RJcOhnM2R1D-1

​

Questions/

Comments/Concerns?

Reminders:

• Our next workshop will be tomorrow at 5PM in Berkner STEM Center!
• Food will be provided!
• Intro to React.js

...and our sets of editable icons

You can resize these icons without losing quality.

You can change the stroke and fill color; just select the icon and click on the paint bucket/pen.

In Google Slides, you can also use Flaticon’s extension, allowing you to customize and add even more icons.

Educational Icons

Medical Icons

Business Icons

Teamwork Icons

Help & Support Icons

Avatar Icons

Creative Process Icons

Performing Arts Icons

Nature Icons

SEO & Marketing Icons

KPI dashboard

$4,000,000

$100,000

$5,000

Revenue

General costs

Benefit

Follow the link in the graph to modify its data and then paste the new one here. For more info, click here

Thanks!

Do you have any questions?

youremail@freepik.com

+34 654 321 432

yourwebsite.com

Please keep this slide for attribution

​

CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and infographics & images by Freepik

Alternative resources

Here’s an assortment of alternative resources whose style fits the one of this template:

​

Vectors:

​

• Walk of fame star background
• Fantastic theater signs with decorative stars

Resources

Did you like the resources on this template? Get them for free at our other websites:

​

Vectors:

• Walk of fame star background
• Fantastic theater signs with decorative stars

​

Photos:

• Vintage movie camera with popcorn
• Movie clapper on red background with popcorn all around

​

​

Instructions for use

If you have a free account, in order to use this template, you must credit Slidesgo by keeping the Thanks slide. Please refer to the next slide to read the instructions for premium users.

As a Free user, you are allowed to:

• Modify this template.
• Use it for both personal and commercial projects.

You are not allowed to:

• Sublicense, sell or rent any of Slidesgo Content (or a modified version of Slidesgo Content).
• Distribute Slidesgo Content unless it has been expressly authorized by Slidesgo.
• Include Slidesgo Content in an online or offline database or file.
• Offer Slidesgo templates (or modified versions of Slidesgo templates) for download.
• Acquire the copyright of Slidesgo Content.

​

​

​

​

For more information about editing slides, please read our FAQs or visit our blog:

https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school

Instructions for use (premium users)

As a Premium user, you can use this template without attributing Slidesgo or keeping the "Thanks" slide.

You are allowed to:

• Modify this template.
• Use it for both personal and commercial purposes.
• Hide or delete the “Thanks” slide and the mention to Slidesgo in the credits.
• Share this template in an editable format with people who are not part of your team.

You are not allowed to:

• Sublicense, sell or rent this Slidesgo Template (or a modified version of this Slidesgo Template).
• Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in any other product or service that offers downloadable images, icons or presentations that may be subject to distribution or resale.
• Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this Template.
• Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an intellectual property registry or similar.

​

For more information about editing slides, please read our FAQs or visit our blog:

https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school

Fonts & colors used

This presentation has been made using the following fonts:

Gloock

(https://fonts.google.com/specimen/Gloock)

​

Quicksand

(https://fonts.google.com/specimen/Quicksand)

​

#f4ebda

#52271

#921c0e

#d76b00

#f0b863

#ef5236

#f3e5e4

#f09813

Storyset

Create your Story with our illustrated concepts. Choose the style you like the most, edit its colors, pick the background and layers you want to show and bring them to life with the animator panel! It will boost your presentation. Check out how it works.

Pana

Amico

Bro

Rafiki

Cuate

Use our editable graphic resources...

You can easily resize these resources without losing quality. To change the color, just ungroup the resource and click on the object you want to change. Then, click on the paint bucket and select the color you want. Group the resource again when you’re done. You can also look for more infographics on Slidesgo.