If Sketch 3.7 New Symbol Can Be Like This…

And some new features explain in GIF!

These few days are awesome! Framer launched a new version with powerful Auto-Code, a WYSIWYG feature, super useful and new way to learn to code for designers. Today Sketch has released a new version too, 3.7 with new Symbols, and other amazing features for all of us doing design.

You can read the article by Sketch team about new features here, but I’m still gonna roughly go through Symbols features, which issues you should take note on, and how I wish they would be improved in the next version.

Symbols

Symbols are now faster and they allow you to create nested Symbols (as deep as you want), override images and texts in instances.

When you create a new symbol, there is a new dialog message that will appear. There is an option to organise the symbol you’ve created into a page call “Symbols”.

Recommended always to check the “Send Symbol to “Symbols” Page” for better organisation for all your symbols.

While creating a symbol, if you have checked the option “Send Symbol to “Symbols Page” then the symbol will be organised into the Symbols page. With this new feature, Sketch team has removed the menu “Organise Symbols”. This is very useful for us to have a glance of which symbols we’ve created and also we are able to treat the page as a UI components page, or style guide.

So now it means you can only edit the symbols inside the Symbols page. There is no way to see the symbol updated in the context or at one glance in all the artboards. I also cannot know what is the distance of this symbol to other UI element while editing the symbol. These are some of the restrictions that we need to get use to.

So I have an idea for Symbols page. What if, I double click the symbol from the artboard and it brings me automatically to Symbols page, there I can double click outside of the symbol area and bring me back to the artboard itself, instead of I needing to click on the Return to Instance button. Below is the demo.

If can double click outside the symbol and return to instance, it might speed up our workflow a bit (actually I’m faking this by pressing Return to Instance shortcut key CMD+ESC 😁)

Overriding images or texts in symbol is a very cool feature. But it might take some time if you want to edit the image or text one by one.

Override feature is not that useful every time, at least not for this use case.

From the GIF above, you can see how you can override the value and the image for that symbol without affecting the other same symbol. But if I want to input the whole list with different names, different time, different messages…might take you a lot of time to override. So, only use the override feature when you have a need to do the small changes.

If you want to have multiple profile images, it will take a long time to drag in the images one by one from the folder.

So, I have an idea how to improve this Symbols override workflow. What if the Overrides panel can read JSON files and randomly update the value and image?

Borrow some idea from the Sketch Data Populator plugin 😁

Or another idea is using InVision Craft method to generate new text value or images. This might give the Symbols more powerful features.

Faking this prototype in Photoshop 😂

I haven’t thought further about technical constraints for the ideas above. But what do you guys think? Is it workable for Sketch team? Or you have a better idea? Let’s discuss here!

Missing Fonts

Another maybe small update but a big one for me! Sometimes we forget to include font files for another designer who might be working on the same project. When they open up Sketch without the fonts, everything will become disaster to clean up.

With this new update feature to preserve the missing font, the designer you sent that sketch file to can still work on it (maybe editing shapes, images, but not text) while waiting for you to send him the font files.

Keep in mind, you cannot edit the text if you are missing the fonts. If you would double click on the text to edit and then saved the Sketch file, you will spend a lot of time reverting it back.

If you double click the text with missing font and save and quit the Sketch file, you need to assign the correct font back to it manually.

Resize to Fit Artboard Height and Width

This is one of my most common functions I used when designing for longer page. Previously I used Sketch Mate plugin to fit the artboard height and width, so I think now the Sketch Mate’s developer Florian Schulz can retire the “Fit Artboard Height” and “Fit Artboard” plugin from Sketch Mate.

There are two ways to resize and fit the artboard height. One is, you select the artboard, and you will see “Resize to Fit” button at the right side Inspector panel, click on it and the artboard will fit the layers which are inside the artboard.

You also can find from menu bar Layer > Resize Artboard to Fit and will get the same result. I’ve set a custom keyboard shortcut for it: CTRL+SHIFT+A.

Again, Sketch team have inconsistence menu name for same functionality (previous case is Round to Nearest Pixel Edge = Round To Pixel).

Super useful features, especially designing longer page.

Some others Notable Features and Fixes

• Sketch now remembers the width of the Layer List between windows
• Sketch now remembers if you had the Page Panel open or not (THIS IS SO GOOD!)
• SVG Export features
• New Copy SVG Code
• Tick/Checked is back in contextual menu for Masks

While writing this article, I’ve also found out a bug where the ruler contextual menu should be tick/checked since the Show Ruler is showed. This applies to Show Grid and Enable Layer Guides too.

Before and after. Designers are very hard to please…especially me 😂

A Radical Idea?

This idea has been on my mind for a looong time, and I’d like to share it today! Hope you guys will understand how it can benefit the workflow. So, the question is this: is it possible to open different pages in different windows from a single Sketch file?

Imagine you have one window showing Symbols page, and another window showing your UI design. You can quickly drag and drop symbols from the Symbols window to the UI design window. I think this can help the workflow significantly if the designer is using multiple monitors.

Is it radical or doable? Let’s discuss together 👍

It’s really, really exciting to see the software team constantly improving the tools for the benefit of all of us designers using it.

I’m enjoying using Sketch since day 1 I’ve learned to use it. Hope you guys feel the same! Thanks to the Sketch team and the community! 👏 I hope my thoughts and ideas are helpful to you! Hit the 💚 and share the if you enjoyed this article. It’ll motivate me to write more too! 😁 Thanks!

Follow me on Twitter. If you have a new project you want to collaborate with Minitheory on, you can email or visit us here!
_
Yap Kwang Yik is a UI Designer work at Minitheory, a digital design studio based in sunny Singapore. We make software simple, based on how people think and behave.