Sketch Blog

Behind the feature: How we took Smart Layout beyond Symbols (Part 2)

2024-01-11T09:31:03+00:00

In November 2023, we shipped a major upgrade to Smart Layout and in this series, we’re taking a look behind the scenes of how we made it happen. In the first post, the team set the scene and explained how we planned our work. In this post, they explain how they went about fixing issues and improving Smart Layout’s reliability and predictability.

As we laid out our plan to free Smart Layout from Symbols and make it available everywhere, we knew we had to make it… well, smarter.

For a long time, we’ve heard from customers — and experienced ourselves — that making a change to a Symbol with Smart Layout could cause something to move when it shouldn’t, or the opposite. Worse still, it could happen inconsistently.

If we attempted to make Smart Layout available everywhere first, and tackle these problems after, we’d only expand where they could happen and expose them to even more people. It would also make them much harder to fix later on.

Creating a larger surface area for problems, with more designs and people affected by them (as well as any further changes we made), would frustrate and disappoint customers who were looking forward to Smart Layout improvements. This was unacceptable to us, even if it meant delaying those improvements a little longer.

Identifying the issues

But what exactly were these problems? How many distinct ones did we have? When did they happen? What caused them? And could we spot any shared root causes underneath them all? This called for some detective work.

We started collecting many of the issues we’d accumulated and poured over them, one-by-one. In each case, we looked at sample documents from customers and broke them down to their bare essentials, identifying factors and steps that led to unexpected issues.

We started this work as a larger group; with colleagues from our Support team, as well as our co-CEO (Smart Layout’s original lead developer), and everyone in the project team. This helped us build shared language and understanding through every role in product development. We then continued as a smaller group, worked through 50+ issues, organizing them by severity and problem area.

At the end of a long and thorough investigation, we found a few problem areas to focus on:

Inconsistent rules between different directions. As we mentioned in our first post, Smart Layout looks at how layers overlap along the layout direction. With this, a design with a left-to-right layout should work exactly the same as a mirror version with a right-to-left layout. However, this wasn’t always the case, which made the feature less dependable.
Nested layouts along the same axis. Designers can nest Smart Layout containers inside each other, and Smart Layout allows us to place layers freely in relation to each other. This results in scenarios where multiple Smart Layout containers appear side by side, but with different directions along the same layout axis. In these cases, we didn’t always respect these different directions.
Cleaning up space when removing layers. Removing layers from a layout presents an additional challenge. We not only have to account for space the layer itself took up, but also the space around it, otherwise the design will be left with excessive space and look wrong. While this did happen, it didn’t quite match expectations.

Beyond these key areas, we also had a grab bag of individual issues, some of which we identified as being important enough to fix on their own.

Setting up a safety net

Smart Layout has been around for over three years, finding a home in countless documents and Libraries used by large teams. This, combined with its freeform arrangement characteristics, meant we couldn’t just start making changes — even if they would be for the better. The risk of causing large-scale unintended side-effects was just too high.

To make sure we took two steps forward and no steps back, we wrote lots of more performant and easier to debug unit tests. This guaranteed that we wouldn’t inadvertently undo any current correct expectations. With these in place, as we implemented changes that made Smart Layout more consistent, predictable and easier to understand, we could keep everything compatible with how designers might’ve set it up.

As we fixed each individual issue, we not only fed the original scenario itself into the testing suite, but also variants for different layout directions, as well as related and subtly different layouts. At the end of the project we ended up with more than 400 additional unit tests for Smart Layout.

Diving into the detail

With our testing suite giving us a safety net for changes, we began tackling our key problem areas one-by-one. We started with the problems of consistent behavior across directions and nested layouts with different directions. These went hand-in-hand and meant we could tackle space cleanup — a much more isolated problem — later.

Problem area 1: Creating layout consistency, regardless of direction

The logic of Smart Layout doesn’t separately deal with left/right or top/bottom, but rather whether a layer is ahead or behind on any given layout direction. In other words, you’d expect a left-to-right layout to work the same way as a mirrored version with a right-to-left layout.

In a left-to-right layout, a layer overlapping the left edge (the leading edge) of the layer being changed would stay as-is. If it overlapped the right edge (the trailing edge) of the layer being changed, Smart Layout would resize it. You’d expect this to be the opposite for a right-to-left layout, but it wasn’t. In a right-to-left layout, we were always applying the rules based on whether something was to the left/right and totally ignoring that the layout direction was in reverse.

This was one of the areas where we had to weigh up breaking layouts in existing documents versus introducing a more consistent and predictable behavior. We went for the latter. Now, we always resize layers overlapping the trailing edge and always move layers after the trailing edge, according to the layout direction.

Right-to-left layouts now behave like mirrored versions of left-to-right layouts

Problem area 2: Improving layout of layers overlapping along the layout axis

Our second area of focus was layouts with multiple layers overlapping along the same layout direction. Previously with Smart Layout, it wasn’t possible to have horizontally centered or right-to-left layouts inside another horizontal layout. This was a limitation that many customers experienced, preventing a whole range of possibilities with Smart Layout — and we knew we wanted to fix it.

Take a look at the example below to see what we mean. In this example, we have a table of columns with an overall horizontally centered layout. In the right column, we have a cell with a left-to-right layout. This works fine. In the center column we have a cell with a right-to-left layout for numbers, and in the right column, a cell with a centered layout for ratings.

Making this example work properly meant we had to improve Smart Layout’s logic to calculate and adjust the position of individual layers within these nested layouts to not only make nested layouts like this possible, but also make sure everything ended up where you’d expect.

Making nested layouts like this work as you’d expect involves three separate actions: resizing, repositioning and moving.

Problem area 3a: Eliminating spaces between hidden layers

Our next problem area to solve was what happens when you hide a nested Symbol instance within a layout — and specifically, how we eliminate the space between layers when you do this. In our previous implementation, when you hid a layer, we used the space after that layer along the layout direction to calculate the position and dimension changes of other layers. This resulted in two issues:

When you the hid last layer along the layout axis, there is no space after it along the layout direction to work with. And if the layers inside the Symbol had padding to the symbol’s bounds, when you hid the layer at the trailing end of a Symbol, we’d clear any space after it, but this would often be padding that you’d want to keep.
The behavior was different for hiding the first and last layer in a stack-like layout, so changing the layout direction resulted in a different behavior. This was not desirable.

In a stack-like layout, with spacing between each layer, one solution could be to remove the space ahead of the layer you’re removing. However, this approach becomes problematic when you remove two or more layers. In this case, you’d need to remove the space ahead of both layers, to keep spacing consistent. This behavior isn’t easy for users to predict, especially once you take different layout directions into account.

Instead, we tried removing the space(s) which were smallest in size. It turned out that this was not only quite simple to implement, but also had the very interesting side effect of preserving the relative distances of the remaining layers! As bonus, this also preserves the Gestalt principle of proximity.

The example below shows this in action. Here we have a toolbar with three sections of items. Each section has a large space between them and smaller spaces between the items within it. In our previous iteration, the space we removed could be between the items or outside of them (depending on the item you hid), which would change the toolbar’s appearance in an unpredictable way.

Now, by removing the smallest adjacent space(s), hiding a single item in the toolbar group still keeps the grouping intact and removing all items of a group still keeps the adjacent groups separated. Better still, this approach has a predictable behavior regardless of the layout direction!

Removing the smallest adjacent space(s) when hiding layers keeps the correct spacing in layouts like this.

Problem area 3b: Preserving space when hiding layers

We were happy with our new approach to cleaning up excess space, but we also heard from customers whose layouts relied on removing a specific space — and not always the one our new setup removed. Dealing with this request presented a challenge for Smart Layout’s core principles.

As we outlined in our first post, a core principle of Smart Layout is to have minimal setup, and instead infer intent from the way a designer has set up their layout. When additional controls are necessary, we prefer options people already know, such as the Pin to Edge and Fix Size constraints. These are already available to any layer within a group, but also work in the context of Smart Layout.

We know the solution to the problem of preserving a specific space was finding some way to choose if a hidden layer preserves its space or not. We looked for a good heuristic to determine when to keep a hidden layer’s space, and for existing options that designers could use to set this, but nothing worked well for us. Ultimately, we decided to add a new explicit Smart Layout option — a checkbox labeled “Preserve space when hidden” — available to Symbols inside Symbol instances.

While we believe in having strong principles driving our product design philosophy, it’s important to take a non-dogmatic approach and remain flexible when that philosophy begins to impose limitations.

Sometimes you’ve just gotta ship a checkbox.

Shipping our improvements

While our improved and extended testing suite gave us confidence that we weren’t regressing in any way, we wanted to make sure our improvements aligned with designers’ expectations — starting with our own design team.

We placed our work in each area behind a corresponding feature flag in our nightly Sketch builds, which our designers use in their day-to-day work. With this, we could expose our changes and assess their impact. When problems occurred, we could toggle feature flags to easily find the culprit area — and give our designers an escape hatch while we fixed it.

Even with all of these safety nets in place, Smart Layout’s ability to work with any arrangement meant we couldn’t possibly account for the astounding variety of scenarios our customers could put it through. We knew we wanted to get this update into the hands of as many people as possible, but just like we did internally, we wanted to offer an escape hatch for anyone experiencing issues.

Our first ideas was to ship these updates in Beta releases only, but our Betas require effort to opt-in. Instead, we added a new Experimental Features settings panel to v95 of the Mac app. This allowed designers to try out work-in-progress features, share their feedback via the community forum, and switch them off whenever they needed to. We released our work under the Better Smart Layout Reliability feature option and, knowing that it was easy to switch off at any time, enabled it by default for maximum exposure.

In the end, negative feedback on this update was minimal, with very few regressions, which is exactly what we’d hoped for. Now, with the foundations of Smart Layout in a much better place, we could finally crack on with the final and most-anticipated stage of this project: taking Smart Layout out of Symbols, and bringing it to Groups and Artboards — but that’s for our next post.

To keep up with series, keep an eye on the blog or follow us on X or Mastodon for updates.

Meet the Maker: Matthew Skiles

2024-01-08T15:29:28+00:00

In our Meet the Maker series we meet with designers who push Sketch’s limits, and find out what drives and inspires them in their work. Today we’re chatting to Matthew Skiles, an icon and visual designer.

How did you get started using Sketch?

I started using Sketch back in 2017. At the time I was designing a lot of websites, and was hearing from everyone about how much better Sketch was at designing for the web than using Photoshop.

I was pretty resistant as first, as I didn’t quite see why I needed a new tool. But once I actually tried designing in Sketch, I fairly quickly realized how much better and faster of a tool it was for creating not only websites, but all sorts of designs.

From there, I found more and more parts of my design process could be done better in Sketch than in other apps. For years now I’ve used Sketch every day — and wouldn’t want it any other way.

We needed an app icon design for a Mastodon app called Radiant. After exploring a bunch of ideas, the campfire stuck out the most: a mix of semi-3D elements that don’t draw too much attention to themselves, so they look right at home on your phone.

Matthew’s icon for Radiant - made in Sketch.

I wanted to have the icon feel both cozy and warm, and have a vibrant energy to represent the communities you can find and interact with on Mastodon.

What tools and features in Sketch do you use the most?

Gradient Fills and Gaussian Blurs — so much magic can come from those two.

What advice would you give to anyone looking to create something similar to your designs?

Start with good base shapes. If you’ve got badly drawn or ill thought out groundwork shapes for your design, no amount of layer effects or fancy gradients can fix it. So spend some extra time on shapes early, making sure that you’re happy with the canvas that you’ll be applying layers of paint to.

Meet the Maker: Duncan Horne

2024-01-08T15:00:53+00:00

In our Meet the Maker series we talk to designers who push the limits of our beloved app, and find out what drives and inspires them. Today we’re chatting to Duncan Horne: a freelance icon designer, as well as a front-end developer and “some other things in between”.

How did you get started using Sketch?

I first came across the app in around 2014 when I started my first design role with a software company. I had just managed to nab an invite to Dribbble, and a lot of the work I was inspired by appeared to be made using Sketch, so I decided to try the app out myself.

I’ll always remember the time I moved from using a Windows PC to my first G4 iMac in 2003. I fell in love with the dock straight away. The way icons were treated and the detail they portrayed was such a breath of fresh air. This is probably the root of my love for app icons. Nowadays designers such as Gavin Nelson, Matthew Skiles and Michael Flarup are a massive source of inspiration — hopefully one day I’ll be able to see myself on a level playing field with them.

Duncan’s Wolverine illustration — made in Sketch.

I’m a massive comic book fan, and these are the other large source of inspiration to me when it comes to the illustrations I produce, whether it be the artwork and drawings inside or the textual title treatments on the cover. I can always find something in every issue that gives me a spark to create something of my own.

In general, though, I just love things that look nice, whether it be something made by a designers and artists, or a particular form or scene in nature.

What tools and features in Sketch do you use the most?

I use strokes and gradients a lot, and time and time again I find myself sifting through the different Blend Modes to see what works best. I frequently use Blur Tools too — I think sometimes even a very slight blur can give a design a lovely soft effect that makes it look just that bit more professional. Oh, and let’s not forget the trusty Vector Tool!

What advice would you give to anyone looking to create something similar to your designs?

I think the best advice I can give is to copy creations that you love. If you see a really cool icon design with a crazy effect, try and recreate it yourself. Even if you think you might have to use different tools to the original, give it a go. You’ll undoubtedly learn something new and gain another arrow in your quiver along the way.

Sketch in 2023: What have we been up to?

2023-12-12T10:19:44+00:00

As 2023 draws to a close, it feels like a good time to take a look back at everything we’ve shipped in Sketch over the past 12 months — and there’s a lot to cover! So, let’s take a tour of what we’ve done this year.

Looking for a TL;DR? Get all the headlines in our two-minute recap video.

Taking a giant leap with Smart Layout

One of our goals for the Mac app in 2023 was to take a major leap with Smart Layout. As the year comes to an end, we’re pretty happy to say we’ve done just that.

We started by making Smart Layout’s existing behavior more reliable and predictable, especially how spacing collapses when you hid a nested Symbol. We also improved behavior for different layout directions. Then, we shipped a new experimental features menu — giving everyone a chance to try and share feedback on our future Smart Layout improvements.

Throughout the year, while we tackled updates in other areas of Sketch, our Smart Layout work continued. We polished up what already existed and honed in on our goal; to not just make Smart Layout more reliable, but break it free from Symbols.

In November, we released a major update and our biggest leap with Smart Layout yet. Smart Layout is now available wherever you need it — from simple groups, to entire Artboards. It opens up a whole new world of flexibility and convenience, all while automatically preserving your layout as your designs evolve.

Aside from making Smart Layout available everywhere, we also made it easier to use. We added more keyboard shortcuts, updated layout settings, improved Foresight support (for previewing changes), and we made it possible insert a layer into a layout simply by dragging it into a group.

We’re proud of what we’ve achieved with Smart Layout in 2023 — the results speak for themselves — and we owe a lot of thanks to the brilliant forum members who gave us invaluable feedback along the way. Thank you!

Closing the feedback loop

For a long time, we’ve had a simple way of sharing feedback in Sketch. You’d share a link to a design in the web app and collaborators could leave feedback as comments in a sidebar. This year, we thought it was time to take things up a notch.

Today, you can give, receive and discuss feedback in the Mac app as you’re designing, in our View & Mirror app on the go, and of course in the web app. Better still, you can do it all right in the context of your designs — by pinning those comments directly to the Canvas.

For clients and collaborators, annotating designs like this is far more efficient than taking screenshots and sharing feedback via email. For designers, seeing comments on the Canvas in the Mac app, makes it effortless to work with feedback without context switching.

To truly close the feedback loop, we added the option to resolve comments. Not only does resolving comments hide them from the Canvas by default, making it easier to view or edit designs themselves, but it also serves as a clear indication to your collaborators that you’ve considered their comments and closed the discussion.

Bringing Sketch to even more screens

2022 saw us ship an all-new iPhone app which went a lot further than our previous efforts, giving you access to every document in your Workspace from anywhere. Better still, those documents are always up to date with the latest version.

With Sketch — View & Mirror, there’s no need to connect to your Mac or make sure you’ve transferred a document with the latest changes. They’re always there, whether you’re catching up on the latest changes while you travel, quickly sharing feedback, or demoing the latest prototype to a client.

For our next step, we wanted to bring View & Mirror to the iPad. But it wasn’t just a case of scaling up the iPhone app. We went all-out and built a full Canvas view for the iPad. This was no small feat, but we’re incredibly happy with the results — being able to directly navigate through your designs like you would in the Mac app, on a large iPad Pro screen, is really quite magical.

We also spent time on feature parity, adding full canvas view to the iPhone and document mirroring to the iPad. Combine this with support for Apple’s handoff feature, which makes it easy to open the document on your iPhone or iPad that you’re currently editing in the Mac app, and mirroring has never been more convenient — or reliable!

To wrap things up, we added offline mode, so you can keep on viewing a document on those train journeys with patchy Wi-Fi. Finally, we made it possible to open and browse local documents you keep in Apple’s Files app (or a third-party service like Dropbox).

Building an even better Workspace

Storing documents in your Sketch Workspace comes with a lot of benefits. Aside from making it easy to access your files anywhere you sign in to Sketch, it unlocks features like real-time collaboration, annotations on the Canvas, developer handoff, and more. With that, we wanted to spend time this year making Workspaces even better.

If you make full use of your Workspace, it likely means you have a lot of files to browse through. To help with that, we added Collections — another level of organization inside your Projects. Much like Projects, we designed Collections to be as workflow-agnostic as possible, so you can group and organize documents in any way that makes sense to you.

On top of Collections, we added new filtering and sorting options to the web app, making it easier to find the exact document you need. Meanwhile in the Mac app, we introduced a redesigned save dialog, which takes full advantage of Collections and adds better search, navigation, and previews.

Back on the web app, we gave document share settings a major overhaul. The redesigned modal has three clear tabs, making it easier to set who you share your designs with, and what they can access.

Introducing Figma imports, Templates and more

Among some of the bigger changes we’ve made to Sketch during 2023, we’ve made plenty of quality-of-life improvements that are worth talking about. Here are just a few of them.

At the start of the year, we added support for importing Figma files. Now, switching tools is easy as dragging your .fig docs onto our app icon. We also open sourced the underlying file converter for others to use and help us improve on.

While Sketch’s infinite canvas offers infinite flexibility, it can also spell infinite stress if you’re not sure where to start. To help, we added over 200 design templates, covering everything from product mockups to Kanban boards. As well as being handy for beginners, they’re just as useful for saving time on creating common assets like social posts.

You can also now mark documents in your Workspace as templates that everyone you collaborate with can use. Creating your own templates can dramatically speed onboarding for new team members with a consistent base for new files.

Creating your own Workspace templates pairs nicely with a new option we shipped to enable Libraries on a per-document basis. Together, they mean you can set someone up with the right document structure and just the Libraries they need, so they’ll be able to quickly find and use the right Symbols and styles in their designs.

For those of you who care about naming your layers, we’ve added powerful multi-layer renaming. With modifier tokens, options to match and rename portions of layer names, and even regex support, there’s a lot of flexibility here and the potential to save a lot of time, too.

Finally, we’ve made a some big improvements to selection and dragging — there’s a lot to talk about here (so much we made a whole video about it) — from additional indicators when you’ve selected layers within a larger Symbol, to being able to hold X to drag a marquee selection without moving the layer you’re currently hovering over. You’ll really feel the difference here.

Coming back to the Mac App Store

There’s so much more we could cover in this post, but just one more thing we have to mention. We’re very excited to be back on the Mac App Store. This was a long time coming and we’re happy to offer another choice when it comes to getting Sketch, alongside our own subscriptions and Mac-only licenses.

Apple were also kind enough to give us a write-up, detailing what they love about Sketch — check it out!

It’s been another busy year, and we’re proud of what we’ve been able to ship. We’ll be back in 2024 with plenty more. In the meantime, thank you for all your support and for continuing to make incredible things with Sketch — we love seeing the work you do.

As ever, we’re over in the community forum chatting all things Sketch — whether you need to some help, you’ve got an idea or a feature, or you just want to share something you’ve made, we’d love to see you there.

Meet the Maker: Lucas Haas

2023-12-11T13:03:32+00:00

In our Meet the Maker series we talk to designers who push the limits of our beloved app, and find out what drives and inspires them. Today we’re chatting to the talented Lucas Haas who is a UI Design Lead at BMW Group — and was recently commissioned to recreate the new logo* for Globetrotter (pictured).

How did you get started using Sketch?

I first used Sketch back in 2014 because a friend mentioned it. After that I simply fell in love and it is my weapon of choice since then.

When I was a kid, I had an iMac G3 running Mac OS X Panther (I am that old). And the Mac icons back then were an actual craft. I was always in awe looking at them. I wanted to recreate them. I think Sketch made that process a lot easier.

Globetrotter’s new icon, created by Lucas and made in Sketch.

What tools and features in Sketch do you use the most?

It is so easy to achieve visual effects with Sketch. The gradient tool is top notch, and the multiple blur options make it even better. The flexibility in mixing styles and its variants is superb.

What advice would you give to anyone looking to create something similar to your designs?

Question everything, even if you see a 2px border instead of 1. Question it, copy it, modify it, try it yourself.

* The original Globetrotter icon was created by Shihab Mehboob

Meet the Maker: Volodymyr Kondriianenko

2023-11-29T12:53:31+00:00

At Sketch we’re constantly surprised at how designers push the limits of our beloved app. So, starting today, we’re going to meet a few of them, tap into their knowledge, get inspired — and share their insights. We’ll kick things off by chatting to Volodymyr Kondriianenko, Staff Product Designer at Edvoy.

How did you get started using Sketch?

I started using Sketch in 2015. Moreover, I was one of the first designers in the company who started to make mockups in Sketch instead of Photoshop. I was a strong supporter of Sketch in the past. Like today, too.

My curiosity and desire to switch context. As a senior product designer, I work mostly on big, complex projects. Sketch gives me the possibility to create more artistic things like icons and GUIs for apps. It is a very relaxing experience! Almost like meditation.

I want to make something similar to physical objects in Sketch. Like many designers, I adore industrial design. So, real things greatly influence my design. I’m a big fan of stationary, music hardware, cameras, and overall nice-looking stuff.

Volodymyr’s MiniDisc illustration — made in Sketch.

What tools and features in Sketch do you use the most?

Complex fills, inner shadows, strokes for icons. Symbols and color variables for UIs.

What advice would you give to anyone looking to create something similar to your designs?

Play around with various tools. I use Blender and Spline for lighting and material references, markers to understand how colors work together. Try to use different Sketch tools like gradient fills, complex shadows, add textures and noise. The main rule here – do not limit yourself! It is a creative process, after all.

Behind the feature: How we took Smart Layout beyond Symbols (Part 1)

2023-11-09T13:05:46+00:00

We’ve just released a major update to Smart Layout, taking it far beyond its roots in Symbols. This latest update builds upon an earlier one that made Smart Layout more reliable and predictable, along with related enhancements to Smart Distribute.

This was a long time in the making and, in this three-part series, the project team will take a deep dive into these updates, from the challenges they faced, to the work that led us to today.

We introduced Smart Layout to Sketch in late 2019, building upon Symbols and Libraries, with the aim of making Symbols more flexible:

With Smart Layout, you can say goodbye to manually resizing Symbols to fit their overrides, or building multiple Symbols within the same design, just to accommodate different sizes of the same component. Now, Sketch can handle all of that.

Simply set your Layout properties for your Symbol source and it’ll resize automatically whenever you edit an override in one of its instances. Better still, Smart Layout maintains the padding and spacing between layers in your Symbol as it grows in the direction you’ve set.

The premise was simple, but the goal was ambitious. Right after launch, we saw plenty of customers adopting Smart Layout and make it a fundamental part of their work. Over time, we managed to ship a few improvements while we focused our attention on other heavily requested features.

Recently, we decided to come back to Smart Layout and take it a big step forward. We knew it wouldn’t be a trivial effort (and it wasn’t!), but it was important and necessary.

In order to understand the difficulties we came up against, we must take a step backwards and understand the basics. What is Smart Layout, after all? And how does it actually work? Let’s break it down.

What Smart Layout is — and isn’t

Let’s start by understanding what Smart Layout actually is. It’s based on three key principles:

Minimal setup. It asks the designer for one thing only: how is this design laid out? There’s a choice of two orientations — horizontal or vertical — each with three choices of where to anchor the layout — left/center/right or top/middle/bottom, respectively. These choices set the layout’s axis and direction properties.
Freeform arrangement. Designers aren’t limited to a specific type of layout. Layers can be placed and spaced in any way designers want: laid out in a stack, side-by side, fully or partly overlapping, or a mix of some or all of these at once, with any amount spacing between them.
One single system. It takes care of two key tasks of managed layout systems at once. First, layers must adapt to layers contained within: such as a button, which in its simplest form is a text layer surrounded by a rectangle. Second, layers must adapt to adjacent layers: take two text blocks laid out vertically, where the bottom one must move down as the top one grows.

To better understand this, it might be helpful to compare Smart Layout to layout systems that are strictly stack-oriented. With these, layers typically must be arranged in single row or column (often with strictly even spacing without exceptions) and must be complemented by other systems for layer containment, since overlaps aren’t possible (style-able containers with explicit padding).

We designed Smart Layout so it accommodates but isn’t limited to stack-based layouts.

How Smart Layout actually works

The job of Smart Layout, as with any other managed system, is to respond to changes to a given layer by manipulating other layers in a way that respects the user’s prior choices and intention.

To do that, Smart Layout considers three inputs:

The layout chosen by the designer. What are its axis and direction?
The change that was made. Did the layer(s) grow or shrink, or disappear?
The current state of the design. Which other layers are in or adjacent to the changed region, and what’s their spatial relationship to the changed layer(s)?

While the first two inputs are very simple, the latter can be extremely complex.

The freeform arrangement and low explicit setup characteristics that make Smart Layout unique also make it uniquely challenging to develop. We have to evaluate the spatial relationship between the changed layer(s) and other layer in their immediate context to infer the designer’s implicit intent from their design. (Trivia fact: Inferred Layout is the original development name of Smart Layout).

Spatial relationships between the reference layer and other layers, and actions taken for each.

When doing this evaluation, we have to consider:

Six possible spatial relationships between each unchanged layer and the changed layer(s) along the layout axis: it may be before its leading edge, overlapping its leading edge, surrounding it, surrounded by it, overlapping its trailing edge, or after its trailing edge.
Seven possible combinations of the three resizing constraints — fixed size, pinned leading edge, and pinned trailing edge — applied to each unchanged layer along the layout axis.

Together, these represent 42 possible combinations for a given layer change for each unchanged layer in the hierarchy level of the changed layer. Plus, Smart Layout works recursively — changes to nested layers lead to changes up the hierarchy, as groups adapt to their size of their contents.

While this evaluation can be quite complex, any change in any scenario results in just one of only three consequences for an unchanged layer: move it, grow or shrink it, or do nothing.

Even simple layouts will often contain different spatial relationships and lead to all three actions.

Additionally, if the change that was made was that a layer disappeared, we also need to consider what to do to the space adjacent to that layer. We’ll go into this in more detail in our next post.

Finally, we must consider the direction along the layout axis. Smart Layout is in fact direction agnostic, always working left-to-right for horizontal layouts and top-to-bottom for vertical ones. If one of each axis’s other two directions is used, it simply compensates for that by offsetting each element which has Smart Layout applied to it, by half or the full amount of the total change. However, for changes to layers overlapping along the layout axis and some layout directions, we carefully adjust the position of individual layers, too.

The challenges we faced with Smart Layout

As we looked to improve Smart Layout, we were faced with three main challenges.

Smart Layout’s outcomes could be unexpected and inconsistent. Simple cases were fine, but its ability to work with any layer arrangement means there’s an infinite number of possible scenarios, and thus more chances it may fail to infer the most expected outcome. Ultimately, it fell below our standards, and it needed to become much smarter and more reliable.
Smart Layout was not available to groups outside of Symbols. This was by far one of our most requested features, and it was leading people to create Symbols simply to take advantage of Smart Layout — which comes with its own set of tradeoffs.
The popularity of stack layout systems created an expectation mismatch. It’s only natural, given the popularity of these systems, for people to expect that a key managed layout feature called “Smart Layout” would be our implementation of a stack layout system. Even if it’s not, we needed to better accommodate that expectation when it’s used in a stack arrangement.

On top of this, we had some aggravating factors.

Smart Layout’s ability to work with any layer arrangement also mean that changes to its logic may be risky, since it’s hard to predict with complete confidence what the full extent of the consequences of a change could be, when looking at any given scenario in isolation.
Since it’d been launched a few years prior and become popular, Smart Layout was ever-present in documents, and particularly in Libraries which are distributed to many documents across the workspace, and sometimes outside of it. This large usage base meant that any regressive changes we made could have vast implications and be highly disruptive for many.

The challenge was a tall one, so it was time to assemble a team and form a plan.

The road ahead

While Smart Layout seems simple on the surface, we’ve now seen how there’s a fair amount of complexity behind the scenes. With this in mind, we knew we needed one consistent team throughout this effort, who could all develop familiarity and expertise with the system. We assembled two full-time engineers, plus one QA, one PM, and one designer supporting it alongside their other ongoing projects.

Our ultimate goal was to bring Smart Layout to groups and give special consideration to its use in stack-based layouts, but we couldn’t get there overnight. We put a plan in motion that allowed us to build towards that goal piece by piece, while bringing some necessary enhancements along the way:

First, we’d make Smart Layout more reliable, but still limited to Symbols. It was simply not acceptable to bring Smart Layout to groups before we improved its core logic. We knew that doing so would only expose its deficiencies in more scenarios, which would rightly frustrate users. Plus, a wider install base would only make it harder for us to improve it in the future.
In parallel, we’d also improve our stacking features. These features — Tidy and Smart Distribute — have existed for some time, and we knew they’d play a role once Smart Layout arrived in Groups, since they naturally help to make and manipulate evenly-spaced stacks.
After this, we’d bring Smart Layout to groups. This would be enough of an effort on its own, since groups don’t have the limitations that Symbols do, allowing designers to freely resize or delete any of its layers, or inserting new ones altogether.

We had our work cut out for us, and we knew it’d be a long journey, but an important one.

In the next post in the series we’ll describe how we made Smart Layout more reliable, and in the third post we’ll conclude the journey by looking at what it took to finally bring it to groups.

To keep up with series, keep an eye on the blog or follow us on X or Mastodon for updates.

New in Sketch: A major upgrade to Smart Layout

2023-11-07T07:45:00+00:00

After a few releases as an experimental feature, Smart Layout is now available for groups and Artboards. With it, you’ll get more flexibility and convenience, whether you’re designing cards, menus, buttons, or just about anything you want to automatically adapt as you make changes.

As well as making it available wherever you need it, we’ve made improvements across the board with Smart Layout that we think you’ll love. Let’s dive into them…

Made for Symbols, destined for more

Before we take a look at what’s new, let’s take a step back and recap on what Smart Layout is and does.

We launched Smart Layout back in 2019 to take some tedium out of design work. At a basic level, Smart Layout works to keep spacing within Symbols consistent, whenever you make changes to their content. For example, if you edit the text on a card, Smart Layout resizes it for you, keeping spacing within it just as it was before.

Smart Layout automatically resizes layers within a Symbol, keeping spacing consistent as content changes.

Limiting Smart Layout to Symbols, though, came with some trade-offs. First, it led to lots of people creating Symbols in cases where a Symbol wouldn’t really be appropriate at all, just to use Smart Layout. Second, by design, Symbol instances offer limited editing capabilities, which can be frustrating if all you wanted to use was Smart Layout.

Understandably, one of the questions we heard the most about Smart Layout was, “Can’t you bring it to regular groups?” Well, now we’ve done just that.

Smart Layout: Now in groups and Artboards

If you’re familiar with Smart Layout, using it with groups and Artboards is easy. And if you’re not familiar, it’s still just as easy. Select a group or Artboard, set its layout in the Inspector, and you’re done. Now you get Smart Layout’s automatic resizing with full control over what you can edit on the Canvas.

You can drag and drop layers into a group with Smart Layout and let Sketch figure out the rest.

Smart Layout will pick up on almost any change you make within your groups and Artboards. Along with adjusting content like text, you can change text properties, delete, resize, scale or duplicate layers, or swap Symbols of different sizes. Smart Layout even helps out if you drag a layer into a group, making room for it and adjusting everything else around it.

If you’re the kind of person who prefers to get hands-on to learn about these things, we’ve made an interactive Smart Layout tutorial in Sketch for you: grab it here.

Great on stacks — and that’s just the start

We know a common use case for Smart Layout is with stacks of evenly spaced layers, so we’ve paid extra attention to this scenario. If you select a layer in an evenly spaced group, you can easily reorder layers or adjust the spacing between them using the Smart Distribute handles, while Smart Layout continues to resize everything as necessary. If you duplicate a layer within an evenly spaced group, Smart Layout will take care of including the correct, consistent spacing, too.

Smart Layout plays nicely with stacks, paying particular attention to spacing when you duplicate layers.

Smart Layout isn’t confined to stacks, though. From the very beginning, Smart Layout was built to adapt to your design, rather than forcing your design to adapt to it. That means all kinds of layouts, be it ones with unevenly-spaced stacks, layers placed side-by-side, or even overlapping layers, will work here. With that in mind, this update includes plenty of work to make Smart Layout more predictable and reliable, especially in these scenarios.

The small things add up

To finish things off, we took this opportunity to add a handful of conveniences to Smart Layout that make it more enjoyable to work with.

You can now set or change Smart Layout for any selected group or Artboard with a new, two-step shortcut: ⌘L followed by ← H → ↑ V or ↓ to set your layout direction. Better still, if you use this shortcut on a selection of ungrouped layers, we’ll also group them for you.

If you need to tweak a layer without affecting the other layers around it, you can now pause Smart Layout with ⌥⌘L and do just that. Once you’ve made your changes, you can clear your selection to resume Smart Layout once again.

You can now pause Smart Layout to make a quick change without anything automatically resizing.

Smart Layout now also supports Foresight, giving you a quick way to see how resizing a layer in the Inspector will affect other layers around it.

Finally, converting a group or Artboard into a Symbol (or doing the reverse) will include any Smart Layout properties. So, you can iterate on new components for your design system freely on the Canvas in groups with Smart Layout, and convert to Symbols when it’s time to add them to your Library.

These improvements to Smart Layout have been a long time coming (look out for a blog post later this week that goes behind the scenes and explains more about this) and we could not have done it without the invaluable feedback from our friends in the Sketch Community Forum. Thank you!

We hope you’ll enjoy Smart Layout beyond Symbols and the new opportunities it opens up in Sketch. If you have any feedback, or want to show us what you’ve made, we’d love you to share it over on the forum.

New in the web app: Dark mode and better ways to share, sort and filter

2023-10-31T16:59:48+00:00

We’re bringing small but mighty improvements to the web app, which will really improve your experience and kick your workflows into high gear. In a nutshell, you can now search through documents with more granularity, share designs more easily, and experience a more accessible web app in dark mode. Let’s take a closer look at each of these 👇

Sharing is caring, and when it comes to design files, we care a lot about who has access to our documents and projects. To improve this process, we redesigned our sharing modal to give you more control over what you share inside and outside your Workspace. So no more accidentally sharing the right document with the wrong people — or the other way around.

Instead of a combined list, we’ve split access settings into three tabs to give you a quick overview of what you’re sharing, where, and with whom. You can manage your team’s access through the Workspace Members tab and choose between giving them editing or viewing permissions. We’ll also show special settings for restricted projects.

For managing external users, you can use the Guests tab to invite people via email or the Everyone tab to grant access to the document from a public link. Plus, you can now invite Guests as viewers to both documents or projects, making it easier to share work with external stakeholders or developers — for free.

Powerful sorting and filtering

Do you find yourself scrolling through your documents trying to find the right file? Those days are over! We’ve brought a lot more granularity to sorting and filtering in the web app.

Next to the search bar, you’ll find a new filter option. You can choose between viewing all documents, only documents with prototypes, or documents you can edit. If you’re browsing within a Project, you can even ungroup Collections to display all documents individually in your results.

We’ve also added new ways to filter all the documents in your current view (or search results) by name, date created, or last updated. Whichever you choose, you can sort your documents in ascending or descending order.

And of course, you can combine both features for more targeted results.

Dark Mode

Are you a firm believer in dark mode? Whether you love it because it makes things easier to read or you just like working like that, dark mode is now available in the web app. To try it out, head to the bottom of the left sidebar, then click on your Account menu > Appearance (or try this handy link). From here, you can set it to Light, Dark or System Default to have it match your system’s settings — the choice is yours.

We hope you love these small-but-mighty updates. Together, we think they make for a better experience in the web app. As ever, we’re open to your feedback over on the community forum.

Are you ready to try out these new features? Head over to the web app!

Open the web app

A beginner’s guide to icon design in Sketch

2023-10-26T06:16:25+00:00

Creating pixel-perfect icons, especially ones that work at small sizes, might seem like something you’d need an advanced diploma in vector editing to achieve. But if you know the right techniques, you can combine a few simple shapes with some of Sketch’s most basic features to produce some pretty impressive results.

Today, we’ll run through three simple techniques to create icons in Sketch. Zero drawing skills required! Better still, you can take these techniques and apply them to all sorts of scenarios, not just icons.

You’ll learn to create icons using:

Boolean operations such as subtract and intersect
Borders
Basic shape tools like Oval and Rectangle
Vector editing

Let’s take a look 🔍

To get started, open a new document in Sketch, press A to activate the Artboard tool, and create three 24x24 px Artboards for each of your icons.

Creating a location pin icon using Subtract

Press O to activate the Oval tool and create a 12x12 px circle. You can hold ⌥⇧ to create a perfect circle outward from the center. Alternatively, you can quickly insert the circle and adjust the size through the Inspector.

By default, each new shape will have a gray fill and a border. Let’s get rid of the border and set the fill to black. Now, select the layer again and press 5 to reduce the opacity to 50%.

Pro tip: Select a shape layer and use Layer > Style > Set as Default Style to set its style(s) as the new default for any new shape you create.

To create the hole in our location pin icon, duplicate the circle layer by selecting it and pressing ⌘D. Then hold ⇧⌥ and scale it down to 6x6 px.

With the reduced opacity from before, it’ll now be easy to see how shapes overlap before we commit to cutting anything out.

Now the fun part, reshaping the bigger circle to make the pin shape. Double-click on the circle to enter Vector Editing Mode — and drag the bottom point straight downward to stretch it out.

This point currently has two handle control points that are bending the path. We want a straight hard corner instead, so double-click to switch to a Straight point. Then, soften the point by applying a corner radius of 1.

To finish things off, select both layers and use the Subtract Boolean operation on the toolbar to cut the front layer out of the back layer — and you’re done!

Creating an eyeball icon using Difference

You can create an eyeball icon using the same technique as before, but let’s try a different way this time. Head to the second Artboard and draw a 28x28 px circle using the Oval tool.

You’ll notice that the circle is bigger than the Artboard itself — which is totally fine. Move it up so that it’s 5px from the bottom edge of the Artboard.

Pro tip: Press ⌥ and hover over any layers on your Artboard to measure their distance to the edges.

Duplicate the layer, this time holding ⌥ and dragging out a duplicate — or you can use the same technique from the previous step. Position your duplicate 5px from the top edge of the Artboard.

You can already see the overlap forming the shape of an eyeball, so select both layers and apply the Intersect Boolean operation — which keeps only the overlapping area.

You can keep the shape as is, but we’ll give you a few more pointers to soften up the corners. If you double-click to edit, you can see that the circles are still there because Boolean operations are non-destructive. To turn the visible result of a Boolean operation into a path, we’ll first need to flatten it by clicking on the Tools button in the Toolbar and selecting Flatten from the dropdown menu.

Now, go back into Vector Editing Mode and nudge the side points in by 1px. Select them both and change the point type to Straight on the Inspector. Yes, the angles will look pointier now, but we can give them a rounded corner radius of 1. Press ↵ to exit Vector Editing Mode.

For the pupil, create a 10x10 circle, duplicate it, and scale it down to 6x6 px. Make sure the layers are centered, select them all, and click on the Difference Boolean operation to alternate adding and subtracting the overlapping layers all in one swoop. And that’s a wrap 🌯

Creating a magnifying glass icon using Borders

For this last one, we’ll be drawing with borders instead of fills. As with the examples before, you can create this icon using any of the techniques we’ve covered, but let’s explore this last technique.

Head to your last Artboard and create a 14x14 circle. Tap F to remove the Fill and B to add a Border. Change the color of the border to black, increase the width to 2px, and make sure the position is set to Inside — though it’s likely the default.

Now, for the magnifying glass handle, let’s draw a line segment using the Vector Tool, which you can trigger by pressing V. You can also use the Line tool, but we recommend the Vector Tool for more precision. Before drawing your line, head to the Inspector and click on the Snap to half pixels button, the third one below the sizing controls.

Next, click to make the first point a half pixel up from the bottom of the circle and then move down a bit and add a second point. Hit ↵ to confirm you’re done drawing and give the handle the same style as the circle.

Pro tip: To quickly copy a layer’s style, press ⌥⌘ C to copy and ⌥⌘C to paste it onto another layer.

To round out the squared-off bottom of the handle, you can expand the border — we’d go for 3 px — and switch to a rounded cap end. At this point, you can group the layers, rotate them and call it a day. But we’ll walk you through a few more steps to make it look just like the other icons we worked on today.

Select both paths, click the Edit icon on the toolbar, and choose Outlines. Now, rather than having two paths with borders, we have two compound paths with Fills, which you can join using the Union Boolean operation.

Hold down ⌘⇧ and drag the bounding box until you rotate the shape to -45 degrees. You can also flatten the whole thing down into a single, optimized compound path. And that’s it!

Just like that, we drew three icons using three different techniques — and learned plenty of tricks along the way. We hope you picked up a few new skills and feel more confident creating icons in Sketch. If you’ve got any questions or want to learn how to create something specific, you can always ask our incredible community over in our forum.

Read next: Discover how Matt Emmins, the designer behind Forrest created a suite of custom icons for the app’s big new update.

Try it in Sketch

How to create depth in Sketch

2023-09-28T08:05:02+00:00

Looking to give a little more realism to your designs? Maybe you’re familiar with working with depth or are even a big skeuomorphism enthusiast. Or maybe you’re a diehard fan of flat design. We get it! Flat can be sleek, simple and versatile. But sometimes your designs just need more. More realism, more depth, more life.

Take illustrations, for example. There’s just something eye-catching about a design that seems to come out of the screen. While you don’t have to go super crazy and photorealistic, adding a bit of depth can really spruce up your icons and interfaces.

In this tutorial, Joseph will show you how to create depth intuitively. We know it can be tricky to discern how others might’ve achieved the effect. When done well, the seams of depth are unnoticeable. Take a look at the switch below as an example. Our eyes can tell the difference between flat and realistic, but it’s hard to figure out the steps to follow. Below, we’ll teach you how different techniques to achieve this look.

You can also follow along with our practice doc, where you can inspect Joseph’s final version.

A switch made in Sketch, before and after applying depth effects.

We’ll show you how to use:

Simple style properties to make basic shapes look 3D
Shadows and highlights to mimic how light hits surfaces
Gradients to illustrate the falloff of light
Blurs to blend surfaces

Ready? Let’s dive in 🪂

You can watch Joseph’s tutorial now, or go at your own pace with our guide 👇

Featured in this article

Shadows Gradients Blurs

1. Draw a switch container and knob

To get started, let’s focus on creating a flat shape that we can later improve on. In this case, we’ll need a gray rectangle with rounded corners and a white circle to create the container and knob. We’ll be working with a 50x30 px switch container and a 26x26 px knob — just to give you a sense of scale.

2. Tone down the background

Now we can start thinking about realism. Let’s get into the mindset that each layer is a physical surface being hit by a light source. This will help you figure out where to add highlights and shadows. In this case, let’s imagine the light source is right above our design. To help you out, select the background and turn it from white to light gray.

Joseph’s pro tip: Think of this image as if it were a photograph you’re trying to expose properly. For example, an absolute white surface typically means the image is overexposed.

3. Add a gradient to the switch container

Using this new mindset, let’s darken the switch container. To show how the container is casting a shadow on itself, let’s apply a gradient that’s darker at the top.

4. Add an inner shadow to the switch container

It’s also important to think about how a light source with a warm tone will create cooler shadows. Let’s add a bit more depth with an Inner Shadow. The default color will work well for this exercise, but reduce it to a Y position of 3 and soften it by increasing the blur to around 8.

Joseph’s pro tip: Always keep the qualities of the light source in mind. If the light source is warmer, the result will be cooler shadows.

5. Add a drop shadow to the knob

Our container is looking good! Let’s focus on the knob next. Since the knob is sticking out, it should be casting a shadow. Let’s go ahead and add a shadow using the same Y position of 3 and blur of 8. You can also darken this shadow a little bit by increasing its alpha.

6. Mask the knob and shadow into the switch container

When working with depth, we’ll often need to combine a few techniques to create the desired effect. In this case, the switch container protrudes out further than what we’d want if our goal is for the knob to look more flush with the background layer. So how do we make sure the knob only casts its shadow into the switch container?

Easy! Let’s mask the knob and container by selecting both layers, Control-clicking, and choosing Mask Selection from the menu. Now that the knob and shadow will be clipped within the path of the container.

Joseph’s pro tip: Be open to working with a few techniques to create depth. It’s better to make a lot of subtle changes than to try and force the result in a few sharper steps.

7. Add a gradient to the knob

But we’re not done with the knob yet! Let’s make it a bit more tangible by replacing the white fill with a subtle gradient. We want the surface to seem as if it’s slightly bulging out, so make the top part lighter than the bottom part. Always keep in mind that the light is coming from above.

8. Soften the knob edges

Edges in the real world aren’t as sharp as those of vector shapes. In this case, we’d be able to gain some realism by rounding the edges of the knob and allowing it to catch a bit of highlight at the top and shadow at the bottom.

We can create this effect by using Inner Shadows.

Joseph’s pro tip: Always consider the differences between the real object and its 2D depiction. For example, edges in real life are not as sharp as the edges of a vector shape.

Start by adding a white inner shadow and increasing the alpha value to 100 since white on light gray is already subtle. To make it easier to see what we’re doing, let’s set the blur to 0 temporarily. At this scale, even a Y position of 1 is pushing things a bit too far, so let’s set it to something like 0.5. Once you’re happy with the outcome, you can set the blur to 1.

Next, add a black Inner Shadow to show the light rolling off the bottom edge. But let’s tone down the alpha to 1 so it doesn’t look too heavy. This shadow is the inverse of the highlight we just created, so set the Y position to -0.5 so it peeks up from the bottom. Then finally set the blur to 1.

9. Duplicate and shrink the knob

If you find yourself squinting your eyes to notice the difference between steps, don’t worry! That’s totally normal. The key to realistic depth is subtleness, so it will take a while for it all to come together.

With this next step, you’ll finally be able to see what all the hard work has been leading up to. Select the knob and press ⌘D to duplicate it. Hold ⇧⌥ and resize it to about 16x16 px. Finally, disable the shadow. This should result in a bulge sticking out of the knob.

Take this opportunity to increase the contrast of the Gradient Fill and bring up the alpha of the dark Inner Shadow to make it look a bit more pronounced.

10. Flip the extrusion vertically

If you’re wondering why we created a protrusion instead of an indentation… it’s because we’ve got to flip it! Click on the Flip Vertically button under the Layer Properties section of the Inspector, and watch the magic happen.

11. Soften the indentation

Right now, the edges are looking a bit too crisp and totally not in line with our subtle approach. A Gaussian Blur will help solve that. Just apply it to the whole thing with a radius of 1.

12. Add a slight outer bevel

For the finishing touches, let’s add some regular shadows outside the container to contour the top edge. Add a dark shadow at the top to make the surface appear to round inward slightly. Then, add a light shadow at the bottom to highlight the edge as it rolls back out.

13. Add a gradient to the background

To help us unify the whole look, change the background from a solid fill to a gradient that’s slightly lighter at the top. This way, it’ll be consistent with the position of our implied light source. And there you go!

As you can see, there are many techniques you can use to create depth. For simple designs, you might just need one. If you want to create more complex or realistic designs, then stacking up on techniques will help you achieve the best results.

Remember, it’s all about subtlety — and complex subtlety takes time! If you’re ready to take your depth game to the next level, check out David Blum’s tutorial on how to create a one-layer strawberry. Just beware: the strawberry looks so real that it might just make you hungry.

Try it out in Sketch

Let’s talk shop: Time to reveal your layers and put your designs to the test

2023-09-20T13:10:53+00:00

Designing can feel lonely — but it doesn’t have to be! Our goal is to create a space where you feel comfortable sharing your designs whenever you feel stuck or in need of some validation.

You can learn from how other designers can solve similar problems or open yourself up to receiving some honest feedback. To that end, we’re introducing two new initiatives where we can come together to learn and grow as designers.

Design reviews

Do you ever find yourself reworking the same mockup but just can’t seem to get it right? We’ve been there! The reality is we all face the same mental blocks from time to time, but that’s where the beauty of having a community comes in.

We invite you to share your designs or even ask a question like, “How can I design a checkout flow that includes installment payments?” and we’ll help you out.

To kick things off, we’re sharing a UI example in the forum — Sketch file included. You can use it, remix it or critique it! We look forward to seeing some of your work 👀

Show us your layers

If there’s one thing designs and designers have in common, it’s having many, many layers! Some people are serious about naming their layers™️, while others are fine figuring out the difference between “Rectangle” and “Rectangle 1234”.

Whatever it may be, layers tell us a lot about a designer and the design itself — making them a great learning tool. So we have a proposal…Let’s reveal our layers.

You can already check out a few examples 😉

Hope to see you in the comments!

Join our forum

How Forrest put a twist on fitness tracking — then did it all over again

2023-09-13T09:37:20+00:00

There are difficult second albums, but when it comes to designing great apps, how do you make your first big iteration a hit? For the two-person team behind Forrest, the path from v1 to v2 was obvious and all a matter of time.

Forrest takes fitness tracking and adds a competitive twist. When you set up your workout, you can choose to race against your own personal bests or previous results, or even a ghost racer with a custom time, distance or pace. During your workout, you can see how you’re comparing to your virtual competitors on the app’s race screen and via audio prompts.

Matt Emmins and Adam Swinden — the duo behind Forrest — wanted to take things a step further with a social element that sees you competing virtually and asynchronously against your friends. Throw in a complete redesign, new iconography and a new freemium pricing model, and the pair had their work cut out. So, how did they do it?

We caught up with designer and co-founder, Matt, to talk through Forrest’s unique take on fitness tracking, how they got to v2 and how Sketch helped along the way.

The idea behind Forrest is pretty unique. How did it come about?

Forrest was born from a passing comment by Adam’s wife, Kathleen, who mentioned she wanted to know how she was performing on her runs, compared to the last one.

What she described was an experience akin to Mario Kart, when you race on a previously completed track against a “ghost racer” with your best time. Adam realized that this could work with visualizations and a set of audio prompts, and this now forms the bedrock of the Forrest race experience.

How did the first designs for Forrest come together?

The very first thing I designed was the logo. I remember when Adam came to me with the idea, I started scribbling these wild marks on a stack of Post-It Notes with a Sharpie. It started with mixture of lettering and abstract marks based on the name that Adam liked for the app idea, Forrest (as in Forrest Gump).

I remember when Adam came to me with the idea, I started scribbling these wild marks on a stack of Post-It Notes with a Sharpie.

I liked the lettering, but never loved it, but the mark was pretty solid (if I do say so myself). It was an abstracted, mirrored F, a bit like a tree. Where it all fell into place was the forward-projecting arrow. Speed, direction, forward motion. It felt like it was all in there.

The initial designs of the interface were poor, if I’m being honest, but that only led to us iterating quickly and throwing out what didn’t work. Adam has always been a huge advocate for mobile and best-in-class behaviors, so taking his lead on certain mechanics and architectural decisions led us to our first MVP.

What are the challenges you face when it comes to designing the UI for an app like Forrest?

The state of activity that someone is in is key to how the interface looks. For example, we designed the racer screen to show that ideal level of detail when we expect someone to be at their peak level of activity. There’s a progress bar along the top, showing the racer’s current position and progress, with little else to clutter the interface.

We use large tap targets for any key controls (pause, audio on/off and screen lock) and swipe gestures to move between the three key race views, each showing distinct data. We make these as large as possible to obtain maximum glanceability. When you pair these with audio prompts that automatically lower your music volume, it’s really powerful.

Deciding on the minimum level of information someone needs to understand what you are showing them, without removing context, is easier said than done. This is one area where I find that our iconography can help. Temperature and weather, for example, provide some context around the conditions to the day, but on the top level race feed it’s supplementary to the race data itself.

Deciding on the minimum level of information someone needs to understand what you are showing them, without removing context, is easier said than done

I’d say that this idea of simplification is one of the improvements of v2, over v1. We’ve always had more data and content heavy screens outside the context of a race, but once you’re in the race, we pare things back quite significantly. It’s only what you need, and nothing more. For most runners, I’d hazard they never look at it, but for riders with a handlebar mount, the head-to-head and stats views become a great HUD.

How did you come to the decision that it was time for a v2 of Forrest? Was it something you’d long planned for, or did the need emerge organically over time?

V2 is what V1 was originally supposed to be. We had always planned to build the mechanisms to race your friends, and the social aspect was mentioned in our very first discussion. It was only after we started work on the first version of the app that we realized we needed to break it down into smaller chunks to get something out.

The original build took about five years because of the arrivals of our two boys (who the app icon characters are named after). After hearing that Adam’s wife was pregnant, the aim was to launch before Theo was born. Then we aimed to launch before my son Isaac was born in June but ended up launching on 18th October 2020. During those five years, we changed things as we tested, used the product ourselves, and identified a whole roadmap of features — some of which are in v2.

Forrest is completely independent, self-funded and 100% owned by ourselves

Forrest is completely independent, self-funded and 100% owned by ourselves. With our growing families, V2 become even more important. We saw a chance to build a legitimate and profitable business for ourselves, affording us more time to spend with our families.

Beyond the new features that come with v2, were there any specific design goals you wanted to achieve?

From a design perspective, I saw v2 as an opportunity to simplify as much as possible. V1 wasn’t dense or cluttered but there were some aspects I could have improved, like signposting of final race positions in the feed, and better groupings of content to focus on distances and times.

The ‘create a race’ screen was a focus for us in v2. We wanted to make it as easy as possible to build a race. We made that race builder element a lot more consistent, rather than having three separate controls to change the settings. This seems to be working really well and makes it easier for users to succinctly see what exercise they are about to start.

Another element that I particularly enjoyed working on was the curation of a new set of app icons, both internally-crafted, stylistic interpretations of the logo, and also a set of designer icons which were generously donated by the community. We want to keep this going, but giving artists and designers free reign to interpret the thing you’ve built is super exciting.

We also introduced light mode, which has been an enjoyable challenge, given the accessibility issues of our brand green (#CBF500) on a light background. Finally, it was an opportunity to redesign our entire icon suite. I’m a sucker for an icon and we probably would have launched three months earlier if I spent less time drawing them.

Tell us a bit more about that iconography. How did you go about creating a set of icons that were unique to Forrest, while giving them all a consistent look and feel?

I’ve always been a huge lover of icons, and the fact that you can distill an entire thing into this simple pictographic representation. Its like a design quest for pure simplicity and clarity while retaining the truest form of their meaning.

As a whole, Forrest is a blend of curved and hard edges, which allows a great degree of flexibility while still retaining a level of consistency. The race type icons, which use a lot of rounded forms in the shape of stop watches and clocks, are now solidified with more structured and slightly more squared off edges than their v1 counterparts.

Icons are like a design quest for pure simplicity and clarity while retaining the truest form of their meaning

For something as small as the weather icons in the feed, I was working with 1 px strokes on 20x20 Artboards. I added some pops of colour to these and rendered them as full colour assets, as opposed to the tinted PDF assets I would usually supply, to help convey the extra nuance of time and temperature.

One of the things I actually struggled with, which took a great deal of tweaking, was building out a set of icons, that felt consistently weighted in dark mode. Strokes and text often feel heavier when reversed out into a negative palette, so this meant creating a whole suite of icons that felt optically consistent with their light mode counterparts, despite being 1-2px thinner.

Were there any additional challenges you faced, or considerations you had to make, when it came to introducing the social element of Forrest v2?

The social aspect is full of nuance, from how do you onboard people, to creating an account, to finding people, managing who can see your information, and handling various states for following, requested, accepted etc. Does someone have a profile image? What do you show if they don’t? How do you handle errors during sign up or when something fails to sync?

The app is still free to use and works locally without an account. Not forcing people to sign up was still important so they could use Forrest without barriers, and hopefully want to experience more of what the platform offers.

One challenge was designing a flexible interface that does a good job of showing data that we have no control over. We want Forrest to transcend geographic boundaries, and names outside of western culture are typically many characters longer than “John Smith”. It’s little things like that, that until you are using real data and stress testing it, you realise that you can’t account for in a picture perfect design.

What does your history with Sketch look like? And why was it your choice when it came to designing Forrest?

We’ve been using Sketch ‘at work’ since about 2018 when we moved all of our interface design for client projects across from Adobe Illustrator. Sketch gave us the pixel precision we needed, with a robust toolset, while maintaining the vector and scalable elements we loved in Illustrator.

Work on v1 of Forrest began in April 2015, so almost all of the first version was designed in Illustrator and exported as flat graphics for Adam to interpret. It was only after we transitioned to Sketch at work, that I started porting small amounts of our design over manually, tidying them up, and creating Symbols and workable screens.

V2 was almost organically born from my fourth ‘tidy up file’ where I was trying to nail my colors, Symbols and keep the document as pristine as possible. It was just me working on it, but I knew that it would make my life easier in the long run. It started as a blank canvas, porting in previous Symbols, tidying them up and refining them as I went.

The plethora of features Sketch offers, and the quality of life improvements that have come in recent updates, continue to make working with it a delight

Outside of Forrest and client projects in general, I’ve spent a great deal of time wondering if the grass is greener on the other side with Figma. Although I find what they are doing really compelling, the native Mac app, performance and the current feature set of Sketch is too compelling to move away from. Sketch allows me to design with little limitation, and it probably contributes to less stress than more, which is always a benefit.

Despite my familiarity with Sketch, the plethora of features it now offers and the quality of life improvements that have come in recent updates continue to make working with it a delight.

Are there any specific Sketch features that have helped you in the process of designing Forrest?

I’d say some of the key features of Sketch that have been the most helpful are also the ones I now take for granted. In areas like the feed, we have many repeatable elements, and with Symbols, we have one single source of truth to edit these from. It means making changes takes a fraction of the time, as the updates cascade through immediately.

Smart Layout properties for Symbols make them even more powerful. The feed Symbol, for example, is the same ‘shell’ whether you race yourself, or another racer and some Personal bests. Building a complex nested Symbol with automatically resizing components makes the design process easier, but also insanely satisfying when you want the content to grow based on the data you change around.

Building a nested Symbols with automatically resizing components makes the design process easier and insanely satisfying

Being able to create a single icon as a Symbol and Tint it Color Variables saves duplicating Symbols and creating multiple icons. The best example is the ghost racers, where I want to show visual variety in the designs with yellow rings or purple rings, rather than all the same.

We have a wide colour palette in Forrest. We use colour to identify the opposition racers in the feed, we have the key brand colours and then colours for our medals. And then of course there’s light and dark mode. With Color Variables I only have one catalogue to edit and keep consistent.

I’ve also found the Sketch — View and Mirror app to be super helpful. Being able to instantly see my live design on a device helps to make decisions quicker and more effectively. Working purely from a laptop doesn’t give you the same real-world context to your designs.

What does your workflow look like with your co-founder, Adam? How do you prepare your designs for handoff and make sure they’re in the best possible state to build from?

Typically we’ll discuss an idea over Slack or on the phone. From there, I’ll create an initial pencil sketch and then take it into Sketch to start working it up. As I do this, I’ll fire over screenshots via Slack and get Adam’s thoughts and feedback. I’ll continue to iterate in Sketch until we’ve nailed what we’re working on. I’ve tried to make sure that all colours, styles etc. are fully documented, but I could definitely keep a cleaner document. Sorry Adam.

I then export my designs to Zeplin for Adam to start his build. Adam builds, and then we test. I’ll provide any QA or feedback, and then with any luck it’s on to the next feature. Our workflow is pretty simple, and it probably works due to our small team size and good working relationship.

From a personal perspective, I have a huge amount of admiration for Adam. He has been beyond instrumental to Forrest’s success so far. He is a huge advocate for best-in-class experiences, and pushes me as a creative to go further. Thank you Adam, without you there is no Forrest!

Forrest is available for download on iOS.

Have you made something great with Sketch? We’d love to see it. Tell us about it in the community forum!

Download Forrest on the App Store

Your guide to Sketch on iPhone and iPad

2023-09-07T07:23:24+00:00

Back in July 2022, we launched a brand new Sketch app for iPhone. Since then, we’ve been working hard on a whole host of updates and improvements — and a lot has changed!

For starters, Sketch — View and Mirror is no longer just an iPhone app and, now, you can make the most of it on your iPad as well. But there’s plenty more to talk about, so let’s take a look at everything you can do with Sketch on your iPhone and iPad.

Browse your Workspace on the move

To switch between Workspaces, tap on the Workspace icon in the top corner of the screen

We’ve all been there. You’re on the train, or in a coffee shop, chatting to a friend and you want to quickly show them that mockup you made last week. In those moments, it’s not always convenient to dig out your MacBook — you might not even have it with you.

With Sketch on your iPhone and iPad, you’ve got full access to every Workspace you’re a part of, and all the documents within them, wherever you happen to be. Now, you’re only a tap or two away from sharing your ideas.

There’s full support for recent Workspace organization features like Projects and Collections, so everything looks the same as if you were browsing on your Mac or in the web app. There’s also search, so if you know the name of your document, you can find it in no time at all.

Better still, even if that document you’re searching for isn’t in your Workspace, you can still open it. Sketch — View & Mirror supports opening documents from Apple’s Files app, or third-party services like Dropbox and Google Drive.

Sketch — View & Mirror works exclusively with a Sketch subscription, so you’ll need to sign in with an active Sketch Account to use the app, even if you want to open local documents.

View documents in full detail

When it comes to getting into the detail of your documents, there are no compromises here. Our iPhone and iPad app uses the same rendering engine that we use on the Mac, so you’ll see your designs in full fidelity, no matter where you’re looking at them.

There are also two ways to view documents on both iPhone and iPad — in Artboard view or full Canvas view. Switching between the two is as simple as tapping on the Canvas or Artboard icon in the top-right corner of the screen when you’re viewing a document.

You’ve probably figured it out already, but Artboard view only shows you the Artboards on any page, and you can quickly swipe between them. This view is ideal for when you want to show clients an idea, without them seeing all the scraps and comments you’ve left elsewhere on the Canvas.

Full Canvas view gives you an exact recreation of your Sketch document — including everything outside of an Artboard. This view not only shows you everything, but also helps us support another important feature…

Create, view, resolve and respond to comments

You can create, respond to, and resolve comments on Mac, iPhone, iPad or the web app

Having access to Sketch documents on your iPhone or iPad really makes sense when it comes to reviewing designs and sharing feedback. When you open a Workspace document in full Canvas view, you’ll see comments on the Canvas just like in the Mac or web apps.

You can tap on any existing comment to open its thread and respond, or you can tap on the new comment button in the top-right corner to add a new pin and begin a new thread. When you’re done discussing something, you hit the checkmark icon in the comment thread to resolve it and hide it from view.

Test prototypes on real devices

If there’s one thing better than creating a quick prototype to test out a new flow or idea, it’s trying that prototype on a real device.

When you open a Sketch document with a prototype on your iPhone or iPad, you’ll see a play button in the top-right corner of the screen. Tap on that to start playing your prototype from its start point. When you’re finished, press and hold anywhere on the screen to exit the prototype player.

If you have multiple prototypes or prototype start points in a single Sketch document, you can long press on the play button in the top-right corner to choose between them.

Mirror documents as you edit on your Mac

Mirroring a document as you edit on your Mac gives you a quick way to preview changes on a real device

If you’re a long-time Sketch fan, you might remember our old Sketch Mirror app, which gave you a quick way to see an Artboard on your iPhone as you edited it on your Mac. We’ve brought this functionality to Sketch — View & Mirror and given it a serious upgrade.

In practice, mirroring works just like it always did with our old Mirror app. As you edit an Artboard in a document on your Mac, you’ll see that Artboard on your iPhone or iPad and any updates you make will appear almost instantly. What’s changed is speed and reliability.

Our iPhone and iPad app not only makes use of the same rendering engine we use on the Mac, but also the real-time collaboration engine we use to allow multiple editors to work on the same document at the same time. For you, that means updates to an Artboard you’re mirroring from your Mac are faster and more reliable.

Better still, unlike our old Mirror app, you don’t need to connect your iPhone or iPad to your Mac via USB, or even be on the same Wi-Fi network. All you need to Mirror is a document in your Workspace and you to be signed in to the same account on your Mac, iPhone, or iPad.

Getting started with Mirroring is easy. Start editing a document on your Mac, fire up Sketch — View & Mirror on your iPhone or iPad, and you’ll see the document you’re editing at the top of the Workspace view. Tap the document’s thumbnail to open it, then tap on the Mirror icon in the top-right corner.

If you want to open a document you’re editing on your Mac even faster, you can use Apple’s Handoff feature. It even works in reverse, so you can quickly open a document on your Mac that you already have open on your iPhone or iPad.

Sketch — View and Mirror is free and available to download on the App Store right now. If you have any feedback, or any feature requests for future updates, we’d love to hear about them over on our community forum. See you there!

How ChibiStudio helps anime fans express their creativity

2023-08-17T06:59:42+00:00

You might know developer Guilherme Rambo for his work as a vigilante, cracking down on Apple’s secrets and helping them fix security vulnerabilities in macOS, iOS, and other operating systems through their bug bounty program.

But back in 2016, Guilherme was unemployed and searching for a project he could take on with illustrator Ewerton Lima. They knew they had the right mix of skillsets to make something great, they just weren’t sure what. But this time, Apple came to Guilherme’s rescue with the announcement of the App Store for iMessage at the WWDC that same year.

“One of the demos they showed was an iMessage app where users could assemble an ice cream cone together by combining different toppings. That’s when I had the idea to do something similar, but with chibis instead of ice cream,” Guilherme explains.

And Ewerton was immediately on board. “I’ve always enjoyed drawing, so the idea of creating assets that other people would be able to combine in different ways to make creations of their own was enticing.”

That’s how ChibiStudio came to be, a character creation app geared toward fans of anime and chibi art. You can express your creativity by making different avatars from a large variety of items such as shoes and hairstyles — all without needing to be good at drawing!

If you know your Apple history, you probably know the iMessage App Store flopped, but it didn’t take ChibiStudio down with it. Thankfully, the iOS version of the app found its niche, and we’re here to tell its story.

The making of ChibiStudio

For Ewerton, ideas start right in Sketch. “[I’ll start] using mostly just the vector tool, with some primitive shapes here and there. This is possible because the drawings are all from a flat front-facing angle, so drawing them directly within Sketch can be done very efficiently,” he explains.

But what makes his ChibiStudio workflow different from other projects is the emphasis he needs to put in structuring and organizing documents. Because he’s working with customizable avatars, he needs to pay close attention to how he sorts the different items users will try out.

To keep things organized, he’ll create a new Sketch project for each item pack. He’ll then use layer groups to contain individual items and use naming conventions like hair-1, hair-2, shoes-1, shoes-2. He’ll also organize the items by fill color since they’ll later become color slots that users can customize in the app.

Like Ewerton, Guilherme had also been using Sketch for a long time to design user interfaces and websites. He knew it had great support for SVG, which is the backbone of ChibiStudio. “We wanted to give users as much freedom as possible when creating in the app, and we also wanted to future-proof our assets for higher-resolution screens and media, so the idea since the beginning was to ship vector-based assets with the app.”

To accomplish this, he created a plugin that exports all of the layer groups in a document to individual SVG files and names them according to the group. He also uses an internal Mac app tool to assemble item packs and edit some of the metadata to include which color slots the user can edit in the app.

For optimal performance and cost-effectiveness, they use the internal tool to convert the SVGs into Core Animation layers, a technology native to Apple’s platforms. Once the pack has been created, this tool compiles the pack into an asset catalog that’s shipped with the app.

“This workflow allows us to preserve all vector data, starting with Sketch, going through SVG, all the way to the app running on an iPhone where they become Core Animation layers. That way the app runs very efficiently, but we keep all the benefits of using vector assets, including the ability for users to customize the colors of individual parts of items,” explains Guilherme.

Doing right by the user

Of course, nailing the dream workflow wasn’t done overnight. The ChibiStudio duo first had to work through a number of challenges. “For me at least, it’s considering how each individual item will integrate with the other items. We have a dozen item packs and thousands of items in total, but it all must fit together like a puzzle. There can’t be any weird clipping or overlapping,” says Ewerton.

One of his goals is making sure he’s carefully assigning the position for each item in a layer. This way, when a user adds an item to their character, it’ll show up exactly where the user expects it to go in relation to other items. While users can customize the position in the app, the default has to make sense.

They also struggled with making user interface decisions for the app’s canvas. “We have lots of features and ideas, but we don’t want to make the app too complicated for those who just want to pick a few items and have a nice avatar done in a couple of minutes.”

But they found another challenge on the flip side of simplicity: feature discoverability. For example, users were always able to tap items on their chibi to select and customize them, but many didn’t realize that they could. ”As a compromise, we ended up introducing a toolbar that gives access to many of the features that were previously hidden behind gestures or menus.”

Idea, meet Development

In an effort to offer the best experience possible, the ChibiStudio team is centered on creating smooth interactions, cool features, and plenty of avatar items to choose from. But what about performance?

“As a developer, wrangling the amount of data that the app has to deal with has always been a challenge. I didn’t want to make users wait for assets to download after they purchase a new pack in the app, so since version 1.0 and to this day we ship all inventory with the app that the user downloads from the App Store,” explains Guilherme.

Guilherme relies on a combination of traditional techniques like data compression and tricks such as not encoding certain pieces of metadata that can be inferred in some other way at runtime. You can also read about how they created an App Clip that allows users to try out the app’s main experience of creating a character without having to download and install the full app in Guilherme’s blog.

Reaping the rewards

While economic success is often what app creators are after, there can be a lot more to gain than just financial freedom.

“I’ve always been very self-conscious about my work, so I’m always looking for external validation. So when we get feedback from users on how ChibiStudio has helped them develop their characters and exercise their imagination, it’s when I feel proud of the work we’ve been doing,” says Ewerton.

“As the Sketch team probably knows, there’s something quite special about working with a creation tool. We create the artwork and develop the features with certain ideas and use cases in mind, but our users always surprise us with what they come up with,” explains Guilherme. “One of my favorite things is how we learned about some teachers in the US who were using ChibiStudio in class, having their students create depictions of historical characters as chibis to use in their presentations.”

Guilherme and Ewerton have come a long way since 2016 with ChibiStudio, and we’re proud of the work they’ve created with Sketch. If you’re looking to start your own project soon, Guilherme’s advice is always to keep it simple. “That’s so you can maintain the workflow for the foreseeable future, or at least while it’s working out for you. Trying to be fancy usually ends up resulting in an unmanageable workflow that you start to diverge from.”

ChibiStudio is available for iOS. You can also follow them on Twitter and Instagram to stay up to date with all the kawaii cuteness they’ll have in store.

Read more #MadeWithSketch stories

How to organize and maintain design systems in Sketch

2023-08-11T06:37:10+00:00

Recently, I talked about how to build a design system. I covered basic components like Color Variables and Styles, and how to work in guidelines and agreements. But as your design system evolves, you might find yourself with way too many elements to sort through. Don’t worry! There’s nothing some good organizational best practices can’t fix — at least when it comes to design systems.

Today, we’ll learn different techniques to group and organize our components. We’ll also touch on some things to keep in mind as you grow your design system.

Let’s take a look 👀

Embrace your inner organizer

When we think about design systems, we often think about a single Library for every component. But there’s no rule that says you need to keep everything in a single document. For example, you might want to have separate Libraries for different types of components, and even another document to hold guides and documentation.

In Sketch, you can use Projects and Collections as primary and secondary levels of organization. For example, you can create a Project for your brand and group your Libraries and other design documentation into a Collection.

The more complex your design system, the more creative you can get. However, I suggest keeping it simple at the beginning — the more levels you add, the more challenging it’ll be to find the right components later on.

Choose between platform-agnostic and platform priority

If you work in product design, a helpful starting point is choosing between platform agnostic and platform priority. By this I mean choosing whether you’ll focus on components or on platforms — such as devices, operating systems, browsers, etc.

With design systems, it’s easier to update and maintain components and all their variants at once rather than having to look for the same component in many different places (per platform). This is a platform-agnostic approach.

On the other hand, with platform priority, you’re more likely to search for and select components for a specific platform. Rummaging through platform-specific components may take more time, but it also means your design system will be easier to scale and maintain. A good example of platform priority is Apple’s UI kits.

Both approaches have their merits and their downsides. The important thing is to choose early and stick with your choice. And make sure everyone else working on the design system does, too!

Group your components

As you create components, it’s good to think about how they relate to one another. Ask yourself questions like: is this Symbol the inactive state of another Symbol? Or, is this Artboard Template specific for a device?

Decide on a set of naming conventions to help group components together and even create hierarchies between them. For example, you might have a standard button Symbol but then create additional versions that you reuse frequently like an inactive state variation or a button with a different CTA. By naming these Symbols ‘Button’, ‘Button/Inactive’, ‘Button/Buy-Now’ ‘Button/Inactive/Buy-Now’ and so forth, you can group them automatically within Sketch.

Whenever you search through your components these buttons will show up next to each other, making it easier to find or swap. However, try to keep your component hierarchy as flat as possible. Always ask yourself if it’s possible to simplify your current approach before settling on a structure and adding unnecessary complexity.

Pro tip: You can use emojis like📱and 💻 emojis to name device-specific components.

Work with one source of truth

As your design system evolves, you may find yourself in situations where you need to make substantial or provisional changes. But how can you make changes without disrupting your teammates who might already be using your design system’s components?

Starred versions can help by setting the latest (or any) iteration of your design system as the default that others can keep using. That means you can work on a new version without affecting your team’s workflow. Once you’ve made all the changes, you can Star that version of the Library and we’ll deliver the update to anyone using the Library.

Here are a couple of extra tips on how you can use version stars to manage your design system better:

Add a page for previewing changes. With a dedicated page for high-fidelity mockups and screens in your Library, you can see how your component updates would affect the final design — all without needing to star the version or push any real updates.
Add a description. You can add descriptions to your starred versions to describe any major changes, making it easier for your team to find the right one.
Set “release dates” for your team. Depending on your update cadence, you can set a specific day of the week or month to star new versions of your Libraries. Having a set date can also give your team a timeframe to check and test any changes before releasing.

Starring versions can be incredibly helpful for maintaining and growing a design system over time. It provides control, documents your changes, and separates creation from consumption.

Build out your components using Styles

As you create components, try to rely as much as possible on Styles and Color Variables instead of customizing each component separately. This approach guarantees that, if there are any style and color changes somewhere down the line, you can easily update components and screens without too much disruption.

For example, imagine you design a landing page based on brand colors and typography. If you used Color Variables and Styles, you can rebrand the whole design by making changes to these Library components instead of needing to update everything individually.

We have a whole guide on Color Variables if you want to learn more!

Establish a design system council

Regardless of the size of your team, it’s probably a good idea to have periodic sessions to determine the state of your design system. We can call this the design system council, and it could be made up of however many teammates who need to be involved.

The goal is to keep the conversation going around your design system and whether it’s working for everyone in its current state. Through these sessions, you can decide which elements to remove, combine, add, or modify. Use the time to establish your design system’s architecture, set up principles around evolving and creating components, and define your documentation goals and versioning strategy.

Overall, setting up a design system council is a good way to gather feedback and give everyone a chance to talk about their own experience and pain points. They’re also great for keeping all the important stakeholders in sync and making sure that everyone on the team feels included. Rituals and procedures are up to you — nobody complains about free pizza! 🍕

Ultimately, a design system is only useful if people actually use it. Establishing a council will increase the likelihood that the design system speaks to the needs of the team or organization. Plus, it can dissuade people from going rogue and creating their own components outside of the designated Libraries.

Design systems are as versatile as they are helpful, but they do take some legwork at the beginning. Give yourself and your team enough time to consider your needs and which techniques you can use to best address them. That way, you’ll be building a design system that truly works for you — and give you an extra confidence boost when iterating and expanding later on.

How to build a component Library in Sketch

2023-08-03T06:09:27+00:00

If you’re finding yourself copying and pasting the same Symbol between documents, or keeping Post-it notes with hex codes next to your monitor, it’s probably time to turn those core components of your design into a Library.

In this post, we’ll walk you through how to create a Library and all the components you can add to it. Let’s get started!

How to create a Library

With Libraries, you can organize and store your components in one place and even make them accessible across your Workspace. They’re useful for easily applying your branding across different scenarios or even splitting up larger design docs with common elements. In other words, Libraries give keep things consistent and improve collaboration within your team.

You can turn any document into a Library in Sketch by using File > Add as Library. In the web app, you can turn existing documents into a Library via document settings.

You can learn more about Libraries with our free Sketch 102 course — and so much more!

While it’s quick and easy to convert an existing document into a Library, sometimes it makes sense to start from scratch, especially if you haven’t created components already. And if you’re starting from scratch, it helps to add components in an order that makes sense.

A good way to think about Library components is in three levels of complexity. Let’s look at each level and the components that are a part of them.

Level 1: Basic components

If you’re building a Library from the ground up, we’d recommend starting with the fundamental building blocks of styles and colors.

Here’s your component starter pack in Sketch 👇

Color Variables

Color Variables are useful for storing colors. They’ll show up right in the color picker, making them easy to find and apply. You can use them to create a color palette for your brand or project, which will help you work faster and keep your designs consistent.

Text Styles

When it comes to working with typography, Text Styles are your best friends. You can create predetermined combinations of fonts, weights, and colors that you can reuse across your designs. This way, you can create different Text Styles for headings, subheadings, and body copy and avoid copying and pasting styles across documents.

Layer Styles

Layer Styles work in the same way as Text Styles, except that they apply to shape layers. You can use them to save background colors and shadows. For example, you might have a specific setup of shadows for buttons to give them a subtle glow or 3D effect. If you want to keep this treatment consistent across your designs, you can save these layers as Styles.

How it all comes together

You can easily swap between styles and colors depending on the context. Maybe you want to use two Color Variables to differentiate between active and inactive buttons. Or you might want to change Text Styles for copy of varying lengths or prominence.

You can quickly access Color Variables and styles through the Components view, which you can trigger by pressing C in the Mac app. From here, you can drag them drop them right onto layers you want to apply them to.

Once you’ve got your basic components ready, you can start working on more complex elements.

Level 2: Symbols and Nested Symbols

Now you’ve got your building blocks in place, it’s time to make use of them with some more complex components — Symbols and Nested Symbols. Let’s take a look at how each of them works and what you can use them for.

Symbols

Symbols are the core of any Library in Sketch, and are especially handy for working with elements like navigation bars, logos and modules. In technical terms, Symbols are a special type of Artboard that contains layers that can be re-used and updated. You can replicate this group of layers infinitely across your project and edit them however you prefer. You can make individual changes to a specific instance or update all of them at once by editing the Source.

For example, let’s say you want to design a button to reuse across an app project. You can create the shape layer and text layers and save it as a Symbol. Then, you can start adding instances of that Symbol all over your design. If you need to make a change to the overall look of the button, you can do so through the Symbol Source. Or, you can edit a specific instance and change the color or copy without affecting the rest of the buttons.

New to Symbols? You’re in for a treat. We’ve recently written about the benefits of working with Symbols in Sketch, and how to incorporate Symbols into your workflow if you want to get up to speed.

Nested Symbols

With Nested Symbols, you can place simple Symbols (like a button or logo) inside a larger one, such as a navigation bar. This extra layer of complexity — almost like a Level 2.5 — gives you a lot of flexibility when editing. You can tweak each piece individually while keeping everything in sync. For example, if decide to update your logo, it will also change within the navigation bar.

How it all comes together

This is where applying Styles and Color Variables to your Symbols comes in handy. If you take the time to set them up, you can change the entire look and feel of an app’s design in seconds. The more you rely on Text Styles, Layer Styles and Color Variables the easier it will become to manage and scale your Library.

Level 3: Artboard Templates

With Artboard Templates, you can turn any Artboard and its content into a reusable component. They’re perfect for holding your Symbols and overall design for screens, profiles, posts, and all sorts of mockups.

All you have to do is select the Artboard and enable the Use as Template checkbox in the Inspector. Then, you’ll be able to access your new Artboard Template through the dropdown in the Inspector after pressing A or in the Components window.

Not sure when to use Artboard Templates? Imagine you’re working on a new web design and you’ve just finished putting together the header and footer you’ll be using in most of the screens. You can create an Artboard with the same dimensions as your screen, add in the header and footer symbols and save it as a Template. This way, you’ll save a step every time you create a new screen for the website since the headers and footers will already be in place.

Pro Tip: You can also use Artboard Templates to create guides for yourself and your team. Think screen sizes, margins or even sketches that can help jumpstart a project or design.

How it all comes together

Once you have all of your components carefully woven into your Artboard Template, making changes and keeping things consistent will be near automatic. A simple change to a Color Variable will ripple across Symbols and Artboard Templates, while still retaining full control over making individual changes where necessary.

What’s more, a well-crafted Library can be easily turned into a fully-functional design system, provided you add some more instruction for your team. We have a whole guide on how to build a design system you can check out if you’re looking to dive deeper.

And there you have it! If you want to learn more about Libraries, we have an in-depth post ready for you.

Benefits of working with Symbols in Sketch

2023-07-27T06:14:35+00:00

Feeling like your workflow could use a little power-up? Let’s talk Symbols! Maybe you’ve played around with Symbols but haven’t integrated them entirely into your workflow. Or you might be new to Sketch (welcome!). Whichever the case, this post is for you.

Below, we’ll walk you through the key ways in which Symbols can help you design better and work faster. You’ll likely find a few uses you hadn’t thought of before!

But first, a quick refresher.

What are Symbols again?

In simple terms, a Symbol is a special type of Artboard that contains layers you can repurpose and update everywhere. You can replicate Symbols infinitely across your project, making key parts of your designs easy to reuse anywhere in your document.

Overall, Symbols are a huge timesaver for designers and your team. If you’re new to Symbols or looking for a refresher, check out our guide on how to create Symbols in Sketch.

Benefits of working with Symbols in Sketch

There are many benefits to working with Symbols, from helping you stay consistent to making impactful changes across your document with just one click. The more complex the project, the more helpful Symbols can be.

They help you work faster

Symbols are great for creating reusable elements in your design that are easy to edit and update. Good examples of Symbols are buttons or icons. Let’s say you’re done designing your first button for an app. You can turn that button into a Symbol and easily reuse it across your app’s design.

If you feel like changing the look and feel of your button, you can tweak the Symbol’s source, and all of their other instances will follow. So no need to worry about wanting to change your logo’s color or your button’s copy later on.

They make your designs more flexible

With nested Symbols, you can place simple Symbols (like a button or logo) inside a larger one, such as a navigation bar. This helps make your designs more flexible because you can edit each piece individually while keeping everything in sync. For example, if you update your logo, it’ll also change within the navigation bar.

You can also apply Smart Layout to Symbols, to make them resize automatically if their content changes. For example, if you change a button’s label from “Home” to “Go Home”, the button itself can automatically resize to preserve padding and spacing. Check out our Smart Layout documentation for more details.

They let you iterate with ease

Overrides are your best friend when you need to make changes to your Symbol instances. In the Overrides panel, you’ll find a list of every editable element within your Symbol, making it simple to swap, edit or hide them however you like.

Let’s say your design has three instances of the same button. You can use the Overrides panel to change the color, Style, or text without affecting the Symbol Source. Another option is creating a new Symbol with an alternate design and using the Overrides panel to swap it in — handy for inactive state buttons or secondary logos.

They make collaboration intuitive

Symbols help simplify collaboration in several ways. If you want to let your collaborators know they shouldn’t edit certain Symbols, such as logos, you can do so by unchecking those options in the Overrides panel. This way, they won’t even appear as editable unless they can make changes to the Symbol Source.

In the same vein, you can create different versions of your Symbols so that collaborators already know what the available design variations are. It’s a great way to point them in the right direction without needing to sync on every change. You can also include your Symbols in a Library so that your whole team can use the same elements across multiple documents.

Looking for hands-on practice? Check out our Symbols tutorial.

They help simplify handoff

Whenever a developer inspects a Sketch document, they can easily tell when something is a Symbol. They have a distinct purple outline that also links them to the Symbol Source. Because developers know that Symbols are repeating components, they can safely write the code once and reuse it across the project. Plus, they can copy the CSS code right from the web app.

We hope this post has given you a better idea of what you can do with Symbols. The next step is upping your workflow game 🚀

Three ways to organize your Workspace with Projects and Collections

2023-07-20T06:47:40+00:00

If you’ve been using Sketch for a while now, you’ll probably find that the number of documents in your Workspace is growing. And if you share that Workspace with others, that number of documents can grow even faster!

As more and more documents find a home in your Workspace, keeping things organized can be the difference between an easy day at work, or a search party (without any partying). No-one wants to spend their time searching for the right file to pull some ideas from.

To help keep things organized, we introduced Projects — a workflow-agnostic way to group related documents in any way that makes sense to you and your collaborators. For lots of our customers, Projects gave them a simple and scalable solution to organize their Workspace, but we heard from others who needed something more. That’s where Collections come in.

Collections are a secondary level of organization for your Workspace. They live inside Projects and, just like Projects, they’re also completely workflow-agnostic. We don’t make assumptions or automatically categorize your work. Instead, you decide which groupings and criteria make the most sense for your workflow.

With all of this freedom and flexibility, you might be wondering where to start when it comes to organizing your Workspace. So, let’s take a look at three possible ways to use Projects and Collections.

Organizing by project name and status

If you’re working on a single product or for a single brand, your first level of organization could start with creating Projects for each new project you work on. For example: Summer Sale Campaign, New Website, 2.0 Rebrand.

Inside each Project, you can add a Collection that represents each stage of your design process. For example: Backlog, In Progress, Ready for Review, Ready for Handoff.

This way of organizing your files means that it’s easy for anyone you work with to quickly find the right file. For example, a developer working on a new website build can find everything they need in the New Website Project and the Ready for Handoff Collection.

Organizing by client and project

If you’re working with multiple clients, another way to organize your work is by client (at Project level) and project (at Collections level).

For example, you could have Projects named Acme Co, Big Space Explorations Inc, and Legal Firm LLP. And within each of these projects, you could create a Collection for any new item of work you take on for that client (e.g. Website redesign, New branding, Seasonal ad campaign).

This is where the secondary level of Collections can make a big difference. As the work you do for each client grows, you won’t end up with big ‘buckets’ of files to search through.

Organizing by brand and work type

If you’re a designer working across different brands, organizing your work by brand as Projects level, and then by type of work as Collections, could help to keep things manageable.

In practice, this means your Collections could group together illustrations, branding, website designs, app designs, adverts, and any other type of work inside each brand’s Project.

Organizing your documents this way makes it easy to draw on your old work as inspiration for a new brand or project. In a couple of clicks, you can quickly find all the illustrations for a similar brand and use those to inform your next ideas.

These three organizational methods can kickstart your next Workspace Spring clean, but there are so many more ways to group your documents. It’s all down to what makes the most sense for you, your collaborators, and your workflow. Whatever you choose, Projects and Collections are ready to accommodate it.

Better still, once you’ve set up your Projects and Collections, you’ll see the same neat, organized Workspace wherever you use Sketch — on the Mac, on the web, or your iPhone or iPad.

If you’ve come up with a great way to organize your Workspace using Projects and Collections, why not share it with us over on the community forum? We’d love to see it!

How to incorporate Symbols into your Sketch workflow

2023-07-13T06:33:55+00:00

When it comes to designing in Sketch, few features are as powerful and as dynamic as Symbols. In fact, many of our customers use Symbols in completely different ways — often to achieve the same results!

New to Symbols? Check out our intro series.

Symbols might already be an integral part of Sketch workflow, but do you know how to get the most out of them? Today, we’ll show you how to use Symbols in combination with other features to truly maximize their power.

Symbols 🤝 Color Variables

Color Variables help you keep your designs organized while speeding up your workflow. You can use them to store colors you’ll likely reuse, which will appear as color swatches in the Color Picker.

You can apply Color Variables to any part of a Symbol, whether it’s a fill, border, shadow or text layer within it. This will help you in two ways:

Keeping your Symbols updated. Any changes you make to your Color Variables will automatically sync with your Symbols as well.
Easily override colors. You can use the Overrides Panel to swap between Color Variables, making it easy to switch between your project’s primary colors.

You can view all your colors in a grid or a list view, and hover over them to get handy information like names or Hex values.

Symbols 🤝 Styles

Similar to Color Variables, with Styles you can store a set of text or layer styles, reuse them across your designs and even apply them to Symbols. When you make changes to your styles, they’ll instantly update every Symbol that uses them. At the same time, you’ll be able to easily swap them using the Overrides Panel.

Remember that you can double-click to dive down into Symbol instances and select individual layers within.

Symbols 🤝 Libraries

Libraries are the best way to keep your designs consistent across multiple documents. You can use them to store components like Symbols, Text and Layer Styles, Color Variables and Artboard templates. Then, you can sync any changes you make to the source components to any other document using the Library.

So, you can take all the benefits we mentioned before — about combining Symbols with Color Variables and Styles — and multiply them across documents!

Symbols 🤝 Smart Layout

With Smart Layout, you can create designs that automatically resize to fit your content. This feature maintains the padding and spacing between layers in a Symbol when an override changes its size. When you apply it to a Symbol, you can choose between resizing horizontally or vertically.

When working with copy changes, just make sure you’ve set your text layer’s auto height or auto width settings to match the Smart Layout direction.

Symbols 🤝 Handoff

When it’s time for developer handoff, our web app comes into its own. In the web inspector and on the Canvas, we’ve made sure Symbols are easily recognizable as repeating components, so developers can easily spot opportunities to write code once and reuse it across a project. Better still, they can copy the CSS for a Symbol right from the web app.

Check out our page on [Handoff](/handoff/) to learn more in Sketch

And there you have it! Did we miss any of your favorite Symbol combinations? Let us know in our forum 😉

An in-depth look at Prototyping in Sketch

2023-06-28T07:00:00+00:00

In the past, we’ve talked about how to get started with prototyping, but now we’ll take things a step further. Today, we’ll learn how to turn your static Artboards into interactive prototypes, make them pop with Overlays, and preview them without ever leaving Sketch. We’ll also show you how to test your prototypes in context on an iOS device, so you can get a feel for how it’ll work in the wild.

Let’s get prototyping!

Not familiar with prototyping? We answer all your burning questions in this post.

Getting started

To start prototyping in Sketch you’re going to need some Artboards. In this case, it’s easier to work with Artboard Templates instead of custom-drawn ones. That’s because templates help the Prototype player understand the proper dimensions of your Artboard — which will come in handy when working with more complex prototypes. But more on that later!

You’ll find a whole host of built-in Apple and Android device templates you can use to get started. Just press A and select them from the dropdown in the Inspector.

Not sure how to populate your Artboards? Take a look at these wireframe examples.

How to add Interactions

Once you have your Artboards, it’s time to start linking them. An Interaction or Link connects a layer to the Artboard you want to transition to — also known as the Target. That way, if you click on that layer while previewing your prototype, it’ll take you to the destination Artboard.

You can link Artboards by using any of the layers within them. To create an Interaction, select the layer and press I. You can also head to the Prototype tab in the Inspector and click on Create an Interaction. Now, you’ll see an unplaced link attached to your cursor, and you’ll notice we’ll highlight any linkable Artboards or layers on hover. All that’s left to do is click the Artboard you want to link to, and done!

To remove an Interaction, simply set its Target to “None” or select the layer and choose Prototyping > Remove Links from Selection from the menu.

Pro tip: Not a fan of orange? You can change the color of your Interactions and hotspot layers in the Canvas tab in Preferences.

Customizing your interactions

Once you’ve set your interaction, you can define a transition animation for it. You’ll find several options to choose from in the Animation section of the Inspector, though you can also opt for no animation.

If you want your layer to remain static in your prototype preview, even when you scroll through the rest of the content, you can check the Maintain scroll position after click box right underneath the Animation section.

At the top of the Inspector, you can also use the Target dropdown to select a different Artboard to link to — including “Previous Artboard”, which will always take you back to the last Artboard you were looking at. This function is super useful if you’re creating a prototype where a single Artboard is accessible from multiple other Artboards, like a screen with a back button.

If you want your layer to remain static, you can check the Maintain scroll position after click box right underneath the Animation section.

Hotspots: what they are and when to use them

In some cases you might find adding an Interaction to a layer doesn’t give you the result you need. If you want the clickable area of an icon or menu item to be larger than the layer it’s inside, for example, an Interaction can’t do that — but a hotspot can.

Hotspots allow you to draw a target over any part of your design and link it to an Artboard. You can add a hotspot via the Insert menu, or press H to start drawing one right on the Canvas.

You can also convert an Interaction to a hotspot by selecting a layer with an Interaction and clicking the “Create Hotspot” icon in the Inspector — handy if you’ve already connected up a bunch of Artboards but decide you need to change the hit area later.

In this example, we added a hotspot behind the ‘You liked Oasis Palace’ text layer to make sure it’s easy to tap on if someone’s previewing on a mobile device.

Hotspots are extra useful because you can place them inside Symbols where you can then override the Target destination. This way, you can reuse a Symbol but change the Target destination each time. You can also use this behavior to hide a hotspot by choosing “None” under “Hotspot” in the overrides panel.

Pro tip: Your Canvas can get pretty busy with all those Interactions and hotspots. Toggle them on and off using the ^F shortcut or by selecting View > Show Prototyping from the menu bar.

How to add dynamism with Overlays

You can create menus, modals, messages and many other UI elements using Overlays, a special type of Artboard.

To turn an existing Artboard into an overlay, select it, head to the Prototype tab of the Inspector and toggle the Artboard type from Screen to Overlay. You can also create a link to any type of layer that’s smaller than the parent Artboard — we’ll create an Artboard around it and set it as an overlay for you.

You can stack multiple overlays, have them replace each other, and set animations for each of them. If you want to learn more about Overlays, check out our comprehensive guide.

Want to learn more about Overlays? Check out our demo document.

Setting Start Points

Start Points are markers that let you specify which Artboard your prototype should start playing from. To set a Start Point, Control-click on the Artboard and select Set as Start Point from the menu. You’ll know it worked when you see a icon appear next to the Artboard’s name.

Usually you’ll want to set a Start Point at the beginning of a flow. However, setting multiple Start Points can be really useful — for example, if you’re building complex prototypes with many Artboards, or if you only want someone to view a particular part of your prototype.

Note: For every Start Point you set, Sketch will generate a new prototype in the web app.

How to create scrolling prototypes

There’s only one golden rule for creating scrolling prototypes in Sketch: make sure you use a Template. If you’re using custom-drawn Artboards, they may appear zoomed out to fit the height of the viewport rather than scrolling the way you expect them to. That’s because Sketch needs a preset ‘screen size’ to understand when your content is spilling beyond its confines.

Once you have your Template placed on the Canvas, all you have to do is change the height of the Artboard. Now, whenever you preview the prototype, you’ll get that slick scrolling effect. And remember, if you want to keep any element of your prototype static, just check the Maintain scroll position box.

Preview your prototypes in Sketch

Once you’ve created a prototype, the next step is previewing it to see if your flows work and your transitions make sense. You can preview your prototypes directly in the Mac app, the web app — where you can share your prototypes with clients and colleagues — or on your iOS devices, using our iOS app.

To play back your prototypes in the Mac app, click the Preview button in the toolbar to open the Preview window. Your prototype will begin at the currently selected Artboard, unless you set a Start Point elsewhere.

At the top of the Preview window, you’ll see a back button that will take you to the previous Artboard. You can navigate to a specific Artboard by selecting it from the dropdown menu at the top of the window.

Tap targets: When you click or tap, these indicators will appear in the Preview window wherever you’ve added Interactions and hotspot layers.

As well as previewing in Sketch, you can also share your prototypes on the web app where anyone with the link can view and play it — from any browser or device. All you have to do is set a Start Point and save your document, and we’ll generate that prototype preview for you in the web app.

You’ll find your prototypes under Views in the web app’s right-hand sidebar. And just like any document on your Workspace, you’re in control of who can see your prototypes.

You can invite clients or colleagues via email, share the link with your team or make the document public so anyone can see it. You can also enable comments to let viewers leave feedback on individual Artboards — perfect for collaborating with colleagues or getting feedback from clients.

To find more share options, click on the ⋯ in the top nav bar.

Test your iOS designs in context

If you’re working on mobile interfaces, there’s no better way to test them than on the devices you’re designing them for. With the iOS app, you can simply preview your prototypes as you would in the web app. When you tap to view one, you can interact with it by tapping on tap targets to transition to another Artboard. Once you’re ready to exit, tap and hold for a few seconds.

And there you have it! Hope you’re feeling pumped to get started on your next prototyping project.

How to build a design system in Sketch

2023-06-08T06:11:18+00:00

Great design is often a byproduct of great collaboration. But when it comes to big projects like brand guidelines or product redesigns, you need an extra communication tool in your arsenal. Design systems are just that, a way to make sure everyone’s on the same page and executing the same vision.

Today, I’ll show you how to set up your own design system in Sketch from start to finish.

Let’s dive in! 🪂

What is a design system?

Before we get started, let’s quickly recap what a design system is. In essence, it’s an agreement between you and the rest of the team, including developers and product managers. Design systems help you create cohesive and scalable products with a shared set of design guidelines, components, and styles.

You can find all of Apple’s Sketch resources [here](https://developer.apple.com/design/resources/).

How to set up a design system in Sketch

You can use Libraries to create a source document to store your components such as Symbols, Color Variables, Styles and Artboard templates. They’re the foundation of any design system built in Sketch. If you need a refresher on Libraries or are new to Sketch, we encourage you to check out our Sketch 102 lesson on Libraries — it’s free!

Basic components

The main goal of a design system is to create something scalable that works for everyone. To that end, it’s better to start with the most basic elements and grow from there. You’ll first want to define your Color Variables, Text and Layer Styles, which you can base on your brand identity or project, depending on your design system’s scope.

Once you’ve got your basic components ready, you can use them to build more complex components like Symbols and Artboard templates.

Symbols and Artboard templates

Symbols are the core of any design system in Sketch. They’re great for creating reusable components with varying degrees of complexity. And while having the freedom to edit Symbol instances to our heart’s content is one of their benefits, how can we make sure we stay true to brand?

This is where applying Styles and Color Variables to your Symbols comes in handy. You can easily swap between styles and colors using Symbol Overrides without making any changes to the parent Symbol itself. For example, you may want to use two Color Variables to differentiate between active and inactive buttons. Or you might want to change Text Styles for copy of varying lengths or prominence.

Following the same logic, you can use Artboard templates to hold many Symbols like navigation bars or logos. These templates can serve as your screens and you can reuse them and update them in the same way as Symbols.

The more you rely on Text Styles, Layer Styles and Color Variables the easier it will become to manage and scale your design system. This way, you can change the entire look and feel of an app’s design with just a couple of adjustments — all while following the project or brand’s predetermined identity.

Bringing it all together

Let’s look at an example of how we can bring all of our components together. Here are the steps I’d follow if I wanted to design a landing page with a search box:

Create Color Variables for icons and text fields.
Create icons as Symbols and apply the Color Variable.
Create Layer Styles for fields using the Color Variables.
Create text form fields as Symbols.
Create Text Styles for placeholder text.
Create a Symbol for a search field using the search icon Symbol, the text field Symbol and the placeholder Style.
Add the search field Symbol to the landing page Artboard and set it as a template.

With this approach, if you need to change the color of that text box, it’s just one change to the Color Variable. You could also change the Style of a placeholder text once and apply it everywhere. Laying the groundwork makes iterating and scaling so much easier later on.

Taking your design system to the next level

As I mentioned, design systems are a lot more than just a collection of components. They speak directly to the needs of a design team or project by setting the right rules and guidelines in place.

A design system should answer questions like, “How do I apply this Style?” and “How do I use this component?” That way, everyone in your team will be able to make aligned decisions without needing to sync on every step.

Guidelines and agreements

There’s no right or wrong way to include guidelines and agreements in your design systems. The best practice you can apply here is settling on some ground rules with your team. That means bringing in devs, project managers and any other stakeholders who will end up interacting with the designs you create.

Guidelines don’t have to be limited to design, either. You can bring in your UX writer and establish a UX copy ecosystem right off the bat. You can also establish some ground rules with your devs so that you’re building out the design system in a way that’s most helpful for handoff.

Don’t forget spacing

With Sketch, you can use tools like Smart Layout to assign an internal logic to components. Setting up spacing rules is important to help you keep a defined grid that will make your designs look cohesive and balanced.

Smart Layout allows your layers to expand or shrink automatically in proportion to their content, directly communicating how you expect designs to behave in terms of margins and proportions.

Overrides

Don’t forget that you can override text, styles and colors in your Symbol instances. Overrides give your design system incredible flexibility and makes customizing Symbols a breeze. It’s one of the most useful tools you could have at your disposal.

Additionally, you can specify which overrides will be available for each component in Sketch. This gives design system managers greater control over how components and Symbols behave, all while preventing less familiar team members from implementing results that don’t follow the design system rules.

Design systems are at the heart of every great, scalable project. So one post isn’t enough to cover it all! Stay tuned for the next installment, where we’ll be discussing how to organize design systems in Sketch.

How Letterboxd used Sketch to design a home for cinephiles

2023-06-02T05:13:33+00:00

Letterboxd is a global social network for grass-roots film discussion and discovery. You can use it as a diary to record and share your opinion about films as you watch them — or just to keep track of films you’ve seen in the past. You can also showcase your favorites on your profile page, rate, review and tag films as you add them, and find and follow your friends to see what they’re enjoying. It’s like GoodReads for movies, and it was made in Sketch 😉

We recently chatted with co-founder Matthew Buchanan to learn about how Letterboxd came to be and how they’ve managed to succeed as an independent company. Matthew also oversees product and creative direction, so he was able to share how his team uses Sketch to bring Letterboxd to life.

How would you describe Letterboxd?

Letterboxd is a movie-tracking and list-making app (and website) with a social component. In terms of existing services, it’s most similar to GoodReads, the book-tracking service. Our members log the films they watch—no matter whether at the cinema, on streaming, or elsewhere—and post their reactions and reviews, which are shared into the feeds of their followers, facilitating discussion and discovery. They can also make and share lists (including keeping a watchlist of titles to see at a future date), complete challenges, find out where films are streaming, and generally commune over their shared love of cinema.

How did you come up with the idea for Letterboxd?

In the 2000s, I used a Mac app to catalog my DVD library. It was the pinnacle of skeuomorphic design: shiny plastic cases containing poster art rendered on wooden shelves. The app’s creators teased an online component at one point, but all that came out of it was an HTML export facility. Eventually, we got tired of waiting for someone else to build a good social film app. IMDb had existed for well over a decade, but there was no option to follow others on that platform. So we set about imagining how such a service might look and feel, and then we decided to build it.

View of film page provided by Letterboxd

We hear Letterboxd is independent and proud. Can you tell us more about what that means to you?

There are a couple of roads you can take when starting a business, and we liked the sound of going at our own pace and growing a product and a community over time. It’s an important part of our story that we were able to fund Letterboxd’s early development (through the design studio I co-founded in 2001) to the point where it has become a viable business in its own right, employing a small team of really cool folks, most of whom were superusers of the platform prior to becoming employees. I’m really proud of that journey.

How did Sketch become your tool of choice?

I could never get to grips with Photoshop for UI design work—it always felt like I needed fifty layers for even the simplest layouts. I started using Fireworks when Macromedia released version one, and really gravitated to what at the time was a unique design tool that was natively vector-based, but also provided rudimentary tools for bitmap editing. That product was mostly ignored following the acquisition by Adobe (and eventually killed), and Sketch debuted just as Fireworks was going through its death rattle. It was the perfect replacement, just at the right time.

View of profile page provided by Letterboxd

Tell us about the process of designing Letterboxd in Sketch. Are there any particular features that have helped to make your workflow easier?

Having files available online has been very useful. We started off with our source files in a shared Dropbox folder (a terrible idea), and adopted Abstract when it launched to help with version control. Now that Sketch’s tools are more robust in that area, we are able to rely totally on the first-party product to accomplish what we need.

Our design team is still just two to three people, so we are rarely working on the same file at the same time, but being able to follow each other’s cursors is useful for shared feedback sessions. I also love having a library of components to assist with design tasks, although ours is not as complete as it should be, so sometimes we end up riffing on design changes on top of screenshots, especially if time is limited.

I’m not sure many of them are too unique! As I suspect is the case with many other product teams, we’re designing extensions and revisions to an existing platform, which has its own business logic and visual approach, established over more than a decade. Sometimes the best way forward is to reimagine how a component works, but we don’t always have that luxury, so in some cases we might make a smaller or different change based on an existing platform convention, with a plan to extend or improve it in the future. We are constantly (re-)prioritizing work to help our members enjoy a better experience and to help our team better tend to our community.

View of journal archive provided by Letterboxd

What was it like to design for multiple platforms, especially when adding Apple TV to the mix?

I enjoy the challenge. In particular, I’ve thought a lot about whether we should try to present a uniform look everywhere or bend more to platform conventions in order to feel more at home — and more native to that group of users. We tend more to the latter direction, I think, mostly for pragmatic reasons. Even then, there’s a challenge in keeping up with the state of the art.

Our Android app is not using the latest Material Design conventions in some areas, and I’d like that to be an area of focus for us. The technical underpinnings of the Apple TV app came together very quickly, but it was certainly a challenge designing a user experience for that platform, deciding what features made sense to include (we don’t offer logging, for example, because user input via an on-screen keyboard is murderously slow).

What has been your greatest achievement with Letterboxd?

For me, it’s the whole journey of taking an idea, building out a private beta, launching publicly, and after nine years being able to hire our first two full-time staff members outside of our agency. That was a huge moment.

What’s your next milestone?

We don’t like to share plans too far in advance. Right now we’re working on some improvements to our streaming service filters, to make them even more useful, and on our activity feeds, to bundle up multiple entries from individual members. Further ahead we’ve acknowledged publicly that better support for TV series is an area of interest, and not without some very specific challenges.

We’re friendly with one of the production companies involved with the Philippou brothers’ Talk To Me, which A24 will release in the US later this year. I had the opportunity to watch it with them, and it’s an absolute firecracker, if you like elevated horror. I also really loved Rye Lane.

Letterboxd is available for iOS, Android and Apple TV.

6 tips for creating your presentations in Sketch

2023-05-25T13:51:21+00:00

You know we’ve got you with product design, but did you know you can also use Sketch to design presentations? You can even play your presentations right in Sketch or share them using a prototype link. Plus, you get to use your existing components to make sure it’s on brand.

Let’s take a look at some tips to get you started 👇

1. Kickstart your presentation with a template

Don’t let the blank page scare you! We’ve got some fancy presentation templates to get you started. You can swap out whatever you need — from Text Styles to Color Variables — to make them feel uniquely yours.

Of course, you can also create your own bespoke templates and components. Simply set up a few Artboards and check the Template box in the Inspector. This way, you’ll be able to repurpose them instead of building each slide from scratch. You can access your Artboard templates via the Components window (C) and the Artboard menu (A).

You can also create reusable components using Symbols — which are handy for repeating elements like headers.

2. Use auto linking to build your presentation

A quick and simple way to create a sequence of slides is by selecting each slide and choosing Prototype > Auto Link to Right Artboard from the menu. This will automatically link every Artboard to the one to its right.

Related: An in-depth look at prototyping in Sketch

You can also link to slides to the left or below your selected Artboard, if you prefer. For example, if you want to build your presentation from right to left instead, you can adjust the direction of the auto links through the Artboard Export setting in Settings > Layers.

Note: Be mindful that this will change the direction of any future auto links until you change your settings again.

Sharing your presentation is as easy as creating a shareable prototype link. This way, everyone with a link will be able to check out your slides. You can grab the link from the prototype’s Preview window on the Mac app. Simply tap on in the top-right corner of the window. From there, you can copy a link to the prototype to your clipboard or choose any other option in the menu. In the web app, you can copy the link through the document’s Prototype view.

Related: How to share a prototype

4. Bring in feedback with comments

Comments are a great tool for gathering feedback. You can use them to add more context and information for reviewers. For example, you might use comments to highlight key points, leave additional details, or offer clarifications on complex topics.

At the same time, stakeholders can use comments to share their feedback without directly editing your design. The best part? Commenting works both on the web and Mac app, regardless of the user. All you have to do is press N, and you’re ready to comment! Just be mindful that they’ll need a link to the document itself, as our prototype player doesn’t support comments.

5. Highlight your best iterations

After feedback comes revisions and iterations, but don’t worry! With version controls, you can make sure your presentation is always putting its best foot forward. Just star the version you’d like people to see by choosing File > Save and Star in the Mac app or by hovering over the version and clicking on the star icon in the web app. You can even add a small description if you’d like to give it some extra context.

Note: Adding a starred version means any un-starred versions will be hidden for Viewers on the web.

At the same time, you’ll still be able to browse through your version history, helping you keep track of your presentation’s evolution. This way, you can access previous versions of your project whenever you need to.

6. Think outside the Artboard

Your Canvas is infinite, so make sure you’re getting the most out of it. In fact, the space around your Artboards can become prime real estate for collaboration — or even to help you fight off stage fright. You can add some out-of-Artboard elements to include notes or instructions for yourself or your team. And why not grab some sticky notes from our Kanban Board template while you’re at it? But don’t worry. Nothing you add outside your Artboards will be visible when you play the presentation.

And there you have it. We hope these tips have given you the inspiration you need to start working on your next presentation. You’ve got this!

How to design a delicious-looking strawberry using just one layer

2023-05-18T08:16:59+00:00

A couple months ago, Sketch challenged us to create a unique design using just one layer. While freedom is great to explore and go wild, it’s fascinating how constraints can help us push creativity in so many interesting ways. In this challenge, I’ll show you how I used a single layer and tons of gradients to create a juicy and delicious-looking strawberry — this is the perfect tutorial to level up your gradients game and get comfortable designing more with less.

Before we dive in, here’s a quick look at the final illustration. Feel free to come back to it at any point in the tutorial to keep track of your progress!

There’s more to the strawberry than meets the eye, so don’t feel pressured to go through the whole tutorial in one go! Bookmark it for later 😉

Let’s get started!

1. Create an Artboard

First things first, let’s set up our Artboard — this will help us define the size and shape of our strawberry. Press A to create an Artboard, click anywhere on the Canvas and drag until you’re happy with its size. In this case, we’ll use 1200x860 px as our dimensions.

Tip: You can manually adjust these dimensions in the Inspector, so don’t worry if you’re not perfectly accurate when dragging.

2. Draw the strawberry shape

Press V to enable the Vector tool and start drawing the outline of your strawberry. Click anywhere on the Canvas to create points around the shape, and curve the lines by dragging the handles. Don’t worry about making it perfect, strawberries come in various shapes and sizes!

However, since we are only working with one layer, make sure to draw the leaves and the stem as part of the same path. Alternatively, you can draw them separately and then merge them into one layer using Layer > Combine > Union in the menu.

3. Add the base gradient

Now that we have our shape, let’s give it some color. Head to the Fill section in the Inspector and add a linear gradient. In our case, we’re starting with a lighter red #E81436 and then gradually making it darker using multiple color stops like #E50000, #D20000 and #BF0000.

As you can see, I’ve made sure the gradient stops only go as far as half of the strawberry’s width.

4. Create depth with shadows

Time to bring some depth to our strawberry using shadows — we’ll use multiple radial gradients stacked on top of each other. Play around with the placing of the shadows until you’re happy with how it looks.

Use multiple stops, between three and four, on each gradient and make sure to bring down the alpha value (opacity) progressively for every stop. For example in the case of some of our gradients, our first stop has an alpha value of 100, the second stop of 99, the third stop of 44 and the last one of 0.

You’ll find that the logic is the same throughout the whole tutorial: your first gradient stop should be the most opaque and the last stop should always be set to 0. In this case, I combined #590000 and #710000 and lowered their alpha value progressively throughout the gradient.

Play around with the in-betweens to your liking, but make sure it’s progressive.

5. Fill the leaves

Now, let’s fill the leaves and stem with small green gradients. Remember to follow the same logic: set the alpha value in the gradient’s first stop to 100 and lower it down progressively to 0.

Here are the green values I combined: #4DBE00, #00BB10, #97FF12, and #8FFF00.

6. Create the leaf structures

By layering hard-edged gradients on top of each other, you can create a kind of three-dimensional leaf structure. Try out these values: #325900, #218A00.

7. Add depth to the leaves

To give the leaves more depth, layer in additional gradients over the existing ones to darken the leaves towards the bottom. I used #325900, #218A00, #471900, and #000401.

8. Clean up the top edge

To create a clean transition from the strawberry to the leaves, you can place some radial gradients above the area — as you’ll see in the image below. First, add some red gradients using #DD0000. Don’t worry about adding multiple stops for this one.

Then, we’re going to use yellow tones to blend the area where the leaves meet the strawberry. Stack multiple gradients and use the following values for every stop.

Stop 1: #C90000, alpha 100
Stop 2: C94603, alpha 100
Stop 3. C0A805, alpha 100
Stop 4: CCAC00, alpha 0

9. Blend back the top

The previous step probably left your strawberry looking a bit blotchy. To smoothen out the colors, fill the strawberry again with radial gradients — adding stops from red to transparent.

10. Add some shine

To make our strawberry a real showstopper, add in a few white radial gradients. Make sure the stops decrease progressively until reaching alpha 0.

11. Make the shine organic

To make the shine a little less geometric, cover certain areas again with red gradients. This way, you’ll end up with more realistic shapes.

12. Create shiny contours for the seeds

No strawberry is complete without its seeds, and those seeds will need their own shiny glow. This is where the hard work begins. Use radial gradients — going from red to white — to create some elongated O’s. The goal is for these to work as the shiny contours for the seeds.

13. Add in the seeds

It’s finally time to add in the seeds. Create oval radial gradients, giving the center a yellow color and darkening the outer edges to give a sense of depth. When placing them, make sure to partially cover the glossy edges you created in the previous step. To give it a more finished look, add in some extra highlights to some of the exposed seeds.

Tip: To enhance the three-dimensional shape of the strawberry, pay attention to the different sizes and orientations you’ll need for the seeds. Sorry if this gets repetitive. 😜

14. Fill the stem

Last but not least, fill the stem with brown-green gradients to distinguish it from the leaves.

You can also give some depth to the tip of the stem with another radial gradient as I’ve done here.

15. Add noise

The strawberry is pretty much done, but I’d suggest adding a noise overlay to polish the look. Add one last fill and switch to the Pattern Fill tab. Then choose one of the included noise textures, set the opacity to 8%, and add a Multiply blend. This will give the strawberry a more natural texture. Depending on the size of your strawberry, you may also want to change the Type from Fill Image to Tile Image to reduce the size of the noise a bit.

16. Add a background color and shadows

This step will depend on your personal preference, but I added a background color to the Artboard (#252525). Then, I applied a few shadows to the layer with different opacities and blurs to help the strawberry stand out.

17. Add a reflection

You can also generate another shadow layer to serve as a reflection of the strawberry color. Then, overlay the shadows and reflection with additional shadows on top that have the identical color as the Artboard background (#252525, in this case).

There you have it — a delicious-looking strawberry illustration created in Sketch using just one layer. Great job! 👏🏻

If you like what you’ve created, we’d love to see it! Share your strawberry illustration with us on social media using the hashtag #MadeWithSketch. This way, you can showcase your work, inspire others, and connect with fellow designers who also enjoy using Sketch for their projects.

Remember, practice makes perfect, and the more you explore and experiment with Sketch, the more confident and skilled you’ll become in creating various illustrations and designs. So keep up the good work, and happy designing!

David Blum is a product designer based in Switzerland and our One-Layer Design Challenge winner. You can find him on Twitter or LinkedIn.

Sketch Blog

Behind the feature: How we took Smart Layout beyond Symbols (Part 2)

Identifying the issues

Setting up a safety net

Diving into the detail

Problem area 1: Creating layout consistency, regardless of direction

Problem area 2: Improving layout of layers overlapping along the layout axis

Problem area 3a: Eliminating spaces between hidden layers

Problem area 3b: Preserving space when hiding layers

Shipping our improvements

Meet the Maker: Matthew Skiles

How did you get started using Sketch?

What inspired you to create the work you’re sharing with us?

What tools and features in Sketch do you use the most?

What advice would you give to anyone looking to create something similar to your designs?

Meet the Maker: Duncan Horne

How did you get started using Sketch?

What inspired you to create the work you’re sharing with us?

What tools and features in Sketch do you use the most?

What advice would you give to anyone looking to create something similar to your designs?

Sketch in 2023: What have we been up to?

Taking a giant leap with Smart Layout

Closing the feedback loop

Bringing Sketch to even more screens

Building an even better Workspace

Introducing Figma imports, Templates and more

Coming back to the Mac App Store

Meet the Maker: Lucas Haas

How did you get started using Sketch?

What inspired you to create the work you’re sharing with us?

What tools and features in Sketch do you use the most?

What advice would you give to anyone looking to create something similar to your designs?

Meet the Maker: Volodymyr Kondriianenko

How did you get started using Sketch?

What inspired you to create the work you’re sharing with us?

What tools and features in Sketch do you use the most?

What advice would you give to anyone looking to create something similar to your designs?

Behind the feature: How we took Smart Layout beyond Symbols (Part 1)

What Smart Layout is — and isn’t

How Smart Layout actually works

The challenges we faced with Smart Layout

The road ahead

New in Sketch: A major upgrade to Smart Layout

Made for Symbols, destined for more

Smart Layout: Now in groups and Artboards

Great on stacks — and that’s just the start

The small things add up

New in the web app: Dark mode and better ways to share, sort and filter

Better sharing controls

Powerful sorting and filtering

Dark Mode

A beginner’s guide to icon design in Sketch

Creating a location pin icon using Subtract

Creating an eyeball icon using Difference

Creating a magnifying glass icon using Borders

How to create depth in Sketch

1. Draw a switch container and knob

2. Tone down the background

3. Add a gradient to the switch container

4. Add an inner shadow to the switch container

5. Add a drop shadow to the knob

6. Mask the knob and shadow into the switch container

7. Add a gradient to the knob

8. Soften the knob edges

9. Duplicate and shrink the knob

10. Flip the extrusion vertically

11. Soften the indentation

12. Add a slight outer bevel

13. Add a gradient to the background

Let’s talk shop: Time to reveal your layers and put your designs to the test

Design reviews

Show us your layers

How Forrest put a twist on fitness tracking — then did it all over again

Your guide to Sketch on iPhone and iPad

Browse your Workspace on the move

View documents in full detail

Create, view, resolve and respond to comments

Test prototypes on real devices

Mirror documents as you edit on your Mac

How ChibiStudio helps anime fans express their creativity