Bridging Design and Functionality

Meena and I work closely, often side-by-side in the React Native ecosystem, but despite our proximity, we’ve realized that miscommunication can create hurdles. So today, we’re here to talk about something many of you have probably experienced—bridging the gap between design and development. It’s a conversation many are having, especially when designers promise, "just one last change," and developers start to feel faint.

If you follow conversations online, you’ll notice that designers are being encouraged to learn to code, and developers are being asked to familiarize themselves with design terminologies like tokens. So, today, we’ve chosen to talk about bridging the gap between design and functionality. We’ll share the challenges, a possible solution, and how we built a universal component library that’s shaping our collaborative process.

Before we dive into the details, let’s acknowledge that the designer and developer mindsets are fundamentally different. This isn’t about a "versus" situation; it’s about how each perspective enhances the final product. When a designer hears about a new project, their mind races with ideas about user interfaces, brand consistency, and user flows. As a developer, I’m more concerned with performance, APIs, and the technicalities that make it all work. We both have a vision, but they don’t always align.

One of the common issues is when I, as a developer, see a design like a complex animation, and I immediately start thinking about how it will impact performance. We’ve even studied the performance of 20 websites, and let’s just say, the results didn’t live up to the design's promises.

Let’s talk about shadows for a moment. As a designer, Tanisha might meticulously craft the perfect shadow, considering its purpose, light source, intensity, and properties like blur and spread. But for me, implementing shadows across platforms—Android, iOS, and web—is far from straightforward. Each platform handles shadows differently. There are even open-source tools that attempt to bridge this gap, but they often fall short. We need tools that are truly designer-friendly, translating their vision into the technical realm seamlessly.

Now, let’s blow your mind with a simple riddle. Here are three squares, all with the same dimensions, 170 pixels by 170 pixels. But, visually, they look completely different. Can you tell why? It turns out that design tools like Figma allow for strokes to be inside, outside, or centered, but this isn’t reflected in the developer's specifications. For us, borders are just borders—they don’t change the box’s dimensions. This kind of discrepancy is just one example of how we, as designers and developers, need to bridge the communication gap.

So, how do we fix this? The first step is building a common language. We realized that even though we were talking about the same concepts, our terminology differed. For a designer, it’s an artboard; for a developer, it’s a viewport. Designers talk about opacity, developers mention alpha, designers use layers, and developers work with z-index. Improving communication is critical, but where do we start? That’s where our small side project, Bridge the Gap, comes in.

Another solution that’s gaining traction across the industry is a tokenized system, which helps foster collaboration between design and development. Many companies have adopted it as part of their design systems, and it’s something we’re actively working on at GeekyAnts as we develop Glue Stack UI.

Why are we speaking about this today? Well, Meena and I have first-hand experience from building NativeBase and now GlueStack UI. Despite sitting next to each other, there were constant communication gaps, especially around design handoff and the development process. That’s why we’re here to share the lessons we’ve learned and the systems we’ve built to close those gaps.

Breaking Silos, Building Teams—We’ve covered some common issues and solutions, but now let’s talk about what we did differently. Instead of siloing designers and developers into separate teams, we created integrated squads that promote daily interaction. We also have design system leads who maintain the consistency of components and document everything so the entire team can stay on the same page.

Handing Off Without Dropping the Ball

As we’ve grown, so has our community. Tools like Figma’s Dev Mode, Framer, Webflow, and Storybook have played a significant role in improving collaboration, and we’ve been excited to contribute to that conversation by sharing our experiences and solutions.

Thank you all for being here today. If you want to continue the conversation or see more of what we’re working on, feel free to reach out.