Figma for Developers
Table of Contents
IntroductionSteve 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 BasicsSteve 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.
Aligning ObjectsSteve 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 & FramesSteve walks through defining and positioning groups, creating and positioning frames, and clipping frame content.
Organizing Layout with FramesSteve discusses scaling an entire frame and its contents, selecting multiple grounds, and then demonstrates moving frames in a provided application example.
Selecting & InspectingSteve 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 ExerciseStudents 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 SolutionSteve walks through the solution to the inspect tool exercise.
Shared StylesSteve 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 PluginSteve 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 StylesSteve 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.
ConstraintsSteve 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 ExerciseStudents 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 SolutionSteve walks through the solution to the constraints exercise.
Layout GridsSteve discusses layout grids that allow applying a fixed grid or a set of columns or rows to a frame.
Layout Grids ExerciseStudents 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 SolutionSteve walks through the solution to the layout grids exercise.
Auto LayoutSteve 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 LayoutsSteve 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 ExerciseStudents 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 SolutionSteve walks through the solution to the nesting auto layouts exercise.
ComponentsSteve 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 ExerciseStudents are instructed to create an input field and make a component out of it.
Components SolutionSteve 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.
VariantsSteve 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 ExerciseStudents are instructed to create either a radio button or a checkbox component with a selected or checked property with false and true variants.
Variants SolutionSteve walks through the solution to the variants exercise.
Multiple Components & Swapping InstancesSteve 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 ExerciseStudents are instructed to choose and complete part one of the notifications exercises.
Swapping Components SolutionSteve walks through the solution to the swapping components exercise.
Component Recipe: NotificationSteve 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 TableSteve 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 SlotSteve demonstrates creating a reusable base for a drop-down menu using auto layout and an invisible component.
PrototypingSteve 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.