Project #1: Fill in the Frames
1๏ธโƒฃ

Project #1: Fill in the Frames

This first project will teach you the fundamentals of Figma in a project-based way. You will be given a Figma file with the assignment files.

  • ๐ŸŽฏGoal: Replicate two screenshots of the hottest new fictitious app called Shiba, the Uber for Dogs using Figma and the assets provided. This includes making your version clickable.
  • ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ปWork Together: #project-support Slack channel

๐Ÿ“Important Note: The scrolling animation in the gallery of Snowball photos in the second frame is OPTIONAL. We've marked the part of the video below that demos the scrolling animation with this emoji: ๐Ÿ˜ฎWe've included an optional tutorial video for those who want to attempt this animation.

You'll be given two screen shots of Shiba and additional assets in a Figma file.
You'll be given two screen shots of Shiba and additional assets in a Figma file.

Your goal is to replicate the two screenshots. You will also need to make your version clickable.
Your goal is to replicate the two screenshots. You will also need to make your version clickable.

๐Ÿ—„ Project Files

We've included all the files you need to complete the project. Feel free to use outside resources.

#1 Figma file with assets

Click link โ†’ duplicate file

#2 Font - Playfair Display

Click link โ†’ download font family โ†’ install

If you're using Figma in browser you may need to install Figma Font Helper

๐Ÿ“– Instructional Videos

Click into each toggle to access videos and supporting content. Instructions for Frame 1 are step-by-step. Instructions for Frame 2 cover only specific topics.

The Basics

Introduction to Figma Editor (7 min)
Setting Up Your Frames (5 min)

Topics Covered: Frames, Rulers, Gutters, Safe Zones, Column Layout

Hot Keys Used:

  • F: Create Frame
  • Cmd + D: Duplicate

Frame 1

Frame 1 Breakdown (2 min)

Hotkeys Used:

  • Cmd + D: Duplicate

Add Header Text (3 min)

Topics Covered: Text Tool, Text Styles

Hotkeys Used:

  • T: Text tool
  • Arrow Keys: move selected element by one pixel

Build Your First Card (11 min)

Topics Covered: Cards, Layers, Color Styles, Constraints, Gradients, Skeumorphism

Hot Keys Used (Mac):

  • F: Create Frame
  • Option + Cmd + G: Frame Selection
  • K: Scale Tool
  • T: Text Tool
  • Hold Shift + S + Click: Select multiple items
  • R: Create Rectangle
  • Cmd + D: Duplicate

Additional Resources:

Duplicate Cards Using Components (9 min)

Topics Covered: Components, Layer Styles

Hot Keys Used (Mac):

  • Option + Cmd + K: Create Component
  • Option + Command + C: Copy Layer Style
  • Option + Command + V: P Layer Style
  • Cmd + D: Duplicate

Additional Resources: See the Components tutorial in the Figma Feature Tutorial gallery below

Use Auto Layout to Arrange Your Cards (5 min)

Topics Covered: Auto layout

Hot Keys Used (Mac):

  • K: Scale tool
  • Shift + A: Auto layout
  • Hold Shift + S + Click: select multiple elements

Additional Resources: See the Auto layout tutorial in the Figma Feature Tutorial gallery below

Add Scrolling Behavior To Cards (3 min)

Topics Covered: Overflow scrolling behavior, Auto layout, Prototype

Hotkeys Used (Mac):

  • Option + Cmd + G: Frame Selection
  • Shift + A: Auto layout

Create Row of Filters (6 min)

Topics Covered: Auto layout, buttons, active + inactive states, horizontal prototype scrolling

Hotkeys Used (Mac):

  • Shift + A: Auto layout

Additional Resources:

Menu Bar + Finishing Touches (7 min)

Topics Covered: Drop Shadows, Active and Inactive States, Alignment

Frame 2

Note: the Snowball gallery animation is optional. Consider it extra credit but is not required for a complete submission

Project 2 Breakdown (3 min)
Add Gradient Effect to Book Bar (1 min)

Topics Covered: Gradients

Add Interactions between Frame 1 and Frame 2 Using Prototype Feature (3 min)

Topics Covered: Prototyping

Additional Resources: See the Prototyping tutorial in the Figma Feature Tutorial gallery below

OPTIONAL: Advanced Gallery Animations (5 min)

โ—๏ธThe following items are official video tutorials from Figma that describe how to use specific features. You are *not required* to watch these tutorials. They are only provided as an additional resource.

Figma Feature Tutorials