I designed the single-border feature for Sketch
I started using Sketch two years ago when one of my professors introduced the new software to our class. Since then, I spent more than eight hours a day working with Sketch, and I can only describe myself as a power user.
Sketch improves version after version, making designing easier and faster. But there is one feature that I started looking for right from the beginning and that I am still looking for: the one side border.
Is it just me?
While trying to understand how to set a border on one side of a shape, I felt stupid and when I feel stupid I search on Google.
So I found two things: that it’s not possible to add a border to a single side, and that I was not alone.
Back in 2013 Diógenes Brito tweeted this question to Sketch:
It didn’t take them long to answer:
After two long years of silence on this question, Daniel Schwartz asked to Sketch the same question:
… and nope, nothing changed in two years:
When Ruben Nine asked this:
Sketch seemed to leave the door open to adding this feature in the near future:
And Sketch, you know what, it was time in 2016, and it’s definitely time now that it’s 2017!
Shadows and their dark side
There actually is a way to work around the problem: inner shadows.
To explain how it works I made a video:
I found that many designers are using this trick, the fastest way to avoid the missing one side border feature. But there are some problems with this approach that are hard to ignore:
- The exported CSS from Sketch or Zeplin is faulty code that you will need to manually change to reflect the presence of this border:
2. When you create two borders with a common corner, one of them will show as being on top of the other:
While with CSS you get this kind of corner:
When I need to add a single side border, I use this trick because it gets the job done and it gets it done quick. But it would be amazing to have a specific feature to handle every different border of a shape.
How I split borders on Sketch
My mission as a designer is to make life easier for people and that’s why I designed a new borders panel for Sketch allowing users to manage borders in whichever way they prefer the most.
In my experience, it is difficult to handle normal and split borders at the same time, so with this solution you can switch from a state to the other using the toggle in the top-right corner.
By default the toggle is set to “normal”, which is the way things are handled on Sketch nowadays.
Switching state from “normal” to “split” takes you to a brand new panel with four layers, one for each side of the shape (top, right, bottom and left).
Here, every side is independent from the others.
Corners are now handled like through CSS, and when exporting the code, it will reflect this design.
With this new borders feature, you can create outstanding fake 3D shapes that work great.
TL;DR
- Sketch doesn’t allow you to apply a border to only one side of a shape;
- The people have spoken and they want this feature;
- Designers currently work around this problem using the inner shadows feature;
- Inner shadows works well on Sketch but creates problems when exporting the CSS file from Sketch, and is not an elegant solution for corners;
- I designed a new Sketch feature that allow you to apply a single border to a shape;
- Sketch, whaddaya think?
What do you think of this project? Which other feature you would like to see on Sketch?
You can also find this project on Dribbble !
If you liked this article feel free to comment and share!
Daje!
Davide Pisauri
