Skip to content

An introduction to building component-based prototypes with Figma

Notifications You must be signed in to change notification settings

bobbysebolao/figma-prototyping-tutorial

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Prototyping in Figma (Figma-along)

What is Figma?

Figma is a powerful tool that lets us design and prototype web apps before we develop them.


In this demo, we're going to prototype a few UI elements in a book sharing app. We'll be building these UI elements as components that can be reused across our design.

The Goal

Link: https://www.figma.com/file/hxLTVq8ZVqmHN8OwC56kK3/book_borrowing_app_complete?node-id=0%3A1

Getting started

Create an account and log in at figma.com.

Clone this repo:

git clone https://github.com/bobbysebolao/figma-prototyping-tutorial.git

We won't be doing any coding, but this repo contains the book cover images that we'll add to our prototype.

Useful keyboard shortcuts in Figma

  • A - Frame Tool
  • R - Rectangle Tool
  • T - Text Tool
  • Hold Option + arrow key - move selected object 1px
  • Hold Shift + arrow key - move selected object 10px
  • Cmd + G - Group all selected objects together

Useful Figma plugins

About

An introduction to building component-based prototypes with Figma

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published