Figma for Developers

Steve Kinney

Steve Kinney

4 hours, 17 minutes CC
Figma for Developers

Course Description

Learn Figma for creating user interface prototypes. Make shapes and frames that will hold the different pieces of the UI. You’ll also learn how to use reusable styles, typography, and components that you can use to create prototypes to show colleagues or potential customers before you do the engineering work to build the entire application.

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: April 26, 2022

Learning Paths


Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 23 minutes
  • Introduction
    Steve Kinney introduces the course by discussing the goal of the course, who the course is for, materials needed, examples of what will be covered, and material that won't be covered. Recommendations for other courses to dive deeper into design and a student's question regarding how easy it is to move from Photoshop to Figma are also covered in this segment.
  • Figma Basics
    Steve walks through the layout of Figma, including a brief overview of the toolbar, sharing capabilities, pages, assets, and the inspect function. Helpful hotkeys and a demonstration of creating rectangles and frames are also provided in this segment.


Section Duration: 23 minutes


Section Duration: 8 minutes


Section Duration: 28 minutes
  • Shared Styles
    Steve discusses creating style variables for colors, text, effects, and layout grids to apply them to different objects if they change later. Recommendations for naming variables, using the style button, and creating a new color style are also covered in this segment.
  • Styler Plugin
    Steve demonstrates styling plugins that take multiple layers and generate named styles based on the layer name. Bulk renaming layers with customizable variables are also covered in this segment.
  • Creating Styles
    Steve discusses creating a color scheme and typography styling to be reused in the remainder of the course. Using the text style generator to create a typography style, assigning colors, generating a UI color pallet, and a student's question regarding if there is a convenient way to find a hex code are also covered in this segment.


Section Duration: 9 minutes


Section Duration: 54 minutes


Section Duration: 20 minutes


Section Duration: 23 minutes

Swapping Components

Section Duration: 17 minutes

Component Recipes

Section Duration: 39 minutes

Wrapping Up

Section Duration: 6 minutes

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now