Table of Contents
Introduction
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.
Frames
Aligning Objects
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.
Groups & Frames
Steve walks through defining and positioning groups, creating and positioning frames, and clipping frame content.
Organizing Layout with Frames
Steve discusses scaling an entire frame and its contents, selecting multiple grounds, and then demonstrates moving frames in a provided application example.
Inspect
Selecting & Inspecting
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.
Inspect Tool Exercise
Students are instructed to get comfortable with the inspect tool by attempting to match the provided "confirm your action" modal in the provided CodePen.
Inspect Tool Solution
Steve walks through the solution to the inspect tool exercise.
Styles
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.
Constraints
Constraints
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.
Constraints Exercise
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.
Constraints Solution
Steve walks through the solution to the constraints exercise.
Layouts
Layout Grids
Steve discusses layout grids that allow applying a fixed grid or a set of columns or rows to a frame.
Layout Grids Exercise
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.
Layout Grids Solution
Steve walks through the solution to the layout grids exercise.
Auto Layout
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.
Nesting Auto Layouts
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.
Nesting Auto Layouts Exercise
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.
Nesting Auto Layouts Solution
Steve walks through the solution to the nesting auto layouts exercise.
Components
Components
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.
Components Exercise
Students are instructed to create an input field and make a component out of it.
Components Solution
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
Variants
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.
Variants Exercise
Students are instructed to create either a radio button or a checkbox component with a selected or checked property with false and true variants.
Variants Solution
Steve walks through the solution to the variants exercise.
Swapping Components
Multiple Components & Swapping Instances
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.
Swapping Components Exercise
Students are instructed to choose and complete part one of the notifications exercises.
Swapping Components Solution
Steve walks through the solution to the swapping components exercise.
Component Recipes
Component Recipe: Notification
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.
Component Recipe: Data Table
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.
Component Recipe: Menu Slot
Steve demonstrates creating a reusable base for a drop-down menu using auto layout and an invisible component.
Prototyping
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.
