From: gregisenberg
This article provides an overview of Figma UI design best practices and workflow, demonstrated through a live design session focused on creating course cards for a marketplace.
Starting a Design Session
A live design session in Figma can demonstrate the process of iterating on an idea and applying best practices [00:01:00]. The goal is to show considerations made while building, visual improvements, and basic prototyping [00:01:18]. The example used is designing a course page for dive.club to list design courses with affiliate agreements [00:01:46].
Core Figma Concepts
Frames and Containers
To start a design in Figma, you create a “frame” by hitting the F key [00:02:07]. A frame acts as a container, similar to a CSS div, where you can place other elements [00:02:10]. For example, a “course card” would be treated as a frame [00:02:22].
Components and Auto Layout
Using components early in the design process, even before adding content, is a hack for moving quickly in Figma [00:02:42]. Components help minimize the amount of adjustments needed later by providing a single point of control [00:03:08].
Auto Layout is created by hitting Shift + A and allows you to throw any elements into a stack, which functions similarly to Flexbox in CSS [00:03:32]. This feature allows control over spacing and manipulation of designs [00:03:51]. Designing with Auto Layout in Figma makes it very easy to build components in Flexbox in code [00:15:05]. Randomly positioning elements without Auto Layout is akin to absolute positioning in CSS, which is generally to be avoided [00:15:16].
Keyboard Shortcuts
F: Create a frame [00:02:07]Shift + A: Create an Auto Layout [00:03:32]- Number keys (
0-9): Change opacity (e.g.,6for 60%,0for 100%) [00:08:20]R: Draw a rectangle [00:09:01]Command + K: Open the quick action menu to search for commands or run plugins [00:09:30]Command + [ (left bracket`): Move selected layer down in the layer tree [00:17:58]Enter: Drill into layers in the canvas [00:15:41]Shift + Enter: Move back up the layer tree [00:15:45]Q: Toggle multi-edit variants mode for components [00:27:07]T: Add text [00:27:35]
Design Process and Iteration
Inspiration and Ideation
Good designers are often collectors of design, not just creators [00:07:37]. Keeping a database of saved inspiration, like a Notion database, helps to constantly gather and categorize design ideas [00:05:20]. When starting a design with no clear idea, a common first step is to paste in images from inspiration sources and then recreate or adapt parts of them [00:06:01]. It’s beneficial to constantly ask “why” you like something you see [00:07:47].
Iteration Workflow
The design process often involves trying many different approaches rapidly [00:12:50]. A common workflow for iteration is to duplicate an entire frame (Command + D), then use the “Destroyer” plugin to remove all components within the duplicated frame, effectively “freezing” that iteration in time [00:10:00]. This allows for continuous changes on the original frame without affecting previous versions [00:10:28].
Designing in one frame
It’s helpful to always design in one main frame, and have the design open at 1x scale on a separate device (like a laptop in prototype mode) to see updates in real-time [00:11:18].
Adding Visual Interest
Images and Background Removal
Images can be added by drawing a rectangle (R) and then filling it [00:08:58]. Figma allows users to remove backgrounds from images using the Command + K quick action menu [00:09:28].
Lighting, Blur, and Blend Modes
Adding visual interest can involve playing with lighting and blur [00:17:37]. A rectangle filled with a color and set to “Layer Blur” under effects, then adjusted for opacity, can create an interesting visual effect [00:18:08].
Blend modes, found under “Apply Blend Mode,” can also enhance visuals [00:18:48]. “Luminosity” is a commonly used blend mode that allows colors below to bleed through, creating a tinted black and white effect [00:19:05].
Noise and Texture
Adding noise and texture can significantly spice up designs, especially with gradients and lighting [00:19:43]. The “Noise & Texture” plugin allows users to add graininess and other visual effects to elements [00:20:10].
Shadows (Inner and Drop Shadows)
To create a lifting or popping effect, “Smooth Shadow” is a recommended plugin that creates beautiful, multi-layered shadows [00:25:57].
Inner shadows can add depth and a rounded, 3D feel to corners [00:33:12]. By adding an inner shadow (e.g., white at the top, darker at the bottom) and tweaking its offset and blur, a subtle lighting effect can be achieved, making elements appear to curve or bend [00:33:43]. This technique is a common trend in modern designs for creating visual interest [00:34:50].
Prototyping and Adding Interactivity
To add interactivity like a hover state, you first make an element a component, then add a “variant” (e.g., a “hover” variant) [00:23:27]. In the prototype mode, you link the default component to its hover variant using a “while hovering” interaction [00:24:36]. Using “Smart Animate” with a “gentle” easing (around 400ms) creates a smooth transition between states [00:24:53].
Plugins and Tools
While many plugins exist, a focused set can be very effective:
- Visual Effects:
- Noise & Texture: For adding graininess and other visual effects [00:20:10].
- Smooth Shadow: To create beautiful, multi-layered shadows [00:25:57].
- Workflow Enhancements:
- Destroyer: Removes components from a frame, effectively “freezing” an iteration [00:10:16].
- Phosphor: A popular icon library plugin, ensuring consistent icon styles [00:13:23].
- Content Reel: Populates designs with various content like avatars, names, or custom folders of content [00:30:44].
- Similar Layer: Used in conjunction with Content Reel, this plugin helps select all layers with similar properties (e.g., images by name) for bulk changes [00:31:20].
Fewer Plugins, More Built-in Features
Figma has incorporated many workflow enhancements that used to require plugins directly into the core application, reducing the need for a large plugin repertoire [00:32:40].
Figma’s Role in Modern Design
Figma remains excellent for generative design and rapidly exploring divergent visual ideas, allowing for quick iteration and throwing ideas at the wall [00:35:53]. Unlike tools like V0, Figma allows for more exploration and pushing of visual boundaries, as AI-assisted tools may feel more templated [00:36:06].
However, the design process is evolving. After exploring ideas in Figma, designers may move to tools like Framer to build the final product and refine it, especially for web design [00:36:26]. Figma can be seen as the “sketchbook” (pencil and paper) for ideas, while code-based tools are the “word processor” for more productized output [00:37:13]. The line between high-fidelity design in Figma and high-fidelity code is blurring, suggesting Figma might move earlier into the low-fidelity exploration phase in the future [00:38:09].
Learning Figma
The best way to learn Figma is to get hands-on and start experimenting [00:39:27]. Simply opening a new file, typing F, and drawing a frame is a good starting point [00:39:43].
For more information, you can find the designer on Twitter @ridoredesign and learn about their projects at dive.club [00:38:49].