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

• Iconify
• Unsplash
• Mapsicle