Adaptive Text Elements In Sketch
Update: Yesterday, the Sketch team announced that one of their most requested feature is available in the beta version of the app.
They call it “Smart Layout” and it looks A M A Z I N G.
What it also means is that the method in this post will become obsolete (finally!).
A few examples from the web for what's possible:
twitter.com/mds/status/1167145339457069062
twitter.com/svorklab/status/1167350673857482752
twitter.com/gaddafirusli/status/1167157688867835904
Go and check it out > www.sketch.com/beta
This post was first thought at Aug 19, 2016, but never saw the light of day (due to laziness/procrastination/you name it). As time passed, I noticed that people are talking (and even writing Medium posts) about the behaviour I’ll be talking about. So I decided to finish editing the draft and publish it. Yay for me 😋…
It all began with a simple question…
Not a while ago I encountered a small but tedious problem that bugged me ever since. I designed a dashboard interface for one of my clients, and in it was a pretty common ui component; It showed information regarding a specific user with elements such as: avatar image, day of publication and a timestamp. It looked something like that:
As I meddled with the ui, changing the length of the component various times, I was wondering if there was an easier way to change the content, the padding and the length of the entire component without needing to change each element over and over again.
The resizing feature helped a bit when I needed to change the row length. There are many tutorials and posts regarding this amazing feature, like this one or this one that I recommend reading if you haven’t already.
What I really wanted to achieve was a dynamic text elements that will push each other when their size changes. So for example, if I use a plugin like Craft by InVision (or any other plugin that automatically populate data) the user name element will push the date element next to it and so on, as in a real working product.
While discussing a similar issue with Eran Lahav (a colleague of mine who is also an awesome designer 😀), I was determined than ever to find a solution for the problem. I remembered reading an article about the possibility to create dynamic tables with the new resizing feature (introduced in version 39). The way Reony Tonneyck did it was using hidden graphic elements that was used for padding the table content. This gave me an idea to put a hidden graphic element between two text objects. And guess what?
It fucking worked!
So I was actually following Reony’s method to create a dynamic row, but when I sent the file to Eran, he told me that it worked with whatever resizing option you choose for the elements.
That surprised me because I was sure this behaviour is linked to the resizing feature. After digging a bit in the official Sketch documentation, I found out that it’s a behaviour that linked to the symbols overrides feature:
And that’s the original post about this feature:
The thing is, they used a graphic object next to a text object, not two text objects next to each other. And when I tried this method with only text objects, it didn’t work…
After a bunch of tests that Eran and I did, we are pretty certain that when using symbols with multiple text objects next to each other with graphic objects between them, the graphics behavior is like a “guardian” that keeps the text objects from touching each other (see update below).
Update:
It appears that this feature still works in version 44. I also realized that when the distance between two text elements that stand next to each is less or equal to 20px the auto resizing will work. If the distance is more than 20px things will start to break down. There are no “guardians” :)
Now, the problem with overrides, is that real content plugins (like Craft) won’t always work. Except for one (as far as I know of — thanks Eran): Sketch Data Populator by precious design studio. When using the plugin it affects the override section instead of the original symbol content, and it perfectly solve the override populating data problem.
EDIT: Apparently the Craft plugin does support text overrides, so my apologies for the mistake (When I started to write this post back in August Craft didn’t support text overrides, hence the mistake)
Conclusion
This feature is by far one of the most unintuitive I encountered in Sketch, but hey, it’s still better than Illustrator.
To sum up, the one important thing you should consider before using this method is that if you’ll try changing the width or height of the main component, all hell will break loose on you.
I do know that the awesome guys from Anima App are working to improve their plugin to work in a similar way, and it will make the component fully responsive (though when trying my method with their plugin today, Jan 30, Sketch crashed).
I hope this post helped, it’s my first one ever and it took me a while to suit up and write it down. Have an awesome day 😎.
