Steve Kinney
Temporal
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.
Preview
CloseLearn 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
Table of Contents
Introduction
Section Duration: 23 minutes
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.
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.
Frames
Section Duration: 23 minutes
Steve demonstrates a simple method to duplicate frames, aligning objects in a frame, evenly moving groups of objects, quickly duplicating objects, and swapping objects. Student questions regarding zooming in with hotkeys without snapping and how to find the distance between two objects are also covered in this segment.
Steve walks through defining and positioning groups, creating and positioning frames, and clipping frame content.
Steve discusses scaling an entire frame and its contents, selecting multiple grounds, and then demonstrates moving frames in a provided application example.
Inspect
Section Duration: 8 minutes
Steve demonstrates various methods of selecting objects, including objects that are the same color. This segment also covers how to use the inspect tool to view generated CSS code and adjust the content drop shadow and border thickness.
Students are instructed to get comfortable with the inspect tool by attempting to match the provided "confirm your action" modal in the provided CodePen.
Steve walks through the solution to the inspect tool exercise.
Styles
Section Duration: 28 minutes
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.
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.
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.
Constraints
Section Duration: 9 minutes
Steve demonstrates using constraints to control how layers within a frame behave when the size of the frame changes. By default, a layer’s constraints are set to top and left, and the box stays in its initial position if adjusted.
Students are instructed to set the constraints so that the top and bottom bars stretch along with the phone's width and stick to the tops and bottoms. Try any of the following with the two orange boxes: have them remain centered in the frame; have stretched with the width remain centered as the height changes.
Steve walks through the solution to the constraints exercise.
Layouts
Section Duration: 54 minutes
Steve discusses layout grids that allow applying a fixed grid or a set of columns or rows to a frame.
Students are instructed to make a two-column grid with 36-pixel margins and 16-pixel gutters and then use a layout grid to create a frame with a padding of 20 pixels on each side.
Steve walks through the solution to the layout grids exercise.
Steve discusses using auto layout grids, similar to Flexbox, to avoid manually adjusting objects and frames. Using auto layout to create buttons and a student's question regarding if Figma can mock functionality is also covered in this segment.
Steve demonstrates the ability to increase the complexity of frames by nesting auto layouts within one another. A student's question regarding a recommended way to adjust an auto-layout size is also covered in this segment.
Students are instructed to follow along with one of the two step-by-step instructions provided to build ethier a card component or a product information component.
Steve walks through the solution to the nesting auto layouts exercise.
Components
Section Duration: 20 minutes
Steve walks through creating reusable components for things such as common UI elements, logos and branding assets, icons, post-it notes, and arrows. Any layer can be turned into a component and reused, but not all parts can be overridden.
Students are instructed to create an input field and make a component out of it.
Steve walks through the solution to the components exercise. Student questions regarding how to reset overrides and if there is a way to clip the text so the input width is fixed are also covered in this segment.
Variants
Section Duration: 23 minutes
Steve discusses creating variants to allow for adjusting specific properties of the same component. When to use variants, including having similar components that share multiple properties, are also covered in this segment.
Students are instructed to create either a radio button or a checkbox component with a selected or checked property with false and true variants.
Steve walks through the solution to the variants exercise.
Swapping Components
Section Duration: 17 minutes
Steve demonstrates how to create a component set with a base component that all components in the set inherit changes from. Swapping instances of components then becomes simple with well-organized components.
Students are instructed to choose and complete part one of the notifications exercises.
Steve walks through the solution to the swapping components exercise.
Component Recipes
Section Duration: 39 minutes
Steve walks through creating a more advanced notification component that includes hidden icon components. All of the instance components should get the new icon and can now swap instances with another component if different icons are desired.
Steve live codes a reusable data table component using the previously created card with multiple table rows. Using clip content can allow for varying sizes of tables.
Steve demonstrates creating a reusable base for a drop-down menu using auto layout and an invisible component.
Steve Unlike demonstrates that Figma allows the creation of complete, interactive prototypes directly from the tool used to design the UI. Interactive components with variants, linking frames together to simulate a user flow, and adding interactivity with scrollable content are covered in this segment.
Wrapping Up
Section Duration: 6 minutes
Steve wraps up the course by answering a student's question regarding if there is a way to create a version styling in Figma and walks through a few recommended plugins.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops