Improve a confusing moment
Replace an unclear empty state, simplify a form or make a primary action easier to find. Test the change within the surrounding product instead of evaluating an isolated frame.
Flex for product designers
See the design.
Feel the interaction.
Some decisions only become clear when you can use the thing. Turn your design intent into a working change in the real product, then refine it with your team before engineering review.
“When a workspace has no projects, explain what belongs here and give people one clear action to create their first project.”
Working preview
An empty state with a next step.
- Context
- Your existing project page
- Design intent
- One useful next action
- Check together
- Copy, layout and keyboard flow
A change in your codebase, ready for your team to review.
Start somewhere useful
Small enough to start.
Useful enough to matter.
Try a flow before the handoff
Explore a shorter onboarding sequence or an alternative navigation pattern. A working preview helps product and engineering discuss the same behavior, with fewer gaps to fill in later.
Close the feedback loop
Turn a specific finding from research or usability testing into a concrete iteration. Share it with the team, gather feedback and adjust before asking engineering to merge.
A practical way forward
From the first request
to a shared decision.
Explain the user’s problem
Describe who is using the flow, where they get stuck and the outcome you want. Add designs, screenshots or product context where useful.
Try the working version
Use the live preview and look beyond the happy path. Check long content, missing data, keyboard behavior and smaller screens.
Collaborate on what ships
Share the result with product and engineering. Keep design intent close to the implementation while the team reviews code, accessibility and release readiness.
How your team stays in control
A closer collaboration with engineering.
You can contribute directly to a working change while engineering sets up the repository, reviews implementation choices and controls the merge.
Explore Flex security- Build on the app’s existing components and patterns.
- Share a preview that reviewers can actually use.
- Keep accessibility and code review in the shipping checklist.
Before you start
Good questions.
Clear answers.
Do I need to set up a local development environment?
Once your team has configured a repository and its preview runtime in Flex, you can request changes and review them in a browser. Engineering still owns that initial setup.
Can I bring my design files or screenshots?
Use your designs and screenshots to explain the intended result and identify the relevant page. Be explicit about interaction behavior and constraints that a picture alone cannot convey.
How is this different from a clickable mockup?
The preview runs an implementation based on your connected codebase. It lets the team assess real behavior and review the code that could become part of the product.
Start with your team’s next idea