A Step-By-Step Prototype

Step 1: Sign up for Figma

Joining our team & making your team.

Open Figma

Sign in with Google
Join our Team
Check your mail and verify.
Create a design file, and invite your peeps.

Go to our Project

Double click in the Mr. Walters Class team project.

Create a Design File

Pick one member of your team to create a design file. Give it a title!!!

Invite your peeps

Invite the other members of your team, using your GSuite email addresses (@springgrovesd.org)

Step 2: Design your App

First Steps

Add a frame.
- Using the Frame Tool:
  - Click the Frame tool (the hash symbol) in the toolbar, or use the shortcut F.
- Choosing a Preset:
  - On the right-hand side, you'll find preset device sizes for various mobile devices (like iPhones and Androids). Select the one you need for your design.
Set up a Grid.

2-1: Establish Screens

Before dragging on a bunch of blank frames, consider establishing a "template" frame that includes Status bar elements, a Home indicator, and any menus you would like to see repeated in the same spot throughout the app. Then Copy > Paste as many times as you need it.

Steal stuff from UI Kits

Steal stuff from Plugins

Using Plugins to steal Pro Content
- The Unsplash Plugin (How do I get Pictures????)
- Material Symbols (Icons and UI Symbols)
- Content Reel Plugin
- Top 10 Icon Plugins for Figma

2-2: Make Buttons

Figma in 5: Auto Layout
More UI kit goodness (this time focused on app buttons and not system UI)

This video has most of what you need to do to make your app look great!

Also Check out Extreme Cropping

2-3: Make it look Good!!!

This is the objective of this unit... You want to make this the best user experience (UX) that you possibly can. So, it all comes down to this. Check your app and make sure it does the following: