A workflow to try—bringing together precise image editing, Vectorize, and interactive prototypes to move from concept to crit to completion faster.
Welcome to Workflow Lab, where we present a sample workflow using Figma products and tools.
Figuring out a new workflow means connecting the dots between different tools and teams. Follow along as the design team at Trivet—a cooking and recipe app—goes from problem to production in a fast-moving sprint. The problem The Trivet team recently launched a referral program for their app, but the banner promoting it isn’t driving the clicks or signups they expected. Pop-ups can increase visibility, but they also impact the flow. So, the question is whether the banner is too subtle to matter, or too disruptive to work.
The goal is simple: drive more clicks and signups for the referral program. The constraint is clear: increase attention without derailing the experience. The team tests a range of UX options from subtle to high-visibility: a modal (a brief interruption), an in-feed card (the most subtle option), and a full-screen overlay (maximum visibility). Each direction requires a different visual approach, so they experiment with visual effects, a hand-drawn illustration, and photography.
This sprint isn’t just about layout. It’s about testing tone, visual tension, and how much attention actually earns conversion.
Direction one: Use visual treatment to spark curiosity
The first direction leans into imagery. It uses a modal—based on the Trivet design system in Figma—for a more immersive interaction than an in-feed card. Since users are being asked to pause, the visual treatment needs to justify that moment. With copy already defined, the attention shifts to how the experience feels. The designer draws from “recipe row components” in the design system as a foundation. Because the modal copy is about “unlocking” exclusive recipes, the visuals support that language. Photography becomes the anchor, with recipes slightly blurred so they feel visible, but just out of reach. A glass treatment introduces a frosted surface, refraction adds depth, and a progressive blur softens the edges. Rather than overwhelming the interface, the effects reinforce the idea of gated access.
This direction emphasizes the unlock by adding depth and making the rewards feel tangible and intriguing.
Direction two: Insert more personality into the UI
The second direction takes a more integrated approach. Instead of interrupting the experience, the banner lives directly in the feed—designed to feel supportive rather than immersive. Because space is limited, the visual weight needs to be reduced. The designer experiments with illustration instead of photography, introducing a hand-drawn graphic as the starting point. Using Remove background and Vectorize—Figma’s AI tool that converts raster images into editable vectors—a sketch of a cake becomes a flexible design artifact.
Once vectorized, the illustration becomes easier to refine. The designer adjusts colors to align with the brand by searching in the fill panel for the appropriate variable. The Cut tool refines edges while keeping paths intact, and anchor points are rotated using bounding boxes to polish small details without losing the hand-drawn quality. What begins as a sketch becomes a reusable, brand-aligned asset that can scale and adapt to the design.
This direction introduces texture and personality, making the reward feel lighter and more approachable.
Direction three: Create a full-screen overlay
When the goal is to command attention, nothing competes with a full-screen moment. It creates a clear break in the experience and signals priority. But with more room to work, the photography needs to feel bold enough to carry that weight.
The selected image is strong, but the proportions don’t quite fit the layout, and the spoon detracts from the food as hero. Rather than spending time finding alternatives or adjusting the design to accommodate it, the designer adapts the image to fit the design. They use the Erase object tool to remove the spoon and Expand image to extend the background, scaling the image up with additional context-aware detail—without distorting the original proportions—by dragging the blue handles. The result keeps the integrity of the image intact while fitting within the layout.
This direction leans into photography to elevate the cooking atmosphere—inviting users to pause and take in the call to action.
Putting the options side by side
With the three directions complete, the team regroups to zoom out. Each direction feels viable, but they test different levels of intervention and distinct visual tones. A static frame only tells part of the story, which can lead to everyone imagining the experience differently. Feedback can also skew toward visuals, allowing ambiguity to creep in. Friction rarely shows up in a screenshot, and clarity often comes through interaction.
With that in mind, the team agrees that before bringing these options to stakeholders, the work needs to feel more like the real product.
Since the Trivet team already uses Figma Make, the new designs are easily brought into Make using an existing shared template. Read the rest of the article on Shortcut to learn how the team embeds the prototypes into Figma Make to crit with context on the path to production.
