Embedded Files
Figma - Design, Wireframe, & Prototype
Figma - Design, Wireframe, & Prototype
Click "Share" in the upper right to add team members.
Getting Started
Getting Started
Great for design-minded folks (as opposed to coders)
Great for design-minded folks (as opposed to coders)
You will be able to develop your app using a professional wireframing program called Figma. Professional UX/UI designers use Figma to plan, prototype, and test their app and features prior to coding.
Sign in with Google
Follow Tutorials below
Set up a team and invite your peeps.
Understanding the foundational elements
Understanding the foundational elements
App prototypes are made up of "buttons" and "screens". Let's look at those in a quick exercise:
Open Figma.
Sign in with Google if you're not already.
Start a new design file.
Make 2 frames (in a phone screen size of your choice).
Use the Text tool [T] to write "START" on the first frame.
Make an auto layout frame from "START" (Shift+A)
Put a picture / shape / something on the second frame (A star with the shape tool is fine).
UI Kits
UI Kits
These things will save you time by giving you assets you can steal.
Plugins & Widgets
Plugins & Widgets
Widgets are custom objects that you can add to the Figma editor or FigJam board. They allow you to level up your sessions with new tools, data from external applications, or new ways to play.
Unlike plugins which are only visible to individuals, widgets are objects that everyone in the file can see. You'll need to have edit access to a file to interact with a widget.
Plugins are third-party scripts or applications that extend the functionality of Figma or FigJam. Use plugins to customize your experience or create more efficient workflows in Figma design or FigJam files.
3rd party Figma tutorials
3rd party Figma tutorials
Check out the videos below and to the left if you're not getting anything out of the official videos.
Animate / Prototype your App
Animate / Prototype your App
Design Resources
Design Resources
There are a lot of design resource kits available in Figma. These will save you time and effort, but there are some best practices for applying these to your designs. Use the videos here to help you.
Some great Design Resources:
App Lab for Developers
App Lab for Developers
App Lab
App Lab
Assignment: You will use app lab to make a working prototype of your app.
Intro to App Lab - Interactive Course
All App Lab Help Videos - YouTube Playlist
Looking Good
Looking Good
Get Copyright-friendly images from Unsplash & Negative Space (No Google/Bing image searching!!!!)
More in-depth version of video on left.
Up your design game in app lab with canva
Up your design game in app lab with canva
Bonus / Alt assignment - Adobe XD
Bonus / Alt assignment - Adobe XD
Adobe Xd
Adobe Xd
Great for design-minded folks (as opposed to coders)
Great for design-minded folks (as opposed to coders)
Make it feel like the real thing. Add in user flows, interactions, and motion — no coding required.
Advanced much? SwiftUI
Advanced much? SwiftUI
This is an app on your iPad.
SwiftUI helps you build great-looking apps across all Apple platforms with the power of Swift — and surprisingly little code. You can bring even better experiences to everyone, on any Apple device, using just one set of tools and APIs.
Page updated
Report abuse