Skip to content
DOL Studio

Media

Design: Stable Code: Design only audiovideoplayer 35 Figma sets 2 standalone Media buttons/Primary

Live preview

Image preview

PNG · 1920×1080 · 240 KB

12:34

Video preview

MP4 · 1920×1080 · 12:34

Figma source

Figma source 35 sets
Page
Media
Sets
35 + 2 standalone
Primary set
Media buttons/Primary · 132 variants Open in Figma →
Showing: Media buttons/Primary
11 other sets (+ 23 more not listed)
  • .Audio player content/Audio simple with Wave sound 4 variants Figma →
  • Audio player item/Volume control 8 variants Figma →
  • Audio player item/Volume control vertical 8 variants Figma →
  • Audio player item/Wave sound 1 (Complex) 4 variants Figma →
  • Audio player item/Wave sound 2 (Thin) 4 variants Figma →
  • Audio player item/Wave sound 3 (Medium thick) 4 variants Figma →
  • Audio player item/Wave sound 4 (Thick) 4 variants Figma →
  • Audio player/Audio player dark style 28 variants Figma →
  • Audio player/Audio player Dim style 4 variants Figma →
  • Audio player/Audio player Primary style 28 variants Figma →
  • Audio player/Item/Current time indicator 2 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Media
Slug: `media`
Domain: general · Category: layout
Design: stable · Code: design-only


## Description
Audio/video player primitives - 35 sets cover audio waveforms, volume controls (horizontal/vertical), and player chrome.


## Figma source
Page: Media
Sets: 35
Primary: Media buttons/Primary
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=10198-142181

Related

  • Mockup UI (Status bar, Indicator, Browser)

    Coded
  • Section title

    Collapse

    Coded
  • Bạn đã xem hết

    Footer

    Coded

  • Card

    Code only

  • FeatureCard

    Code only

  • IconBox

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).