Flatten 2.0 for Sketch
Flatten and mirror layers without destructing and update them like a boss.
What is It for?
There are mainly two uses of this plugin:
- Mirroring artboards and layers without using symbols, and keeping them updated easily.
- Flattening layers without destructing to increase the performance of Sketch significantly.
Some other creative use cases: preview your design in different sizes or in zoomed-out version, create pixelated background effect. There is a section about these in the second half of the article.
How Does It Work?
Flatten plugin converts layers and artboards into images differently than the default flattening feature of Sketch. Instead of deleting the original layer, it keeps it hidden to make it possible to change it later and update the flattened image easily.
There is also an option for keeping the flattened image hidden and the actual layer visible if you need to edit the layer regularly.
When you select a layer or group and flatten it, it adds #flatten tag to the original layer, and puts it into a newly created group with the same name.
This group contains the flattened image, which is created from the original layer. When you flatten the layer or one of its parents again, the plugin recognizes the flattened layers inside via this tag and updates them instead of creating a new flattened group.
Mirroring Artboards and Layers
Things work a little differently for the artboards. When you flatten an artboard, it creates an image layer from the artboard and puts it into the artboard as a hidden layer. It also creates a shared style from this image layer to enable you to use it for mirroring.
Mirroring casual layers is basically the same. The only difference is that it doesn’t create a shared style for you, instead, you create it manually. However, the plugin updates it automatically if a shared style exists.
See All Features in Action
I divided the features into parts to make the steps incremental and easier to browse.
1. Flattening Layers to Increase the Performance of Sketch
As far as I see, there is a considerable performance improvement in the editing mode if you have lots of blurred layers and use this plugin to flatten them. There is a performance comparison at the end of the video.
2. Auto Flattening and Layer Toggling
One thing I didn’t mention in the video is #no-auto tag. If you add this tag to the name of a flattened image layer or original layer, it will disable automated features for this particular layer.
3. Mirroring Layers and Artboards
#stay-hidden: Forces flattened image layer to stay hidden always. This might be helpful if you need the original layer to stay visible and editable always.
Unflatten command: If it’s applied to a flattened group, it reverses it to the original state. If it’s applied to a copy of a flattened artboard image layer, it renames it with the name of the artboard it’s connected to.
4. Customizing Flattening Scale (Quality)
Let’s Get Creative! 🚀
Here some other things you can do with the plugin:
1. Preview Medium Post Header Image in Different Thumbnail Sizes
I’m using my plugin for this for really long time. It’s really helpful when you need to see how your design will look in different image sizes and modes.
2. Create Pixelated Background Effect
Discovered this while implementing the customized flatten scale feature. 🙂
3. Preview Your Design in Zoomed-Out Version
Since there is no separate preview feature in Sketch yet, I always struggle while designing small icons. Because I need to see the icon in original scale and near the other icons to make fine adjustments. You can do that with this plugin now. I have also some plans to make this even easier with new features.
Download the Plugin and All the Examples 📦
You can use Runner to install the plugin or use this link to download and install it manually. And, here the Sketch file including all the examples here.
How did I Develop the Plugin? ⚒
If you’re interested, follow me and stay tuned. I’m planning to write about my experience with some tips and tricks soon!
Support the Development 👋 ☕️ 🍫 😊
The plugin is completely free and open-sourced, but if you would like to support the development and encourage me to develop more features, you can consider to buy me a coffee from this link.
Irrelevant Tip: Play The Witness! 🕹
The Witness is the most amazing game I have ever played — it was Braid before. They are both from the same developer!
It might not be for everyone, but if you like puzzles, metaphors, philosophy and deep thinking, it’s your game! I want to write a detailed post about it — maybe including other similar puzzle games too. Hope I can do that soon, it’s really full of interesting stuff!
