CheatSheetsHero

Catalog / Figma UI/UX Design Cheatsheet

Figma UI/UX Design Cheatsheet

A comprehensive cheat sheet for UI/UX design in Figma, covering essential tools, shortcuts, and best practices to enhance your design workflow.

Figma Basics & Interface

Core Tools & Navigation

Move Tool (V)

Select and move objects.

Frame Tool (F)

Create frames for different screen sizes/devices.

Shape Tools (O, L, P, etc.)

Draw basic shapes like rectangles, circles, lines, and polygons.

Pen Tool (P)

Create custom vector shapes and paths.

Text Tool (T)

Add and format text layers.

Hand Tool (H)

Pan around the canvas.

Comment Tool (C)

Add comments for collaboration.

Panels Overview

Layers Panel: Manage the hierarchy and visibility of layers.

Assets Panel: Access components, styles, and libraries.

Design Panel: Modify properties like fill, stroke, effects, and text styles.

Prototype Panel: Define interactions and flows between frames.

Inspect Panel: View CSS, iOS, and Android code snippets for design elements.

Essential Keyboard Shortcuts

Ctrl/Cmd + Z

Undo

Ctrl/Cmd + Shift + Z

Redo

Ctrl/Cmd + C

Copy

Ctrl/Cmd + V

Paste

Ctrl/Cmd + G

Group

Ctrl/Cmd + Shift + G

Ungroup

Ctrl/Cmd + D

Duplicate

Working with Styles & Components

Text Styles

Create and apply text styles to maintain consistency across your design.

Creating a Text Style: Select text, adjust properties in the Design panel, and click the style icon in the Text section, then ‘+’.

Applying a Text Style: Select text and choose a style from the Text Styles list.

Detaching a Text Style: Right-click on the text and select ‘Detach Style’.

Color Styles

Define and reuse colors to ensure visual consistency.

Creating a Color Style: Select a layer with a fill or stroke, click the style icon in the Fill/Stroke section, and click ‘+’.

Applying a Color Style: Select a layer and choose a style from the Color Styles list.

Editing a Color Style: Modify the style, and all instances will update automatically.

Components

Create reusable UI elements that can be easily updated across your designs.

Creating a Component: Right-click on a layer or group and select ‘Create Component’.

Using Instances: Drag components from the Assets panel onto the canvas.

Overriding Properties: Modify instance properties without affecting the main component.

Detaching an Instance: Right-click on an instance and select ‘Detach Instance’.

Prototyping & Interactions

Basic Prototyping

Link frames to create interactive prototypes.

Connecting Frames: Select a layer, click the prototype tab, and drag a connector to another frame.

Interaction Details: Set trigger (e.g., ‘On Click’), action (e.g., ‘Navigate to’), and animation (e.g., ‘Dissolve’).

Previewing Prototypes: Click the play button to view the prototype in presentation mode.

Interaction Types

On Click

Triggers the interaction when the user clicks the element.

On Hover

Triggers the interaction when the user hovers over the element.

While Pressing

Triggers the interaction while the user is pressing the element.

After Delay

Triggers the interaction after a specified delay.

Key/Gamepad

Triggers the interaction when a specific key or gamepad button is pressed.

Animation Options

Instant

The target frame appears immediately.

Dissolve

Fades from one frame to the next.

Smart Animate

Animates matching layers between frames.

Move In/Out

Slides the frame in or out of view.

Push

Pushes the current frame out of the way with the new frame.

Collaboration & Handoff

Collaboration Features

Figma allows real-time collaboration, making it easy for teams to work together.

Shared Projects: Invite collaborators to your Figma file.

Comments: Use comments to provide feedback and discuss design decisions.

Version History: Revert to previous versions of your design.

Libraries: Use shared component libraries to ensure consistency.

Handoff to Developers

Figma simplifies the handoff process by providing developers with the necessary information to implement the design.

Inspect Panel: Developers can view CSS, iOS, and Android code snippets for design elements.

Export Assets: Export assets in various formats (e.g., PNG, SVG, JPG).

Share Links: Share a link to the Figma file with developers.

Plugins

Extend Figma’s functionality with plugins.

Installing Plugins: Browse and install plugins from the Figma Community.

Popular Plugins: Unsplash, Iconify, Content Reel, and more.

Using Plugins: Access installed plugins from the Plugins menu.
Download PDF