Andry
A product design for owning part of a real animal: units in cattle, sheep and goats kept at vetted ranches, each one checked every week.
Screens at 402 × 874
Roles: owner, supervisor and host
Colour variables in the Figma system
Text styles in the type scale
Why it exists
Owning livestock remotely asks people to trust something they cannot see. The product has to show, week after week, that a specific animal exists, is healthy and is where the listing says it is, and it has to be plain about the risks before anyone pays.
What's in it
108 screens across three journeys. Owners browse a market, buy units and follow their animals. Supervisors visit ranches, check each animal against its tag and file weekly proof of life. Hosts apply, pass inspection and run their herd. A Figma plugin rebuilds the design system natively so the screens can be edited in Figma.
Designing for trust
Every screen answers the same question an owner has: is my animal really there, and is it well?
- 01
Risk before payment
Before a first purchase the owner reads that the animal can die and that the price can fall, and has to tick a box before the button unlocks.
- 02
Weekly proof of life
Every animal has a tag such as AND-4471-KX, a named supervisor and a dated health record. Supervisors confirm the animal is present, alive and matches its tag.
- 03
Three roles, one product
Owner, supervisor and host each get their own home and tab bar, so nobody sees tools meant for someone else.
- 04
Money you can read
Naira amounts use tabular figures and carry a dollar conversion with the rate and date underneath.
- 05
Failure states designed
Offline, a transfer that did not complete, a KYC check that did not pass, an animal that does not match its file: each has its own screen.
- 06
Figma, rebuilt natively
The plugin creates colour variables with light and dark modes, text and effect styles, and Button, Badge and Tab bar components bound to those variables.
A closer look
Scroll to move through the screens.
Try it right here
The catalogue is the same file used to import the screens into Figma.
Decisions worth keeping
HTML is the source of truth
The screens are built in HTML and imported into Figma, so the design file cannot drift from what was specified.
Adire indigo and harvest gold
Indigo carries the brand, gold is kept for money, and warm laterite neutrals do the rest.
A plugin, not a file
Figma files cannot be generated outside Figma, so the plugin builds the system inside it. It has been checked against the current Plugin API; run it on a scratch file first.
- HTML
- CSS
- JavaScript
- Figma Plugin API
- Design tokens
