• Skip to main content
  • Skip to primary sidebar

Ryan Hartman

Just another Master of Science – Digital Innovation in Marketing site

Fox School of Business

Figma Prototyping Best Practices

July 27, 2022 By Ryan Hartman Leave a Comment

Here is a list of best practices I learned as I started to build my first prototype in Figma.

  1. Build a wireframe before you start your prototype.

Building a wireframe sounds like an unnecessary step that takes time away from designing your website or app, but it helps you save time in the end by helping you map out where to copy themes for different pages, where you can build master components to avoid over linking, and showing where you need to create specific components such as typing, scrolling, or check-boxes.

  1. Use Master Components as often as possible to save time linking components on large builds with multiple pages and links.

The best way to do this as efficiently as possible is by building a complete wireframe of your website prior to building out your prototype. This sounds self-explanatory but by doing this first, you are able to map out all the possible areas you could create master components throughout your website or app.

Once you have decided what areas of the website you can utilize master components, you can then start to build them. Next, once all the pages are built that use the master component, you should link it to those pages. Lastly, you copy and paste the master component to each page, saving time linking each page separately.

  1. Timed delays make your prototype more realistic when you present the prototype.

Delayed triggers allow you to build a loading bar that is perfect for when you want to show a document being uploaded onto a site or when you are imitating a chat in an instant messenger screen.

  1. Get to know the too Smart Animate.

It allows you to quickly create useful animations such as pull to refresh, loading sequences, and sliders.

 

https://help.figma.com/hc/en-us/articles/360039818874-Create-advanced-animations-with-Smart-Animate

Filed Under: Uncategorized

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

My information

  • About
  • B2B Segmentation
  • Brand Activation
  • Healthcare Predictive Analysis
  • My Interests
  • Resume
  • Work Experience

Recent Posts

  • Social Business Governance: The 5 P’s System
  • How Social Media Listening Can Add To Your Bottom Line
  • Figma Prototyping Best Practices
  • Defining What Makes a Website Visually Appealing
  • A word with Dave Hartman and Marie Hartman: A fun and innovative take on LEAN Process Implementation
  • PMI Agile Methodology

Copyright © 2023 · Ryan Hartman
Disclaimer: The information included in e-portfolios are posted and maintained by the applicable student. Temple University makes no representation as to the accuracy or currency of this information.