50
Components
States
Hover + Active
Variables
Figma Variables
Prototype
Interactive
Gilded Bazaar of Valdûm — full shop screen
Gilded Bazaar of Valdûm — $8.99
Instant download · 50 components · Variables + Prototype included
Buy on itch.io →
Role
UI Designer
Type
Game UI · Figma Kit
Tools
Figma
Kit
02 of 3
Year
2026
Problem

Most shop UI kits are just a grid and a buy button. No merchant identity, no item detail panel, no rarity system. You spend more time building the kit than designing the game.

Goal

A shop screen that feels complete — merchant panel, item grid, item detail, full rarity system. 50 components ready to drop in. Hover and active states included from the start.

The shop flow — three steps.

Browse the merchant's stock, inspect the item, make the purchase. Every state in the kit covers one of these moments — nothing assumed, nothing left to build.

01
Browse
Merchant panel, item grid, rarity at a glance
02
Inspect
Item detail, stats, ingredients, rarity tier
03
Purchase
Buy, confirm, item added to inventory

Meet the Merchant

Merchant panel — Elara Dawnfield, stock view
Merchant Panel

Portrait, name, reputation level — the world context is set before the player browses a single item. It's not a generic store. Category tabs across the top, item grid below. Every card is a component — hover, selected, and out-of-stock states included.

Item detail — every stat accounted for.

Item selected — the detail panel populates instantly. Weapon type, damage range, elemental affinity, attack speed. All visible at once, no second screen required.

Item Attributes

Everything a developer needs to spec out.

Damage range, attack speed, elemental bonus, rarity tier, lore text. Three actions: Offer, Buy Now, Compare. Developers don't have to design any of this — it's all here.

The Rare blue border and background tint shown here come from a single Figma Variable token. Swap the rarity and every element follows.

Runic Warhammer — Rare item detail, full stat breakdown

Same rarity system. Same Variables.

The Bazaar shares the same Figma Variable rarity system as all kits in the collection — 6 tiers, one token, everything updates. Mix Inventory, Bazaar, and Forge together — the component language is consistent across all three.

One token.
Every card updates.

All four kits share the same rarity Variables. Mix Inventory, Bazaar, Forge, and Character — same colors, same borders, same logic throughout the entire system.

Item card border glow
Panel background tint
Rarity label + icon
Attribute color accents
Merchant slot frame
Uncommon — Bronze Longsword Rare — Runic Warhammer Mythic — Valdumite God Sword
Live Prototype
Open full screen →
Part of the Dark Fantasy RPG UI System

Kit 02 in the Dark Fantasy RPG Valdûm UI System. Character screen is live, Skill Tree is next. Same palette, same Variables, same world.

View full collection →

Get Gilded Bazaar of Valdûm on itch.io

Instant download · 50 components · Hover + Active states · Figma Variables + Prototype included

Buy on itch.io →