How to Design an App Faster Using Figma

TL;DR

Start by turning a frame into a component, then use instances and auto layout to make repeated changes from one source. Build designs through many preserved iterations, evaluate them at real size in prototype mode, and draw inspiration from a continuously maintained collection instead of beginning with an empty page.

Transcript

so this is going to be interesting I texted red and I was like do you want to come on the show and just do a live design session on figma because R is like the figma guy and as you're designing your your startup your idea you can just give best practices around how to use figma and you said yes here I am I appreciate it welcome to the show you know... Read More

Key Insights

• A Figma frame is a container comparable to a CSS div. Pressing F creates one, and placing a card’s content inside it provides the basic structure needed before typography, imagery, pricing, color, and spacing are added.
• Components are useful as early design speed mechanisms, not only as parts of formal design systems. Converting a blank course card into a component before adding content allows every duplicated instance to update whenever the main component changes.
• Auto layout is a stack-like structure that maps conceptually to Flexbox in CSS. Pressing Shift+A applies it, after which the designer can control spacing and organize repeated card instances without manually repositioning every element after each adjustment.
• Design inspiration is most useful when collected continuously. Riddering maintains a categorized Notion database of visual references, pastes examples into project pages, studies details he finds interesting, and recreates selected parts when he needs a direction for a new design.
• Metadata can guide a card’s visual hierarchy. The example course card includes a title, instructor name, four-week duration, $8.99 price, and instructor image, giving the designer concrete content to arrange and differentiate through typography, color, and opacity.
• Keyboard number keys provide a quick way to change opacity in Figma. Typing six changes a selected white element to 60 percent opacity, two reduces it to 20 percent, and zero restores it to 100 percent.
• Design exploration benefits from preserving rejected or unfinished directions. Duplicating a frame and using the Destroyer plugin to remove its component relationships freezes that version, while the main component remains available for another round of changes.
• Real-size evaluation reveals how a design actually reads outside a zoomed editing view. Riddering keeps prototype mode open at 1X on his laptop while editing on another monitor, allowing the leftmost source-of-truth frame to update continuously at its intended size.

Questions & Answers

Q: How do you start designing an app card in Figma?

Press F to create a frame, which acts as the card’s container and can be understood like a CSS div. Convert that frame into a component before filling it with content, duplicate it into several instances, and place those instances inside an auto-layout container. You can then add the title, instructor, duration, price, imagery, colors, and spacing while controlling repeated cards from one source.

Q: Why should you create Figma components early?

Creating a component before adding content turns it into a speed mechanism for exploration. Every duplicated card becomes an instance connected to the main component, so a change to the source propagates across the entire set. This reduces repeated work and limits the number of separate controls the designer must adjust while trying different visual treatments.

Q: How does auto layout improve a Figma workflow?

Auto layout organizes elements as a stack and provides spacing controls that behave conceptually like Flexbox in CSS. Press Shift+A to apply it to a frame or selected group. In the course marketplace example, it holds duplicated course cards and makes their separation adjustable from one control, helping the layout respond coherently as content and visual styling change.

Q: How can designers find inspiration without starting from scratch?

Maintain an ongoing, categorized collection of designs instead of waiting until a project begins. Riddering saves references in a Notion database and creates project pages containing examples he wants to inspect later. When he lacks a direction, he opens that collection, zooms into an interesting example, recreates a useful detail, and adapts it to the current design.

Q: How should course information be organized on a Figma card?

Begin by listing the available metadata, then use it to establish hierarchy. The demonstrated card includes the course title, instructor name, four-week duration, $8.99 price, and an instructor image. Typography styles distinguish the title, color emphasizes the instructor, and reduced opacity makes supporting details quieter while keeping all essential information visible within the card.

Q: How do you iterate without losing earlier Figma designs?

Duplicate the entire frame with Command+D whenever a direction reaches a useful checkpoint. Use the Destroyer plugin’s destroy-instances action on the duplicate so its component relationships are removed and the version becomes frozen in time. Continue editing the original main component as the source of truth, repeating this process as new alternatives emerge during exploration.

Q: How can opacity shortcuts improve Figma styling?

Select an element and press a number key to change its opacity quickly. In the demonstration, pressing six reduces a white element to 60 percent opacity, pressing two produces 20 percent opacity, and pressing zero returns it to 100 percent. This makes it fast to create hierarchy, soften supporting text, and let a backdrop’s hue influence foreground elements.

Q: Why should a Figma design be checked at actual size?

A zoomed editing view does not always show how typography, spacing, imagery, and hierarchy will feel at the intended display size. Riddering opens the file in prototype mode, uses the play button, and keeps the result visible at 1X on his laptop while editing on another monitor. The source-of-truth frame then updates continuously for realistic evaluation.

Summary & Key Takeaways

• Michael Riddering begins a course marketplace design by creating a frame, immediately converting it into a component, and duplicating instances inside an auto-layout container. This setup gives him one source for styling repeated course cards, reducing duplicate work while he experiments with titles, instructor names, course lengths, prices, images, colors, and spacing.

• The design process relies on continuous inspiration rather than searching only when a project begins. Riddering saves and categorizes interesting work in a Notion database, then studies and recreates selected details when he needs direction. He recommends noticing appealing designs, examining their small decisions, and asking why specific visual choices work.

• Iteration is handled by duplicating the current frame, using the Destroyer plugin to detach its component instances, and preserving that version as a frozen design checkpoint. The original component remains the source of truth for further changes. Prototype mode stays open at actual size on another screen so every adjustment can be evaluated realistically.