An easy step to improve the overall harmony of an interface is to be consistent when it comes to spacing between elements. It all boils down to having a grid that your design follows. It's not much about the size of each component but more about the spacing in between. It's like the dark matter of your interface that holds everything together. If this empty space follows a well-defined logic, your interface will feel more structured.

As an example, take a module containing a chart, a title, and some values. It's not very important if the module measures 480px in width; the tiny bits matter. If the spacing between elements is based on specific numbers and not some random ones, everything will have a touch of consistency and order.

Additionally, a grid will also help make more informed choices and move forward quickly when laying out your design. Instead of thinking about the distance between two elements, knowing that 8px or 16px are commonly used, you can quickly define the spacing and move forward.

There are many popular grids, and to be honest, it doesn't matter which one you choose. What matters is consistency, that you pick a grid and you stick to it.

Personally, I use the 8px grid. It's a popular one, and I've used it for years. My brain jumps between those numbers: 16, 8, 48, 64, 80, and so on. I would recommend a grid with an increment that isn't too large or too small. You want to see the difference between two increments (8px and 16px, or 24px and 32px). Another popular one is 10px but dividing 10 by 2 equals 5, or adding half of your main nudge equals 15, dividing that by 2, and you end up with 7.5px. Well, you get the idea; I find it less flexible.

As you might have noticed, I used the word "nudge". You can change this value in the settings of Sketch and Figma. Then you can use your arrow keys to nudge your elements around. The "small nudge" with just the arrow keys. And the "big nudge" when you hold down the shift key.

What if you're using the 8px grid and neither 8px nor 16px looks good or is practical. Break the rule and use a 4px spacing, 6px, or whatever works for that specific element. What if 7px is the perfect balance between your icon and text? That is fine!

Another important note is that your team should be in line with the grid. Especially developers, knowing that your design is based on a grid helps them too.

Today we're finally launching Figkit for Figma. Figkit is a wireframe library with a huge collection of components and variants. In summary, this kit will help you:

• Get the design / layout / UX just right.
• Spend less time pushing pixels and more time on determine the most important problem to solve.
• Figure out in broad strokes how to solve it with a collection of components for Figma.

We have created a dedicated website that is presenting the kit in more detail, you can visit figkit.com to learn more about it.

I’m not a logo designer. Still, from time to time I find myself in the process of crafting one and getting a logo is a great feeling. Suddenly your business or idea have an identity, it is happening, it is real.

Search online and you’ll find lots of articles on what defines a good logo. You can buy books on this topic, some of our very own dedicates their lives to this craft. This tutorial though, will only focus on the essentials: I will take you through my core principles that I tend to follow and I promise, they will take you far. So, without further ado, let’s get cracking!

You might have an initial idea of a possible outcome but it’s good to do some research. It will help you create clarity and it can be as easy as answering a few questions.

Let’s take an example, your target audience. Quite often people will say their product or service is for everyone, when in fact it’s an app for millennials living in big cities, in Europe. If you want to make solid decisions, you need to be specific.

Some useful questions to answer:

• What do you want your logo to be associated with?

• Who is your target audience?

• What’s the history behind your brand?

• What’s your vision?

You want the logo to reflect your core values. When it comes to product design we usually say “form follows function” but when it comes to logo design, maybe we can say “form follows identity”.

If you already have a style guide, that’s great. But I’d suggest to focus on black and white to begin with.

Get some dotted paper, it's awesome. Especially when sketching a logo, personally I can’t live without it.

Now just let it go, quality is not important but quantity. Get your timer ready and sketch intensely for short intervals, like 3 minutes. Make it a game and play!

Scan or take photos of your favorite ideas and add them to your design tool of choice, some I recommend:

• Affinity Designer

• Sketch

• Figma

Play with shapes and type, at this stage it shouldn’t be pixel perfect.

Start from scratch or find a typeface that matches with your design, investing in a nice font is totally worth it. I like to support independent type foundries, here’s a couple I love:

• Lost Type

• Mostardesign Type Foundry

• YouWorkForThem

• 25 Classic Fonts

It’s time to refine your logo. Start by defining a grid, I usually go with a multiplier of 8px. Use operations such as "Union" and "Subtract" to merge and simplify your shapes. To make the type crisp you probably need to convert layers to curves and manually snap points to the grid.

Always design @1x. Since everything is vector based you can scale your design and maintain pixel perfect quality. What you don't want is to divide the logo to make it smaller. You'll most likely end up with a blurred result.

Some key points to review:

• Use a grid

• Always design @1x

• Convert type to curves

• Make sure curves are clean

• Combine elements in simple and unique shapes

• Avoid transparency

• Never include photos

Twitter, Facebook and other social platforms uses primarily square profile pictures. Squeezing your logo (icon + name) is not optimal. Most of the time I just go with the icon.

Hope this was helpful! To wrap things up, below are a couple of logos I’ve made:

We want to keep you in the loop, that's why we now have a page dedicated to updates and new releases. It's basically a chronologically ordered list of notable changes we make to our assets, check it out!

Creating symbols in Sketch is a great way to improve your workflow by staying organized and keeping your design consistent. In this tutorial we'll create a symbol inside another symbol, called "nested symbol".

Below is the final result of this teeny-tiny tutorial. What's shown is the same symbol but with different overrides.

We'll start by creating three symbols. Note that each symbol have to be the same size in order for you to switch between them.

Now that we’ve created some symbols, let's place one of them in a new symbol; our master symbol.

And voilà! You now have an awesome nested symbol! This is a very basic version but there’s no limit to how deep you can nest Symbols.

If you have a text layer, an image or a symbol inside another symbol that you don't want to be overridden, simply lock that layer.

Arrows are very useful when working with wireframes or flowcharts but there are no native arrow capabilities in Sketch. The good news is that it’s pretty easy to create one.

Now that’s a beautiful one, here’s what we need to do to make it resizable:

• Put all your layers in a folder

• Select the arrowhead layers

• On the right side in the inspector there is a “Resizing” dropdown

• Select “Pin to corner”

And we’re done. This is a very simple arrow but the possibilities are limitless. Hope this was helpful and happy Sketching!