Ledger Live mockup: draw it in Figma, or record a live screen
Two ways to produce a hardware wallet app mockup, and they are good at opposite things. A drawn frame gives you total control and no life. A live screen gives you movement, real prices and a true export size, and takes the pixel-level control away. Which one fits which job, and where both of them stop.
Published:
Two routes to the same picture
Somebody needs an image of a hardware wallet app. Either they draw it, shape by shape, in a design tool, or they set values in something that already knows how to render the interface and capture the result.
The choice is usually made by habit rather than by job, which is why so many decks contain a static frame that would have been better as a recording, and so many videos contain a recording that would have been better as a frame.
Side by side
What a drawn frame is good at
- Anything that does not exist. A feature you are proposing, a screen nobody has built. A simulator can only show what it renders.
- Arbitrary sizes. Print, a banner, a slide at an unusual ratio.
- Deliberate departures. Changing a layout to make a point is the whole purpose of a design file.
What it costs
- Every number is a layer. Change a total and you change the rows, the percentages and anything derived from them, by hand, each time.
- It ages against the real app. A frame drawn today is accurate until the next release, and nothing tells you when that happens.
- It cannot move. The limit that decides most cases.
What a live screen is good at
- Movement. Prices that drift, lists that scroll with weight, a sheet that slides, a pull that opens a refresh band and closes again. None of that can be drawn convincingly, and all of it is what an audience reads as real.
- Figures that hold up. Prices from public market data sit at values anyone can verify.
- A true export size. The capture has the proportions of a phone screenshot, so it drops into a timeline without resizing.
- Arithmetic that works. Totals follow their rows, because they are computed rather than typed.
What it costs
- The layout is fixed. You choose contents, not structure.
- It cannot show the unbuilt. A proposed feature is not in there.
- Export sizes are opinionated. Phone resolution, not whatever your print job wants.
Template, UI, design: three searches, one confusion
Three phrases arrive at this page wanting different things.
Template usually means "a file I can open and fill in". That is a design-file request, and the honest answer is that community files exist, vary in quality, and go stale without warning.
UI usually means "show me the components": the balance block with its two inks, the three action cards, a row in the asset list, the market tiles, the bottom tab bar. That is a documentation request, and a live screen answers it better than a frame because you can see how the pieces behave.
Design usually means "I am designing something and want this as a reference". That one genuinely wants a design tool, and a simulator is only useful as the thing you screenshot for the moodboard.
How to pick, by job
- A deck, one slide, one number. Either works. Take whichever is faster for you.
- A video, any length. Live screen. The motion is the point.
- App-store style images. Live screen, for the export size.
- A feature that does not exist. Design tool. Nothing else can draw it.
- Twenty variants of the same screen. Live screen. Twenty design frames is a maintenance project.
- Print. Design tool, for the canvas control.
Where both stop
Neither is evidence. Both contain numbers chosen by whoever made them, and the realism of a mockup says nothing about the truth of what it shows. A convincing screen attached to a request for money is a convincing screen attached to a request for money.
And neither has any business asking for a recovery phrase. A design file obviously does not. Neither does a simulator, because drawing a screen requires no access to a wallet. Anything that asks is doing something else.
If the live screen is the one you want
Flexdger Wallet renders these screens in a browser from the assets and amounts you set, with market prices that keep moving, and exports at a phone resolution. You can move through the interface without an account. We are not affiliated with Ledger.
The capture-specific version of this question is in Ledger wallet screenshot, and the screen-by-screen tour is in Ledger Live simulator.
Questions
Is there an official UI kit?
Not one published for making mockups of the app. Community files exist and vary in quality and currency, which is the real risk: a kit that was accurate a year ago now shows a layout that no longer exists, and nobody updates the file when the app ships a change.
Can I just redraw it myself?
You can, and for one static frame it is often the fastest route. The cost appears at the second frame, and again at every change of a number, because every value is a text layer you maintain by hand.
Which looks more real on video?
The live screen, by a distance. Movement is what a drawn frame cannot fake: prices that drift, a list that scrolls with momentum, a pull that opens a refresh band. An audience reads those without noticing them, and notices their absence immediately.
Can I export a live screen at a specific size?
Ours exports at a phone capture resolution, which is the size that matters for video and app-store style images. If you need an arbitrary canvas for print, a drawn frame is the better tool.
Do I need a design file to use a simulator?
No. You set assets, amounts and names in a form and the screens are composed for you. That is the trade: no file to maintain, and no pixel-level control either.
Can either version be used as proof of a balance?
Neither, ever. Both are pictures whose numbers were chosen by whoever made them. Read this as background, not as legal advice.