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 three kits share the same rarity Variables. Mix Inventory, Bazaar, and Forge — 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 of 3 in the Dark Fantasy RPG UI System — set in the world of Valdûm. Character Sheet and Skill Tree are in progress. 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 →