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.
Link: https://www.figma.com/file/hxLTVq8ZVqmHN8OwC56kK3/book_borrowing_app_complete?node-id=0%3A1
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.
- 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