Session 2 Recap: Design Tokens in Action

EP. 01 - How Do Human Stories Shape Design Systems?

How Do Human Stories Shape Design Systems? When design systems are treated like pure code or component libraries, they miss the heartbeat the people, the stories, the messy collaboration. In this episode, we dive into real human stories: from setting up components and governance to navigating design-to-dev workflows. Join us on Wireframo as we explore why design systems succeed (or fail) based on how teams adapt them, own them, and grow with them. You’ll hear lessons, insights, and behind-the-scenes moments that might just change how you think about systems at work. What you’ll get:• A peek into how design systems are actually used vs how they’re described on paper• Best practices for governance, collaboration, and scaling between design & dev• Stories that reveal the human side of consistency, creativity and process 🔗 Links & resources: – Subscribe / follow Wireframo so you never miss an episode– Connect on Instagram [https://www.instagram.com/wireframo/] | Youtube [https://www.youtube.com/@wireframo/featured] @Wireframo Let’s move beyond components - into stories, workflows, and people who build the systems.

Trailer: How do human stories shape Design Systems?

Design systems aren’t just about components, tokens, or governance - they’re about people. In this trailer, I give you a glimpse into Episode 1 of the Wireframo Podcast, where we explore the human side of design systems: how sticky notes became systems, how workflows evolve in real teams, and why the success of a system depends less on tools and more on the stories of those who use them. ✨ Full episode drops on 22nd September, 8:30 AM (GMT+1) on Spotify, Apple Podcasts, and YouTube. 🔗 Follow Wireframo so you don’t miss it and join me on Instagram [https://www.instagram.com/wireframo/] + Substack [https://ankurkhatal.substack.com/podcast?sort=new] for more behind-the-scenes stories.

Session 2 Recap: Design Tokens in Action

In this hands-on episode, Ankur walks you through how design tokens really work, how to create and structure them in Figma using Token Studio, and how to export tokens into dev-friendly CSS variables that scale across brands, themes, and platforms. Whether you're new to tokens or scaling a multi-brand design system, this episode is packed with real-world examples, naming best practices, and system logic that bridges the gap between design and code. 🧠 What You’ll Learn: What are Design Tokens and how they serve as the single source of truth The three essential layers: Global (primitive), Semantic (brand-intent), and Component tokens How to create tokens from scratch in Token Studio for Figma Setting up multi-theme workflows (light/dark mode) using tokens The difference between Figma variables and design tokens How to export design tokens as CSS variables using Token Studio and Style Dictionary 🔧 Tools & Resources Mentioned: Token Studio for Figma Figma Variables Style Dictionary Cursor.dev [https://ankurkhatal.substack.com] Figma Make Substack Newsletter [https://ankurkhatal.substack.com] ADPList Profile for 1:1 Sessions 🗓️ Upcoming Session – Save the Date: Session 3 – From Tokens to Components📅 August 9, 2025🎯 Learn how to turn tokens into coded components using Figma MCP and Cursor with no prior coding experience. 📬 Subscribe & Stay Connected: 💌 Get full session replays, guides & templates → Wireframo on Substack [https://ankurkhatal.substack.com] 🤝 Book a 1:1 mentoring session on ADPList [https://adplist.org/mentors/ankur-khatal] 📲 Follow Ankur on LinkedIn [https://www.linkedin.com/in/ankurkhatal] 🔖 Episode Tags: #DesignSystems #DesignTokens #FigmaToCode #UXDesign #FigmaWorkflow #TokensStudio #CSSVariables #DesignToDev #NoCodeComponents #ProductDesign #AnkurKhatal #InkToInterface To hear more, visit ankurkhatal.substack.com [https://ankurkhatal.substack.com?utm_medium=podcast&utm_campaign=show-notes-spotify-open-access]

Session 1 Recap - Design Systems Fundamentals

Design Systems strategy, structure, and system thinkingDear Subscribers,Welcome to the first behind-the-scenes deep dive from Design Systems Unlocked — an ongoing series designed to demystify and elevate how we think about, build, and scale design systems. Whether you attended live or are catching up here, this recap breaks down everything we explored—step by step, concept by concept. 🧭 SESSION SNAPSHOT 🎯 Theme: Design System Fundamentals + Token Architecture 🎙️ Host: Ankur Khatal (that’s me 👋) 🛠️ Format: Live teaching, Figma demo, hands-on workshop, and Q&A 🧠 Duration: 1 hr 10 mins 📅 Next up: Session 2 – Tokens in Action, July 5, 2025We began by zooming out to challenge the oversimplified belief that design systems are just polished Figma libraries.Here’s the truth I emphasized: “A design system is an ecosystem—not just a file. It’s your product’s visual and functional DNA.” Key Components: 🧩 Components – Buttons, modals, forms — built once, reused endlessly. 🔬 Patterns – Real-world combinations of components (think: sign-in flows). To hear more, visit ankurkhatal.substack.com [https://ankurkhatal.substack.com?utm_medium=podcast&utm_campaign=show-notes-spotify-open-access]