How to get fluid, responsive design tokens from a real-world Figma design — 10+ years experience

In this video, I dive into the intricate process of bridging the gap between designers and developers. This topic is close to my heart, as I've spent years navigating the challenges of implementing real-world designs. Join me as I explore the nuances of design tokens, fluid layouts, and the art of maintaining consistency across different screen sizes. Whether you're a seasoned developer or just starting out, I hope to share insights that will make your design handoff process smoother and more intuitive. Let's embark on this journey together and transform the way we approach web design.
Chapters

00:00 Introduction to the Design Series
00:25 Understanding Design Implementation
01:37 Design Tokens and Planning
03:26 Design Overview
04:20 Checking out the design more closely
06:14 Taking a stroll through the design
07:29 Annotating the design
12:37 Looking at the styleguide
14:52 Exploring Design Spaces and Components
21:13 Fluid Design Principles and Responsive Layouts
24:43 Exploring Color Definitions and Style Guides
26:24 Color Inventory and Design Cohesion
29:04 Setting Up with Tailwind for Design Tokens
📲 Keep in touch with Dinghy:
🔗 Subscribe to our YouTube: https://www.youtube.com/@dinghystudio
🔗 Follow us on Instagram: https://www.instagram.com/dinghystudio/
🔗 Follow us on LinkedIn: https://www.linkedin.com/company/dinghystudio/
🔗 Read our blog: https://www.dinghy.studio/blog/

About the author
---
Hi, I'm Nils, Co-Founder and Head of Interaction Design at Dinghy. With over 10 years of experience in designing and building websites, I'm passionate about creating great digital experiences. At Dinghy, we believe that exceptional UX comes from the synergy of branding, content strategy, design, and development, all working together seamlessly.

On this channel, I show you how to create outstanding user experiences for your customers through hands-on, easy-to-follow how-tos in wireframing, UI design, stakeholder management, usability testing, HTML, CSS, and frontend development.

Keywords
---
design handoff, Figma, design tokens, responsive design, UI/UX, web development, design consistency, color tokens, text styles, design implementation

Видео How to get fluid, responsive design tokens from a real-world Figma design — 10+ years experience канала Dinghy Studio