How to make real inputs in Sketch
Do you remember the last time you had to design form input components in Sketch or another design tool for your your project ?
I do. And I do remember too that it was a headache to specifiy every states, and for each one, design a separate component. And in the end, none of these inputs were actually working, they were all statics, and our developers had to take each one and compile them into a single multi-state React component.
My Sketch file looked something like this..
We created Overlay to help designers and product teams ship their products faster, by converting their design components into production ready code.
It’s already great to be able to generate a static pixel perfect component, coded in React or Vue.js, with flex properties, ready to go to production. But when it comes to dynamic components, like checkboxes, toggles, carousels or inputs, it is an even bigger challenge.
How to convert a fully static input component designed in Sketch, with different states, into a dynamic React or Vue.js component ?
Introducing Overlay inputs
Starting with inputs, we worked hard to find a way to do it inside your design tool (Sketch, for now).
Let’s take this simple input, with a placeholder and a typing different style. In Sketch, i would do it like this :
Now let’s make it one single real input, using Overlay
Step 1 : get your layout ready for export
In Overlay, we use decorators to specify that a group is an input, a text box is a placeholder or is the text when the user is typing.
It looks like this.
- Make a group named @input with :
- a text box for typing value named @value. This one cane be hidden if needed because it exactly overlaps the placeholder.
- a text box for placeholder named @placeholder.
- a rectangle for background
2. add if you need label, icon, but outside the group
Step 2 : export it to your Overlay project
Open Overlay Sketch plugin, select your project and export.
That’s it, you have created a real input in React, Vue.js or Vanilla Html (depending on which framework you have chosen for your Overlay project).
Here it is, you created a real input, in React Sass in this example.
Inputs are a first step and we are working hard to let you create even more complex dynamic components directly from your design tools. And always with a huge focus on code quality.
And even with inputs, we are not done. You still have to export separate inputs to make different states like error or success. We would like to make only one component.
Overlay is now the only design-to-code tool in the market that generates clean and reusable React/Vue.js/Html code.
And it is now public. Just test it here, for free : overlay-tech.com
Côme, Overlay CEO.
