The Interplay of Design and Development
TL;DR: Interplay is the first design tool to enable design and engineering to work seamlessly on the same screens from anywhere in the world, moving closer to production with each iteration.
Why?
Designing digital products has become increasingly difficult in recent years. Applications are more complex, operate on a growing number of devices, with different states, and sophisticated interactions.
Some have advocated that designers should code to handle this complexity, but at Interplay, we believe a better solution is to have designers work more closely with developers. Recently this collaboration has benefited greatly from the adoption of Design Systems and by structuring our teams to work in multi-disciplinary pods. Kaelig puts it best in his inspiring post “Design Systems Ops”:
“The best products are built by teams with great communication bridges between designers and engineers. Whether you’re one or the other, at the end of the day… we’re all shipping software.“ — Kaelig
We love this, but we found that good communication alone isn’t enough. Adam Michela goes even further in his insightful Quora answer to “Are we building the right design tools?”.
“I believe going forward there is opportunity to create tools that blend (rather than bridge) design and implementation.” — Adam Michela
Without a tool that blends design and implementation, we experience the pain of design files diverging from production code, of Design Systems and style guides becoming stale and out of date, and of the end product not accurately reflecting the intent expressed in the original design.
Imagine
Imagine if designers and developers could work together in fast iterative loops, simultaneously working on the same screens from anywhere in the world, moving closer to production with each iteration.
Imagine being able to truly test how a design feels right from the first version of the design. Evaluate each version in multiple states and contexts, and in full fidelity with all of the rich interactions and transitions that are already baked into your Design System.
Introducing Interplay
This is exactly what we have been building with Interplay and we’re really excited to launch our public beta in a few weeks. Here’s a sneak peek some of the things we have been working on…
Designing with real code components
Thanks to the power of code components, we can say goodbye to the days of simulating states and interactivity by duplicating artboards and adding hotspots. Because code components have states, transitions, and events built right in, the prototypes you create in Interplay come with all that good stuff for free. That means real buttons with proper padding and hover states, real form inputs with placeholders, labels and error messages, and proper responsive navigation.
Built to unleash your Design System — or help make it happen
Design Systems contain hundreds (if not thousands) of hard-won design decisions — from fully interactive code components with animations to systems for typography, spacing, colors, and icons. At Interplay, Design Systems are first class citizens. Designers have the latest production code components at their fingertips so their designs automatically inherit all of that goodness and consistency. But it’s not just a one-way thing — developers can update components on the fly and designers can contribute back to the Design System so it continues to grow and mature over time.
Live collaboration and instant sharing
Make changes visually on the fly that can be seen by your team immediately on any device, anywhere in the world. (We LOVE this, and hope you will too!)
Export beautiful code
🙈 We hear you… we’ve seen many design tools try to offer code export but often end up generating a porridge of HTML and CSS. This is because they are trying to convert images or rectangles to code.
When we export code from Interplay, we are really just exporting an arrangement of the production-quality components that you imported. Exports can be customized with templates to suit your developers’ preferred coding style (e.g redux & css-modules/mobx & styled-components/…).
And there’s so much more!
- Layouts — CSS Grid, Stacks (Flexbox), Document Flow, Frame (and wait until you see Auto Grid! 🙊)
- Workflow Integration — import assets from the tools you know and love, be it code (React, Angular, Vue, …) or design tools (Sketch, InVision Studio, Figma, …)
- Data and States — stress test your design with real data.
We are only a few weeks from our public beta launch and we’ll be releasing more information over the coming weeks — stay tuned by following us @interplayapp or registering for early access at https://interplayapp.com
Finally, to all the amazing people that gave us early feedback on the concept, played with early versions of Interplay, or provided insightful responses to our surveys a HUGE thank you 🙌!
Michael (@mkeftz) and Adam (@MrAdamWalters)
Co-founders, interplayapp.com
