Figma Tutorial Videos Crystal


This entry is part 4 of 10 in the series Figma

A series of 8 videos over at YouTube is very informative if you are a beginner. They are narrated by a lady named Crystal and they are brought to you by Figma. The first of 8 videos is called Figma tutorial: Setup account, teams, projects, and files [1 of 8].

1 Figma tutorial: Setup account, teams, projects, and files [1 of 8]

Here are the timestamps for the first video.

Timestamps:
0:18 Signing up
0:32 Create your first Team
0:55 Create a Project in your Team
1:11 Invite Collaborators to your Team
1:48 Choose your Team Plan (Free Starter Team, or Professional Team)
2:22 Sample Tutorial Files
2:41 Sketch Import
2:57 Create a new blank File

2 Figma tutorial: Get a tour of the Editor [2 of 8]

Here are the timestamps.

Timestamps:
0:34 The Canvas
0:43 The Toolbar
1:30 Rename your File
3:14 The right side panel (Properties Panel)
3:47 Change the Canvas Background color
4:07 The left side panel (Layers Panel)
4:18 Create a Frame and Rectangle
5:00 Properties in the Properties Panel
5:35 Pages
5:57 Assets Tab

3 Figma tutorial: Build reusable components [3 of 8]

Here are the timestamps.

Timestamps:
0:14 Animated overview
1:21 Demo begins
2:30 Google Fonts
3:13 Alignment and Distribution
3:51 Rounding Corner Radius
4:07 Renaming Layers
4:18 Create Component
4:42 Create an Instance (Duplicate)
5:31 Overrides
6:30 Assets Tab

4 Figma tutorial: Create reusable color styles [4 of 8]

Here are the timestamps.

Timestamps:
1:17 Demo begins
1:36 Create a Color Style
2:04 Applying a Style
2:42 Updating a Style

5 Figma tutorial: Create a shareable team library [5 of 8]

Here are the timestamps.

Timestamps:
1:11 Demo begins
1:21 Publish a new Library
2:14 Use Library assets in a new File
3:06 Publish changes to existing Library
3:21 Review and accept changes

6 Figma tutorial: Collaborate in real-time with multiplayer [6 of 8]

Here are the timestamps.

Timestamps:
0:43 Invite a Collaborator
1:44 Demo begins – Design with pre-made Components
2:47 Leave a Comment
3:09 Observation Mode
4:09 Design Timelapse begins
5:00 Prototype added to Timelapse (Watch Prototyping next: https://youtu.be/X5qiBwqptek)

7 Figma tutorial: Build and present interactive prototypes [7 of 8]

Here are the timestamps.

Timestamps:
0:46 Open Presentation View
1:04 Clicking through a linear prototype
1:39 Mobile Device Frames
1:49 Scrolling
1:55 Fix position when scrolling
2:50 Making prototype connections
3:09 Navigating through connections in Presentation View
3:49 Add Transitions
4:46 Previewing Transitions in Presentation View
5:13 Open Overlay
6:17 Finishing the Prototype
7:00 Full prototype walkthrough

8 Figma tutorial: Handoff seamlessly to developers [8 of 8]

Here are the timestamps.

Timestamps:
0:22 Inviting a Developer (Viewer)
0:50 View-only Editor introduction
1:40 Code view (CSS, iOS Swift, Android)
2:22 Styles appear as commented code
2:33 Exporting assets
2:49 Using Redlines to measure distances between layers
3:09 Leaving a Comment
3:25 Using Presentation View and Prototype to understand interactions and user flow

You can download YouTube videos from https://x2convert.com.

Series Navigation<< Figma EditorFigma Components >>