Design and develop at the same time

Eden Vidal
Jul 21, 2018 · 5 min read

An introduction to Relate

I’m thrilled to introduce Relate, the first interface design tool that empowers design and development teams to collaborate in the creation of digital products — visually and straightforwardly. It outputs beautiful, semantic code and achieves the objective of creating a single source of truth for both design and development teams.

Put simply, Relate is a professional design tool for teams to create interfaces that run on the browser powered by real code.

Yes, you read it right! We embrace the web paradigm. Relate saves time by creating a direct connection to the medium, enabling the creation of live design systems powered by code, as well as styling, stating, and relating them in an entirely visual way.

Relate utilizes the same code base as developers, so the design work impacts the product rather than merely creating images of it.

It seamlessly outputs HTML/CSS/JS in real time, to virtually anywhere.

The web is maturing

But web design and development have evolved rapidly in recent years. Methods that were once just a convention or “best practice” are now at center stage. We automated processes with the rise of front-end technologies that embraced the notion that “UI is a function of its state” or frameworks that brought new opportunities to the table (the “V” in MVC).

Today, the way we build digital products is in flux , and the job is becoming even more demanding.

And though we are repeatedly saying: “Form follows function;” “Designers should work with developers;” “You should create a design system.”

Many things still feel wrong.

We waste time and money making a broken process work

We’ve used the wrong metaphors

When Leonardo da Vinci sketched, he created in a “fixed position” reality .

In much the same way, artboards, pencils, shapes and generally the concept of “canvas” or “page” locks designers into a “fixed position” mindset. Our predecessors used the terms emotionally; they needed a metaphor from the physical world. When we manually position an element on the canvas, it’s static and without context to anything.

We moved beyond skeuomorphic to flat design for the same reason; we no longer required the physical metaphor.

Clinging to these metaphors hinders us.

We live in an era when our design tools enforce form over content, while the medium we are designing for embraces the exact opposite, and for a good reason. The internet is designed for content, and design for content is design for meaning.

The internet is alive — it breathes, dances, and communicates. By its nature, it’s adaptive, always changing. It tells stories.

We were bridging the gap instead of moving the tectonic plates.

The design objective, of course, is to allow stakeholders to navigate through a series of non-functional images we call a “prototype.” For years, we’ve patched these inherent weaknesses by using the wrong tools that translate our design into a form that developers can understand. We call it the “handoff” gap, and use tools designed for this issue. First, there is a problem with the term — handing off something sounds like passing the responsibility to someone else.

“It’s not my problem anymore, I handed it off to the dev team using… tool X”

Also, there isn’t anything valuable to hand off. Letting the developer copying some CSS is nice, but it’s not in context to anything and making a lot more manual work to the dev team.

Some designers close this gap by reinforcing their skills — learning how to code. But code is essentially a textual representation of functions, making it difficult for most designers to understand (because we’re visual people).

And maybe designers avoided web development because of CSS. Because creating layouts and aligning things didn’t make sense! But now it does, thanks to developments such as CSS Grid (and we have some big plans for this, too).

But designers already understand the importance of grouping elements together, using components, states, and designing systematically.

The “handoff” part is a temporary fix, there is no place for this in the future we are creating.

The processes are interrelated — it makes no sense to divide them.

The real problem is that the design and development teams have worked separately.

They maintain different environments, using two languages and assets to describe the same things. They function redundantly. A stroke is a border, a group is a div, media queries mean responsiveness or different screen sizes and so on. It’s a modern-day Tower of Babel.

Dividing and conquering

With Relate, design & development teams will work together on the same source of truth. Removing the visual work for the developer by precisely providing what she needs to write functionality on top of it.

Our current challenge (which we’ve partially achieved) is what we call Stage. The stage is a highly-intuitive visual editor that supports systematic design while simultaneously outputting code. At the moment, Relate controls and manipulates only the visual aspect of the code — the HTML/CSS.

What’s next for Relate?

Our immediate priorities are:

  • Perfecting the editor so you will be able to create high-end responsive interface layouts (powered by CSS Flex and Grid), manage styles consistently and apply them.
  • We’re completing the foundation for creating a living design system of components, states, and properties.
  • Outputting the code for you as a ReactJS package and syncing it with a Github repository.

Who’s “We”?

We’re introducing a private beta in the coming months to be sure that we refine our tool to meet your precise needs through constant iteration and improvement.

It’s the very beginning…

If you are a product enthusiast, please join our growing waiting list, follow on Twitter, and like on Facebook

References and inspiration


Relate is a new kind of design tool for developing digital…

Eden Vidal

Written by

Designer & Maker @ /



Relate is a new kind of design tool for developing digital products in a very visual and straightforward way. It outputs beautiful, semantic code, too.

Eden Vidal

Written by

Designer & Maker @ /



Relate is a new kind of design tool for developing digital products in a very visual and straightforward way. It outputs beautiful, semantic code, too.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store