This social short video player web UI for Figma gives you a full height short video player with a side action rail, a caption and an audio line.

What is included

• A tall video area with a dark gradient at the bottom for readable text
• A right rail with like, comment, share, save and more icons and counts
• A creator row with avatar and a Follow button
• A caption and an original audio line
• A top title and camera icon
• The web layout is 1440 px wide with a side menu and a content area that fits a 1000 px high screen

Where to use it

Use it for short video apps, reel style feeds, creator tools and demos of vertical video. It is made for desktop web apps and landing page demos.

Design notes

All text on the video is white and sits on a dark gradient, so it stays readable on any picture you place behind it. The rail icons are 28 px, which is easy to tap. It uses a light theme: white and near-white cards, dark text and a pink and blue accent, so it reads like a real app screen rather than a wireframe.

Built for editing

Spacing follows a 4 point scale and layers have clear names, so developers can find what they need. Every color is a fill you can change in the fill panel, and the whole screen uses auto layout. Text pairs stay above 4.5 to 1 contrast, except white text that sits on a photo.

How to use it

Copy the component with the copy button and paste it into Figma with Ctrl+V or Cmd+V. This is the Light version. Photo spots are rectangles with a real sample picture already placed as a fill, so you can swap in your own picture in one click. Install the free Plus Jakarta Sans font first. All names, handles and numbers are sample content.