Friction into Flow: JioHotstar Design Toolkit

Stop Rebuilding Fires!

Tools — Screwdrivers, hammers, keyboards, smartphones. We shaped them to our needs and that was that. Tools didn’t just help us survive, they fundamentally changed what it meant to be human (dramatic, but true). They became extensions of ourselves, shaping us as much as we shaped them.

The lever didn’t just move one stone, it moved thousands, it made pyramids possible. The needle didn’t just stitch, it clothed us, sheltered us, carried us across seas with sails. Tools always amplified human ability, allowing us to build, cook, create, and survive in ways we couldn’t alone.

That got us thinking about our design workflows and all the tiny frictions we accepted as “how things are done”. Checking if tokens are mapped across frames before handing off to Engineering, writing the same documentation templates over and over, hunting for fresh posters for mockups. none of it is hard, but all of it is draining.

When we started noticing these patterns, we realised something: the things that slow us down aren’t usually the hard creative problems. They’re the repetitive, necessary tasks that fragment our focus and kill momentum (death by a thousand tiny clicks).

The digital equivalent of having to rebuild fire every time we want to cook. The kind of work that makes you think, “There has to be a better way to do this”.

That’s where our story begins. Each friction point became an opportunity to ask:

What if this could just… happen automatically? What if some tool could handle the repetitive parts, so we can focus on what actually matters?

Hello, Generative AI

With AI becoming more capable (finally), a lot of these “what ifs” turned into “why nots”. Each friction point we identified became an opportunity to build a tool that could extend our capabilities and improve the velocity in our design workflows.

In “Soul”, (our in-house Design System), these questions became even more important. Every unmapped token, every missing spec, every unknown prop of a component creates friction. So we started building our own levers and needles, small tools that could eliminate the repetitive work and let us focus on what actually matters.

So here’s a few we built at JioHotstar Design to tackle those frictions.

Oscar

Keeping mockups fresh without the busywork

Mockups shape how designs are received. Stale posters or repeated assets can make even the best designs feel templated and lifeless. Designers often waste precious time digging for fresh content just to keep mocks looking realistic and new, time better spent on actual design decisions (priorities, right?).

Oscar auto-fills our frames with the latest posters, title cutouts, tags, and descriptions in just a few clicks, so mocks stay fresh and convincing without manual asset hunts.

We can randomise content, filter by studio, genre, or type (movies, series, or both), and batch-fill assets effortlessly. Under the hood, it pulls curated assets from a growing asset library, instantly swapping in up-to-date posters and metadata so your mocks always stay relevant. And no, it’s not named after the award (sorry Hollywood). It’s named after Oscar from The Office (accountability matters!).

Mockups stayed fresh without the busywork, letting designs speak for themselves (as they should).

Soul Tokens Mapper

Automating token mapping to prevent design debt

Mapping design tokens sounds simple (it should be simple). Yet when you’re working with hundreds of frames in Figma, a single unmapped spacing or radius token can slip through unnoticed. For developers, every missing token raises a question: Was this intentional or just overlooked?

Worse, these gaps don’t just slow down making files hand-off ready, they lead to unnecessary new tokens creeping into the design system (token bloat is real), making maintenance harder for everyone.

We built Soul Tokens Mapper to fix that. One click, and it scans your entire selected frame (or multiple frames) to map all unmapped spacing and radius tokens automatically. No more hunting through layers or second-guessing hand-offs. It also flags any design tokens that don’t exist in the system, keeping our work clean, intentional, and system-aligned.

Under the hood, it fetches published tokens from our Design System library, traverses each nested layer in your selection, checks properties against available tokens, maps matched tokens instantly, and highlights unmapped values in a clear hierarchical view (just like on Figma layers panel) with real-time feedback and a running count of what’s been fixed (surprisingly satisfying to watch).

Designers who know token values by rote, often enter them directly as raw numbers to keep their flows fast (muscle memory over menus). Mapping those later usually takes extra clicks. With Soul Tokens Mapper, we keep our flows fast, enter values directly while designing, and at the end, run the plugin to map everything in one go.

It turned “hand-offs” from detective work into confident conversations about design decisions. A small change, but like all good tools, it made our work feel a little lighter during handoffs (that’s 20,527 tokens mapped so far and that’s just the start).

Soul Documentation Specs

Turning hours of documentation into minutes

Documentation is one of the most overlooked parts of Design Systems. Yet it quietly shapes how teams feel about a component library. It becomes a signal of trust or doubt. It defines how usable something feels. We think of it as a chore, but it’s deeply human. Documentation sets expectations, guides decisions, and influences how confidently teams build with the system. In fast-moving product work, where context switches are constant and memory is fragile, missing specs become loud.

We saw this with our own components. Every hand-off turned into a guessing game, what’s the anatomy? Which variants exist? How is it supposed to behave in edge cases? Templates helped, yes. But writing them still took time (and energy).

So we built Soul Documentation Specs. It pulls structured data directly from our Figma components and generates clean, ready-to-use documentation in minutes (not hours).

Here’s how it works: it analyses the properties and hierarchy to understand structure and usage, generates detailed anatomy breakdowns for single components, categorises multiple selections as existing, new, or reusable, and presents everything in a clean, organised list (a quick jumpstart for Engineering).

How much of our experience with a design system is shaped not just by its components, but by its documentation. By how confidently it lets us build. How often it gets out of the way. Small automations like this don’t just save time, they restore something bigger: the feeling that the system is on our side, quietly moving at our pace.

A Little Lighter, A Little Faster

Each tool removed a small friction. But together, they did something big, they gave us a bit more breathing room in our day. Time once lost to tedious tasks became time for actual design problems (the ones that actually move work forward).

We’re building these for our team with a simple philosophy: tools should be as simple as calculators. Nothing fancy, just reliable helpers that do one thing exceptionally well. Tools that make our work lighter.

We hope these spark ideas for tools you can build for yourself and your team. And maybe next time you’re in the middle of a repetitive task, you’ll pause and ask, “There has to be a better way to do this?” (and with AI, that “better way” is within everyone’s reach).

Because in the end, that’s what tools have always done. From levers to needles to plugins like these, they take what we’re already doing and make it feel a little easier, a little faster, and a little more ours. They don’t just change how we work. They change how it feels to work (and life, a little too).

P.S. We’re curating everything we learned while building these tools (so you can build your own), more in a follow-up article.

Originally published on JioHotstar Blog