https://www.sketch.com/blog/feed.xml
Sketch Blog
Updates, articles and insights from the Sketch team.
https://www.sketch.com/images/metadata/icon-180.png
2024-03-18T08:06:51+00:00
© 2024 Sketch B.V.
Sketch Team
mail@sketch.com
https://www.sketch.com
https://www.sketch.com/blog/tripsy/
How Tripsy is building the perfect travel companion
Learn how the duo behind Tripsy uses Sketch to make travel planning an easy ride2024-02-29T13:33:02+00:00
2024-02-29T13:33:02+00:00
Ale Cubero
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/tripsy-header.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=3444fed2a4c4623491e2d14c1c358a04" srcset="https://sketch-cdn.imgix.net/assets/blog/tripsy-header.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=a3d127ec5d5f2a08c85d8074f8cbd444 360w, https://sketch-cdn.imgix.net/assets/blog/tripsy-header.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=403d84e083959210a0713d9555e621b0 390w, https://sketch-cdn.imgix.net/assets/blog/tripsy-header.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=077df87c43d8843e64e34453a4574786 640w, https://sketch-cdn.imgix.net/assets/blog/tripsy-header.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=770885abb91f70843e37af2571870f5d 768w, https://sketch-cdn.imgix.net/assets/blog/tripsy-header.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=a51e2c55565a9786058353e45fa51f91 1024w, https://sketch-cdn.imgix.net/assets/blog/tripsy-header.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=814e38478e70ae46b8299808c7cbf312 1220w, https://sketch-cdn.imgix.net/assets/blog/tripsy-header.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=08d5922e8b05403d46a81f88e5e4fc01 1440w, https://sketch-cdn.imgix.net/assets/blog/tripsy-header.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=b68c3ee063acaaca06daccfed34127fa 1600w, https://sketch-cdn.imgix.net/assets/blog/tripsy-header.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=3444fed2a4c4623491e2d14c1c358a04 1920w, https://sketch-cdn.imgix.net/assets/blog/tripsy-header.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=2d072a2a311ce9be10b2e3a0aff13979 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p>Planning is key to making the most of a trip — but there are many moving parts and it can sometimes feel overwhelming. As they traveled around the world, Tripsy founders <a href="https://www.thiagosanchez.com/">Thiago</a> and <a href="https://rafaelks.com/">Rafael</a> saw an opportunity to build an app that made planning and organizing trips easier and more enjoyable.</p>
<p>At <a href="https://tripsy.app/">Tripsy</a> they’ve thought of every single detail: from keeping all your information at hand, to real-time flight updates, calendar syncing or itinerary planning — to mention just a few.</p>
<p>We chatted with Thiago Sanchez, Tripsy’s co-founder and designer, about the app’s beginnings, their approach to design and how Sketch helps them along the way.</p>
<figure><img alt="A screenshot of the iPad and iPhone versions of Tripsy" src="https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch7.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=58ac494cde974f644111f8ed1d119adb" srcset="https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch7.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=89cb3ea07bb80c0a5297d0fe3d2f343c 360w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch7.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=0a7296cd52ce5a72003962f631a17aaf 390w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch7.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=bd18010fce97413beaeae8e9bb565bc6 640w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch7.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=751700899332b0d6bf806ffb2006f299 768w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch7.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=29c1c2443011ffc611ad8040f2bdf987 1024w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch7.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=e04e87ed33500336e66172dc6bf20581 1220w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch7.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=1803623e6da85094846b3ac07fe56b4d 1440w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch7.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=68bebe917d512d63d9baf872d3e58764 1600w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch7.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=58ac494cde974f644111f8ed1d119adb 1920w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch7.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=543006e08f0e5e959b80169d5b501cfc 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h3 id="can-you-tell-us-a-little-about-yourself-and-your-career">Can you tell us a little about yourself and your career?</h3>
<p>As strange as it may seem, I became interested in interface design shortly before I finished my studies. I got my degree in industrial design in 2009, during which I learned how to create physical products such as chairs, watches, and cars. However, as I researched ergonomics and user-centered design for electronic devices, I became increasingly interested in user interfaces. My introduction to the first iPhone in 2007 completely transformed my career path. Since then, I’ve had the privilege of working with clients around the world to create applications and icons for different industries.</p>
<p>Although I work with digital products and mobile apps, I always seek inspiration from different sources, such as architecture. Human behavior is intricate, and I often face challenges that are not limited to the digital realm.</p>
<h3 id="what-inspired-the-idea-and-concept-behind-tripsy-and-how-did-it-evolve-over-time">What inspired the idea and concept behind Tripsy and how did it evolve over time?</h3>
<p>My business partner and I used to work together as freelancers for many companies, and we shared a common interest in traveling and exploring new places worldwide. As we traveled a lot, we wanted a sophisticated and efficient way to plan and manage our travels.</p>
<p>During a call in 2018, he pitched the idea of creating an app for organizing trips. At the same time, I was planning a big trip to Europe, which I shared with him. After discussing our ideas, we decided to combine our knowledge and work together on developing an app for organizing trips. Since then, Tripsy has expanded and is now available in 9 languages worldwide.</p>
<h3 id="what-are-some-of-the-challenges-that-tripsy-aims-to-solve">What are some of the challenges that Tripsy aims to solve?</h3>
<p>There are several ways to travel — some travel on vacation, others for business. Sometimes, a trip is a honeymoon, but other times, it can be exploring an entire country. We had always envisioned creating a scalable application for trips of varying sizes and complexities, with diverse activities suitable for solo travelers, couples, or large groups.</p>
<p>We aim to provide users with helpful tools to enhance their travel experience. As soon as an activity is added to the itinerary, Tripsy begins to predict and organize important information such as changes in time zones, weather forecasts, and flight time connections.</p>
<figure><img alt="A screenshot of multiple widget designs in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch6.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=f4a81cd3f6ad1a1725248d407b0eb358" srcset="https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch6.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=3d7661bc74057b45747c088182a08187 360w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch6.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=d7f4bcb6c1f302c1e5c2945eb8089c70 390w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch6.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=62b3f2d8eaaa6a96ed25bea7e3be399b 640w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch6.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=3bb708b2662177c55faf5047c559dad3 768w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch6.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=17f0b3c1a8b172d7826f75921411ce71 1024w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch6.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=f10c52290ab194c4a2162d9e43ee5bb5 1220w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch6.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=e7026775438aa0ab9d40a20a227b6468 1440w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch6.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=03577b57d3cb4621129a5d7d1b22d576 1600w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch6.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=f4a81cd3f6ad1a1725248d407b0eb358 1920w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch6.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=2e4659381e7633e45d1764254bd2aaa5 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>Tripsy’s widgets help you keep all your plans at hand during your trip</p></figcaption></figure>
<h3 id="could-you-share-some-of-the-key-milestones-in-tripsys-journey-from-the-apps-beginnings-to-its-current-state">Could you share some of the key milestones in Tripsy’s journey from the app’s beginnings to its current state?</h3>
<p>Tripsy is celebrating its fifth anniversary, and we’re thrilled to say that version two is something that we’re extremely proud of. In this version, we designed the app’s navigation structure as it stands today, as well as our current app icon. Additionally, we added one of the most popular features: automation.</p>
<p>With a single flight reservation, we can automatically create a trip, add activities, organize an itinerary with round-trip flights, show weather conditions, attach reservations to the documents section, and let the user know if there are any flight changes. All of this just by forwarding a single email!</p>
<h3 id="what-does-design-mean-for-tripsy">What does design mean for Tripsy?</h3>
<p>It sounds obvious, but it means making it simple and easy to use. For us, design is also about deeply examining the problem at hand. We aim to develop a tool that is simple and easy to use for all types of travelers. We want to ensure people can use it easily and understand it without confusion. That’s why we value design guidelines and strictly follow the HIG for Apple devices — we know it’ll help us achieve our goal.</p>
<figure><img alt="A screenshot of Tripsys Symbol page" src="https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch4.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=180bf9f5c2f3c7436879d77848cd6d99" srcset="https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch4.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=c809fc2ace2ee194771e866a11dc3732 360w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch4.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=e534abb4264502c7b560e5d238a89471 390w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch4.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=835e42595b74745468662149220f4afc 640w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch4.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=63a688e69db91657e217ac6656aec688 768w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch4.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=a8e7f4ae0382af9c60271d4b1017aa9e 1024w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch4.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=450a510187c100a3d5aed5e0071fb10c 1220w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch4.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=c9cb99533feef664232f80613a4c7236 1440w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch4.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=f076082b6ea07a6b20c092629c7ea52d 1600w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch4.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=180bf9f5c2f3c7436879d77848cd6d99 1920w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch4.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=a496dd12f82dcb525088f66c7a09a8dd 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h3 id="tell-us-about-the-process-of-designing-tripsy-in-sketch-are-there-any-particular-features-that-have-helped-make-your-workflow-easier">Tell us about the process of designing Tripsy in Sketch. Are there any particular features that have helped make your workflow easier?</h3>
<p>I want to start with the basics. Sketch is a native application on Mac, which is the most important thing in my workflow. I used to use a lot of shortcuts, and I have no words to explain how easy it is to use the <a href="/docs/designing/vector-editing/">vector tool</a>, especially when I need to <a href="https://dribbble.com/shots/20989939-Tripsy-2-15-New-Icons">explore different app icon versions</a>. Customizing my toolbar streamlines my workflow a lot, which is something that as a solo designer at Tripsy, helps me optimize my time.</p>
<p>Our library of Symbols is quite extensive and we also have some customized Components. Personally, I find that having a section dedicated only to our Symbols is very helpful. I simply type the letter <kbd>C</kbd> in the Mac app to open the <a href="/docs/interface-and-settings/the-mac-app-interface/the-insert-window/">Insert Window</a> and have instant access to all of them. This feature greatly simplifies my work process.</p>
<figure><img alt="A screenshot of Tripsy inside Sketch" src="https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch3.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=0ff8b7a5d93d1f80d69316933e59dff7" srcset="https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch3.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=9481f25b15b5383ca443e66e8f45243b 360w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch3.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=78c6028936e643a62facce8a99a217e0 390w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch3.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=0351ed59fa6a46beda21f723b6c9a15c 640w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch3.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=2c60484004b6122237c75cb60d5caa3c 768w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch3.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=00c78fbcc9fd97e557c9fd062995f388 1024w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch3.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=ce993be7a3dff0165ff495d30d4a9f30 1220w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch3.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=947c75f7158f6d92be99835933f518a4 1440w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch3.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=fa201e62e604fd1d5e9edccda863616d 1600w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch3.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=0ff8b7a5d93d1f80d69316933e59dff7 1920w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch3.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=bb9767cfdf7a042c0923d7221fdf4124 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h3 id="is-there-anything-you-built-in-sketch-that-youre-particularly-proud-of">Is there anything you built in Sketch that you’re particularly proud of?</h3>
<p>I designed Tripsy entirely using Sketch. But working on the application icons was one of my favorite parts of the process, and I am very proud of the result. Sketch was the perfect tool for this task, and I can’t imagine using any other tool for it.</p>
<figure><img alt="A screenshot showing different Tripsys app icons" src="https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch5.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=7a153de3361b3b957d5a5ad7a0d45360" srcset="https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch5.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=79839c91db44f49a44685ea89094f1e1 360w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch5.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=d0e8b5cae1e7097deee1beb356487204 390w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch5.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=162d4b9521572a5bf0f203be5aa4bb41 640w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch5.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=b6bcc751466759dc210c5f4f09bc12f8 768w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch5.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=aac116c5945d847d127f53c6d786baa4 1024w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch5.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=531daa2e0ae6637e43af02c4308a5b02 1220w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch5.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=3a2fdc077105184584282ef36a726627 1440w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch5.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=2b170c123b6fe23de5a0dc4a42011c54 1600w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch5.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=7a153de3361b3b957d5a5ad7a0d45360 1920w, https://sketch-cdn.imgix.net/assets/blog/tripsy-sketch5.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=2f07e922e452deb8efdfa4eb83a91eeb 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>Tripsy’s care for details and design shows in the different variations of their app icon.</p></figcaption></figure>
<h3 id="what-keeps-you-coming-back-to-sketch-over-the-years">What keeps you coming back to Sketch over the years?</h3>
<p>I have been following Sketch since its first version. I remember when I was working on a project with my friend <a href="https://twitter.com/raphaellopesph">Raphael Lopes</a>, he received a beta version from <a href="https://twitter.com/MarceloMarfil">Marcelo Marfil</a>. As soon as I saw it, I realized its potential. We used Photoshop to create interfaces at the time, which seems crazy now. Since then, I’ve noticed the affection and dedication put into building Sketch. I can see the attention given to every detail and feature. Sketch has become my go-to design tool, and I am constantly amazed by its progress and advancements. Using Sketch feels intuitive, and I’m always eager to see new releases.</p>
<blockquote>
<p>Sketch has become my go-to design tool, and I am constantly amazed by its progress and advancements.</p>
</blockquote>
<h3 id="could-you-share-with-us-whats-next-for-tripsy">Could you share with us what’s next for Tripsy?</h3>
<p>We are currently developing version three — it’s been challenging and we’re excited to share more information about it soon. Apart from enhancing the app’s navigation experience, we’re also creating tools to assist our users better during their travels.</p>
<hr />
<p>Have you created something awesome in Sketch? We’re always on the lookout for projects! Let us know in our <a href="https://forum.sketch.com/">community forum</a>.</p>
https://www.sketch.com/blog/behind-smart-layout-part-3/
Behind the feature: How we took Smart Layout beyond Symbols (Part 3)
In our final post of this behind the feature series, Paulo and Torsten explain how they broke Smart Layout free from the confines of Symbols and brought it to groups and Artboards.2024-02-15T12:52:52+00:00
2024-02-15T12:52:52+00:00
Paulo Pereira
Torsten Radtke
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/2024-02/sl-btf-3-still.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=76f072ed6b82bd2aa5a3e50de0b50f0a" srcset="https://sketch-cdn.imgix.net/assets/blog/2024-02/sl-btf-3-still.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=c585fbc49d74b2b99ae60df6185bdf53 360w, https://sketch-cdn.imgix.net/assets/blog/2024-02/sl-btf-3-still.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=5d05a0a99b63cfcc8da07aaf8afcc77e 390w, https://sketch-cdn.imgix.net/assets/blog/2024-02/sl-btf-3-still.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=aede8282bbf90a4ced48be866cca64a0 640w, https://sketch-cdn.imgix.net/assets/blog/2024-02/sl-btf-3-still.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=829380c0365ceea8e2860c057be1eea1 768w, https://sketch-cdn.imgix.net/assets/blog/2024-02/sl-btf-3-still.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=3ca27e86ef7ecbc3484e7006b4cca0cf 1024w, https://sketch-cdn.imgix.net/assets/blog/2024-02/sl-btf-3-still.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=1c8b6e07495b7f9f71f24b1444bb5914 1220w, https://sketch-cdn.imgix.net/assets/blog/2024-02/sl-btf-3-still.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=7d7007d7a5e0addbeea95e25fd0201b8 1440w, https://sketch-cdn.imgix.net/assets/blog/2024-02/sl-btf-3-still.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=6e876d0745197dc6e42f0bbf1389492b 1600w, https://sketch-cdn.imgix.net/assets/blog/2024-02/sl-btf-3-still.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=76f072ed6b82bd2aa5a3e50de0b50f0a 1920w, https://sketch-cdn.imgix.net/assets/blog/2024-02/sl-btf-3-still.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=25a7a0fe9269f7cd4dfb1f4f6af92efc 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p><em>In November 2023, we shipped a <a href="/blog/smart-layout-beyond-symbols/">major upgrade to Smart Layout</a> and in this series, we’re looking behind the scenes at how we made it happen. <a href="/blog/behind-smart-layout-part-1/">In the first post</a>, the team set the scene for this this work. <a href="/blog/behind-smart-layout-part-2/">In the second</a>, they described the process of fixing issues and improving reliability and predictability. In this final installment, they explain how they gave Smart Layout a new lease of life beyond Symbols.</em></p>
<hr />
<p>After making Smart Layout <a href="/updates/improved-smart-layout-when-working-with-nested-layouts/">a lot more reliable</a>, the stage was set to work towards our ultimate goal: breaking it free from Symbols, and bringing it to groups and Artboards.</p>
<p>This wasn’t as easy as it may seem: we couldn’t simply make everything about Smart Layout work outside of Symbols just as it did inside of them, at the flick of a switch. This is due to two characteristics of groups and Artboards that makes them distinct from Symbols:</p>
<ol>
<li>They don’t impose any limitations on what people can edit within them.</li>
<li>They lack the permanent point of reference that a Symbol source provides.</li>
</ol>
<p>These aspects form the basis of most of the challenges we’d be facing in this project.</p>
<p>On top of this, we knew we also had to consider Smart Distribute, and introduce some much-needed quality-of-life updates to Smart Layout as a whole. But let’s first dig into those two challenging characteristics in a little more detail.</p>
<p>Let’s start by exploring challenge that each of these areas present.</p>
<h2 id="exploring-the-challenges">Exploring the challenges</h2>
<h3 id="challenge-1-creative-freedom-outside-of-symbols">Challenge 1: Creative freedom outside of Symbols</h3>
<p>For Smart Layout in Symbols, there are only two major actions that lead to a layout change that a designer can take:</p>
<ul>
<li>Resizing layers indirectly (due to text overrides or swapping nested Symbols)</li>
<li>Hiding and un-hiding nested Symbols</li>
</ul>
<p>With editing outside of Symbols having no limitations like these, we had to consider all the additional ways that layers may change that call for layout reflows, which fall into three familiar areas:</p>
<ol>
<li>Resizing layers — either directly, through resizing a layer or one of its ancestor groups, or indirectly, by changing individual text or line size properties, and more.</li>
<li>Adding new layers — by inserting totally new layers, duplicating existing layers with <kbd>⌘</kbd><kbd>D</kbd> or <kbd>⌥</kbd>-drag, or pasting copied or cut layers from the clipboard.</li>
<li>Deleting layers — by the normal methods of deleting or cutting.</li>
</ol>
<h3 id="challenge-2-staying-consistent-without-a-source">Challenge 2: Staying consistent without a source</h3>
<p>One of our fundamental goals was to make the overall experience of Smart Layout consistent and predictable regardless of whether you use it inside a Symbol, group, or Artboard.</p>
<p>In particular, one foundational Smart Layout principle should still be valid when we apply it to groups: only changes in size will affect the layout, never changes in position.</p>
<p>But there’s an added difficulty: in contrast to Smart Layout in Symbols, there is no “source”, no original state to have a look at or take measurements from. As soon as someone makes a change to the child layers of a group, the original state is gone. There is no pristine copy like the Symbol source.</p>
<p>This difficulty is the main reason for some subtle inconsistencies in behavior. So, an operation like hiding a child layer won’t affect the layout, because the information to restore the layout of the adjacent child layers is missing (once the smallest of the adjacent spaces is removed via hiding and the layout is changed, there’s no way to get that information back).</p>
<p>To document the behavior and to make sure future changes don’t break it, most of our existing unit tests got a group-related counterpart, so the total number of unit tests related to Smart Layout almost doubled.</p>
<h2 id="responding-to-actions">Responding to actions</h2>
<p>After we identified our challenges, we started to tackle the three areas of changes that a designer might make to layers: resizing, deleting, and inserting. Let’s look at each of these in detail.</p>
<h3 id="what-happens-when-you-resize-a-layer">What happens when you resize a layer?</h3>
<p>Smart Layout in Symbols has a single trigger: changing an override resulting in a size change of a layer (let’s leave out hiding and unhiding nested Symbols by overriding for this scenario).</p>
<p>For Smart Layout in groups, however, there are more triggers:</p>
<ul>
<li>You can resize layers directly, either by dragging on the Canvas, setting a specific value in the Inspector, or by dragging on the <em>W</em> or <em>H</em> symbols in the size Inspector</li>
<li>You can resize layers indirectly (e.g. by changing the text contents or text attributes, including via in the Inspector)</li>
<li>You can size Symbol instances to fit</li>
<li>You can replace Symbol instances with another one.</li>
</ul>
<p>So, there are more places where we needed to take a snapshot before any changes take place. Smart Layout already worked for groups inside Symbols, so for the Inspector, we “only” needed to show the same Smart Layout controls for regular groups as well.</p>
<p>Resizing, by dragging on the Canvas or on the Inspector controls, provided an additional challenge: we needed to decide when to take the snapshot before the change. We had two options: taking a single snapshot before the drag started (and treating all changes as relative to that snapshot) <em>or</em> treating each drag step as single change.</p>
<p>The main issue with the latter option is that the spatial relationships between the unchanged layer(s) and the changed layer along the layout axis can change, resulting in a behavior change while dragging. A layer previously unaffected by the changed layer can suddenly resize, too — that was too unpredictable, so we discarded it.</p>
<p>The following animation shows the difference between the two approaches:</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchKGAnJDAR4X" autoplay="lazy" loop="true" alt="An aimation showing dragging with a single snapshot vs snapshot at each drag step"></mave-clip>
<figcaption><p>Our two potential approaches to snapshots when dragging left us with a clear winner in terms of consistency and predictability.</p></figcaption>
</figure>
<h3 id="what-happens-when-you-delete-a-layer">What happens when you delete a layer?</h3>
<p>Deleting a child layer of a group with Smart Layout is very similar to hiding a nested Symbol instance. So we went for the same behavior, including removing the smallest adjacent spacing.</p>
<p>Any overlapping (specifically: overlapping the trailing edge in the layout direction) unchanged sibling layers would be shortened by the width of the deleted layer. While this is desirable if the unchanged layer overlaps both edges, it can mess up a layout if the overlapping layer is smaller along the layout axis.</p>
<p>During development, this danger of messing up the layout by a seemingly harmless deletion lead to us introducing an option to pause Smart Layout. With this, a designer has the option to delete a layer without affecting the layout, and then resume Smart Layout after (more on this later). While this solved the issue, we wanted to make things smarter and not rely on pausing as a complete workaround.</p>
<p>In the end, we decided to let a deleted layer only affect unchanged layers if they completely wrapped the deleted layer along the layout axis. Partially overlapping layers are not affected. In the example below, deleting the grey background layer doesn’t shrink the partially overlapping layers to zero – they are now unaffected.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchIsYlZZpRol" autoplay="lazy" loop="true" alt="An animation showing deletion of partially overlapping layer"></mave-clip>
<figcaption><p>Deleting the grey background layer doesn’t affect the overlapping layers in the middle of it.</p></figcaption>
</figure>
<h3 id="what-happens-when-you-insert-a-layer">What happens when you insert a layer?</h3>
<p>Inserting a new child layer to a group with Smart Layout is similar to unhiding a nested Symbol instance, but with one major difference: we don’t have any information on the new layer’s exact positioning and how far its new sibling layers need to move to accommodate it.</p>
<p>In contrast to hiding a nested Symbol instance, deleting always results in us losing information (how big is the smaller spacing which was just removed?) Inserting, as its counterpart, has no way to derive that information from the current layout. There’s only one way to solve that: the designer needs to decide where and how the new sibling layer should be positioned.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchKAHWErvAYv" autoplay="lazy" loop="true" alt="An animation showing all insertion positions and insertion marker while moving mouse"></mave-clip>
<figcaption><p>Our approach to inserting layers involves predicting possible insertion positions and showing a marker for these.</p></figcaption>
</figure>
<p>We provide three possible insertion positions: between two layers, touching the previous layer, or touching the next layer (along layout direction). While the touching positions just insert the layer and no additional space, the midway position also adds some space, so after the layer is inserted, it will be surrounded be the same space it was dropped into at the left and right (or top and bottom, respectively). In any case, it’s easy to freely reposition that layer if needed.</p>
<p>In addition to dropping in a new layer from outside the group, it’s also possible to insert a layer by duplicating or copy-pasting an existing child layer within the group.</p>
<h2 id="completing-the-experience">Completing the experience</h2>
<p>As we started to get things working inside groups and Artboards in our internal builds, we quickly realized we wanted to complete the Smart Layout experience in three main ways:</p>
<ul>
<li>Setup — making it easy to enable, disable, and set direction without stopping your flow.</li>
<li>Pausing — making it possible to temporarily stop a layout from reflowing as you make changes inside a group or Artboard.</li>
<li>Stacks — including special accommodations for stack-like layouts (rows or columns of evenly-spaced layers), even if Smart Layout isn’t strictly limited to them.</li>
</ul>
<p>Let’s tackle each of these in a bit more detail.</p>
<h3 id="speeding-up-setup">Speeding up setup</h3>
<p>There are three steps to setting up a group with Smart Layout:</p>
<ol>
<li>Select some layers</li>
<li>Group those layers</li>
<li>Pick a Horizontal or Vertical layout for the group, and then (optionally) change its direction.</li>
</ol>
<p>As separate actions, these felt a like a chore which broke the design flow. We wanted to compress them into something that felt like one swift action and avoid sending people to the Inspector in the process.</p>
<p>We started by solving step three, and naturally turned to keyboard shortcuts. But having six choices (2 axes × 3 orientations) plus the option to disable layout defied a standard keyboard shortcut.</p>
<p>We looked around for other actions with similar choices that have <a href="https://www.sketch.com/docs/shortcuts/">shortcuts</a>, and alignment was a great parallel. For alignment, we use <kbd>⌃</kbd><kbd>⌘</kbd> followed by either <kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd> <kbd>H</kbd> or <kbd>V</kbd>. We liked how natural it felt to use those keys, but wanted to avoid having to use some combination of modifiers for the shortcut “base” that people would just have to remember without an obvious mnemonic.</p>
<p>So we decide to use what we called a “two-stage” shortcut in Sketch for the first time.</p>
<ul>
<li>First, press and release <kbd>⌘</kbd><kbd>L</kbd> (L for Layout)</li>
<li>Then, press either <kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd> <kbd>H</kbd> or <kbd>V</kbd> to set the layout direction
<ul>
<li>Or disable Layout by pressing <kbd>L</kbd> again (since that’s where your finger already is).</li>
</ul>
</li>
</ul>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchlbAMdlMEO7" autoplay="lazy" loop="true" alt="An animation showing the Layout shortcuts in use, with overlays for the keys pressed."></mave-clip>
<figcaption><p>The two-stage shortcut for setting a layout and direction with your selection.</p></figcaption>
</figure>
<p>We found this super easy to get used to: you only have to remember <kbd>⌘</kbd><kbd>L</kbd> (easy enough), and the rest is just like alignment. Plus, despite being a two-stage shortcut, it felt like a single action that covered enabling layout, changing axis/direction, or disabling it altogether.</p>
<p>Finally, solving step two: grouping the layers. This was much easier: if your selection has non-grouped layers in it, when you hit <kbd>⌘</kbd><kbd>L</kbd> we’ll group those layers for you as a convenience.</p>
<p>In the end, we think we managed to compress those three distinct steps into something that feels easy to remember and swift to use: select your layers, press <kbd>⌘</kbd><kbd>L</kbd>, and pick a direction, carry on.</p>
<h3 id="allowing-for-pause">Allowing for pause</h3>
<p>Managed layout systems can be a blessing and a curse. On one hand, they’re incredibly useful in automating things so the layout stays as you intended. On the other, that automation can sometimes come in when you don’t want it to, and inadvertently cause a bit of a domino effect.</p>
<p>This is particularly true of Smart Layout, because it reacts to changes made at any depth, and because it accommodates any layout arrangement, inviting designers to break away from evenly structured layouts.</p>
<p>In our internal builds, our designers soon found themselves wanting to do just that on occasion, only to find out that the system kept following them along, making it difficult to break away. We tried making it easier to disable Smart Layout, but that didn’t feel right, because designers often wanted the system to kick back in once they were done making an exceptional change.</p>
<p>So, we created a way to <em>pause</em> Smart Layout: press <kbd>⌥</kbd><kbd>⌘</kbd><kbd>L</kbd> and it’ll stop adapting to any changes you make. You can press it again to resume, but it’ll automatically resume once you clear your selection. So you know exactly when Smart Layout is paused, a toast at the bottom of the Canvas indicates this, which you can also dismiss to resume it.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchnwZouwwydC" autoplay="lazy" loop="true" alt="An animation showing showing SL working, then being paused to do some work that necessitated it, then resuming, and working again.."></mave-clip>
<figcaption><p>There when you need it, but not when you don’t.</p></figcaption>
</figure>
<h3 id="working-with-smart-distribute">Working with Smart Distribute</h3>
<p>As we noted in <a href="/blog/behind-smart-layout-part-1/">our first post</a>, even though one of Smart Layout’s key principles is to support any layout arrangement, stack arrangements (evenly spaced single-file rows or columns of layers) are incredibly popular — so, we wanted to better accommodate them.</p>
<p>We’ve long had a <a href="/docs/designing/layer-basics/aligning-layers/#moving-multiple-layers-with-smart-distribute">Smart Distribute</a> feature precisely to make it easier to work with stack layouts. It helps designers adjust the spacing between all layers of an evenly-spaced selection or group of layers, and also easily reorder those layers. Additionally, our <a href="/docs/designing/layer-basics/aligning-layers/#using-tidy-to-align-layers">Tidy feature</a> creates an even stack arrangement with a single click, with options to easily change spacing.</p>
<p>Even if we did nothing, if a group with Smart Layout had its layers laid out as an even stack, our Smart Distribute features would also be available. We also knew that users wouldn’t necessarily be able to distinguish between the two features, nor should they have to — it should all just work. So, we looked to improve how the two features work together when they both naturally occur.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktch24TjBHgZib" autoplay="lazy" loop="true" alt="An animation showing how Smart Distribute and Smart Layout can work together."></mave-clip>
<figcaption><p>Smart Layout and Smart Distribute blend together seamlessly.</p></figcaption>
</figure>
<p>First, we made it easier to lay out stacks. Previously, if you wanted to evenly space layers using a specific horizontal or vertical spacing value, you’d have to press Tidy first, then adjust the value. We made it so you could directly enter a value, saving you that extra click.</p>
<p>Second, we made it easier to rearrange stacks and adjust their spacing. Previously, you’d only see on-Canvas handles for Smart Distribute in an evenly-spaced group if you selected the group itself. We knew that this would be annoying alongside Smart Layout, where you’d want to select a layer in a stack to resize it (and have the layout adapt) followed by adjusting its spacing and/or rearranging it in the stack. Now, when you select a layer <em>in</em> an evenly-spaced group, the on-Canvas Smart Distribute handles also appear, as well as the horizontal and vertical spacing values in the Inspector.</p>
<p>Finally, we made sure that Smart Layout would keep tidied things tidy. Smart Layout takes into account the stack’s spacing when adding layers into a stack, be it when duplicating or dropping them in from the outside. Additionally, adjusting the stack’s spacing causes the layout to adapt.</p>
<h2 id="shipping-the-update">Shipping the update</h2>
<p>Much like the release strategy we employed when <a href="/blog/behind-smart-layout-part-2/">we worked on making Smart Layout more reliable</a>, we released Smart Layout in groups as an experimental feature as soon as we could. Even if it was imperfect, it gave designers the opportunity to use and give valuable feedback as we continued to build towards a public release.</p>
<p>Once again, as we’ve mentioned in previous posts, we owe a lot of thanks to the wonderful folks in our <a href="https://forum.sketch.com/">Community Forum</a> who shared their experiences with us throughout the period that Smart Layout in groups was available as an experimental feature. That feedback helped us shape our final release and gave us invaluable gut checks on decisions along the way.</p>
<p>All told, it was a few months after our Experimental feature release that we shipped the final version of Smart Layout in groups. In that time, we worked through feedback, fixed bugs and gave it some all-important polish. Hopefully this trio of blog posts gives you a good idea of why we took our time to get things right. Moreover, we hope you enjoy it in practice!</p>
https://www.sketch.com/blog/meet-the-maker-andrey-prokopenko/
Meet the Maker: Andrey Prokopenko
“I would advise you to start with a sketch, form a general composition, and then layer by layer add elements and little things that will fill the illustration.”2024-02-08T09:30:08+00:00
2024-02-08T09:30:08+00:00
Andrey P.
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-andrey-prokopenko-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=08a65474f35345089648e27ff9ad12a1" srcset="https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-andrey-prokopenko-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=71412488c5499c9560cb56fcaa942468 360w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-andrey-prokopenko-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=36c005275a74319ec016442877973f4d 390w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-andrey-prokopenko-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=1e8587b0e0f455954645080945b07d10 640w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-andrey-prokopenko-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=c2c3f30070d78e681f1255fa2d12ce36 768w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-andrey-prokopenko-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=1f1cbd6d356da79828ac6b7a41ffb426 1024w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-andrey-prokopenko-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=d194419a1e9bef991efd05e4ce5b017b 1220w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-andrey-prokopenko-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=6960c087c283df796288e9100d2271ac 1440w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-andrey-prokopenko-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=fa6c9cdfbc26f1251b1119132dc941f3 1600w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-andrey-prokopenko-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=08a65474f35345089648e27ff9ad12a1 1920w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-andrey-prokopenko-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=299f02b3c164250ab663285f4266eada 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">The Meet the Maker series is all about getting in touch with designers who squeeze every bit of power from our beloved Mac app. Today we’re chatting to Andrey Prokopenko, a freelance designer and illustrator from Kiev.</p>
<h2 id="how-did-you-get-started-using-sketch">How did you get started using Sketch?</h2>
<p>I first started working in Sketch in the summer of 2016 and fell in love with the app almost immediately. At first, I used Sketch only in the office at work, and at home I worked in Photoshop. But over time, Sketch has become my main tool — I do all my work in it.</p>
<h2 id="what-inspired-you-to-create-the-work-youre-sharing-with-us">What inspired you to create the work you’re sharing with us?</h2>
<p>I was lucky to live in those times (2015) when Dribbble was a platform for an elite community of designers where participants demonstrated high skill and innovation. I was inspired by the work of really incredible designers and illustrators, copied styles and wanted to ultimately create something of my own that would inspire others.</p>
<p>This motivated and forced me to work harder to not fall behind, and also to offer something to this community and the world. That‘s how the series of Inspirational Illustrations was born.</p>
<figure><img alt="An image showing Andreys illustration of a forest and castle" src="https://sketch-cdn.imgix.net/assets/blog/andrey-forest.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=b64abc86d1067a6f8a6a81f562e8fc73" srcset="https://sketch-cdn.imgix.net/assets/blog/andrey-forest.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=339d1a0fc24dd9f6ba4b70909644c1ea 360w, https://sketch-cdn.imgix.net/assets/blog/andrey-forest.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=34ab677659fbf8df6242e7ff731d948b 390w, https://sketch-cdn.imgix.net/assets/blog/andrey-forest.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=4943ae46f47bd9f86f43bd333e5e4731 640w, https://sketch-cdn.imgix.net/assets/blog/andrey-forest.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=31a319567e47f1cb07d497f494e666fb 768w, https://sketch-cdn.imgix.net/assets/blog/andrey-forest.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=68dc0f060984afa2d129623b08927032 1024w, https://sketch-cdn.imgix.net/assets/blog/andrey-forest.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=bd1fab345267388f58b3defb176af50f 1220w, https://sketch-cdn.imgix.net/assets/blog/andrey-forest.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=c2685c837dccdd3712e66a4fd3ffb15e 1440w, https://sketch-cdn.imgix.net/assets/blog/andrey-forest.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=e516d7b7b50eb245fc5b69a7883c3c83 1600w, https://sketch-cdn.imgix.net/assets/blog/andrey-forest.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=b64abc86d1067a6f8a6a81f562e8fc73 1920w, https://sketch-cdn.imgix.net/assets/blog/andrey-forest.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=a7c444a8b4a5529b76d03d9f1a166252 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>We love Andrey’s attention to detail — the grasses, trees, and especially the chess piece city in the background.</p></figcaption></figure>
<h2 id="what-tools-and-features-in-sketch-do-you-use-the-most">What tools and features in Sketch do you use the most?</h2>
<p>Most often, I use the Vector and Pencil tools. And I’m also excited to work with Gradients and Gaussian Blur in Sketch.</p>
<h2 id="what-advice-would-you-give-to-anyone-looking-to-create-something-similar-to-your-designs">What advice would you give to anyone looking to create something similar to your designs?</h2>
<p>I would advise you to start with a sketch, form a general composition, and then layer by layer add elements and little things that will fill the illustration. Just in case, save every 3-5 minutes.* Remember, you can always do better! You have to feel when you need to stop — and when to exceed your capabilities.</p>
<figure><img alt="An image showing the evolution of Andreys illustration" src="https://sketch-cdn.imgix.net/assets/blog/andrey-process.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=1417cd491c90949cfd21dd7753c8ea57" srcset="https://sketch-cdn.imgix.net/assets/blog/andrey-process.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=20304d66b6d136d8da78ac1ce6abf75d 360w, https://sketch-cdn.imgix.net/assets/blog/andrey-process.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=748c2ea8bb20dd5823743d185b1bbb29 390w, https://sketch-cdn.imgix.net/assets/blog/andrey-process.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=46e5002dbc49212e0f1bab16641af9d5 640w, https://sketch-cdn.imgix.net/assets/blog/andrey-process.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=c27fd943beff0586b67fe3032d43258f 768w, https://sketch-cdn.imgix.net/assets/blog/andrey-process.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=298f66fcb9f7aadfed67c3bde1c282b0 1024w, https://sketch-cdn.imgix.net/assets/blog/andrey-process.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=7687f4370279657f915a8ae307506706 1220w, https://sketch-cdn.imgix.net/assets/blog/andrey-process.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=863ce7f75efa24d9c3a9df009d15fe54 1440w, https://sketch-cdn.imgix.net/assets/blog/andrey-process.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=01948c82069739364bef16e46f98ae11 1600w, https://sketch-cdn.imgix.net/assets/blog/andrey-process.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=1417cd491c90949cfd21dd7753c8ea57 1920w, https://sketch-cdn.imgix.net/assets/blog/andrey-process.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=7c447c2f8d96f3e4f9057427d64f4c7d 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>An example of how one of Andrey’s illustrations evolves, progressively adding more detail, depth and artistic flourishes.</p></figcaption></figure>
<p class="footnote">* A note from Sketch: Saving manually at intervals applies to local documents if you haven’t enabled automatic saving to your Mac. Workspace documents are automatically saved as you design. You don’t need to manually save, unless you want to create a new version (^⌘S).</p>
https://www.sketch.com/blog/ten-features-I-asked-the-sketch-team-to-build-but-turns-out-they-already-had/
10 features I asked the Sketch team to build but turns out they already had
After years of using Sketch, I joined the team and suggested a bunch of features — turns out they already existed. Here’s a list of 10 features I initially proposed, which might be new to you.2024-02-04T09:48:27+00:00
2024-02-04T09:48:27+00:00
Rafa Conde
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/rafa-header.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=53f00ec8ccd0703c1a41194375a6a693" srcset="https://sketch-cdn.imgix.net/assets/blog/rafa-header.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=e48314b42eba4f4eafd184faa8c4da09 360w, https://sketch-cdn.imgix.net/assets/blog/rafa-header.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=0d6afe378ef6dfae5a2eb653fa2fb4e5 390w, https://sketch-cdn.imgix.net/assets/blog/rafa-header.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=e26acd3cf56758e603a667136da742fa 640w, https://sketch-cdn.imgix.net/assets/blog/rafa-header.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=b54591229f309e306324b84abf0aa98b 768w, https://sketch-cdn.imgix.net/assets/blog/rafa-header.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=e0fecaa4d0a9afafd4cfce8bdc46c107 1024w, https://sketch-cdn.imgix.net/assets/blog/rafa-header.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=9cbdbff8062e1e9bd98f06a7d91d3e95 1220w, https://sketch-cdn.imgix.net/assets/blog/rafa-header.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=c109025fbdf590e31ad5e2e17a94f788 1440w, https://sketch-cdn.imgix.net/assets/blog/rafa-header.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=78681d959054be63e31601b885f1f0ca 1600w, https://sketch-cdn.imgix.net/assets/blog/rafa-header.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=53f00ec8ccd0703c1a41194375a6a693 1920w, https://sketch-cdn.imgix.net/assets/blog/rafa-header.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=12b80af1bc376ca047ece9a389515ff7 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p>After almost a decade of using Sketch and being a devoted fan of both the product and the team, I got the once-in-a-lifetime opportunity to join their ranks and have a say in how to shape the product from the inside.</p>
<p>I came in with a bunch of ideas and suggestions (as a lot of us fans surely have) and I was delightfully surprised (and a bit embarrassed) to learn that a lot of these “tiny improvements” already had in fact been built — some of them years ago!</p>
<p>So I’ve compiled a list of 10 features that I asked the team to build when I joined, but in fact already existed and maybe, some of them might also be new to you.</p>
<h3 id="1-copy-as-png">1. Copy as PNG</h3>
<p>Something that I often do is share an Artboard with my team on Slack, or send it to a Messages conversation. Before, I was either exporting it to a 2x PNG, or dragging it from the Layer List of the preview area from the Inspector because I’m fancy like that and I know all the shortcuts…</p>
<p>This is fine, but I was missing something like “Copy as PNG” that is available in other tools. When I asked internally if we could build this, I found out that we have an even <a href="/docs/designing/importing-and-exporting/">better solution</a>: <strong>if you copy an Artboard and paste it outside of Sketch, it will paste it as a PNG!</strong></p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktch6JLndVggz8" autoplay="lazy" loop="true" alt="A video showing how to copy an Artboard and pasting it in a Messages conversation"></mave-clip>
<figcaption><p>Copying an Artboards makes it easy to share a specific design outside of Sketch.</p></figcaption>
</figure>
<h3 id="2-set-layer-as-anchor-when-aligning">2. Set layer as anchor when aligning</h3>
<p>I’m sure this scenario is all too familiar to a lot of you: select two or more layers, hit <strong>Align to Top</strong>, for example, and the layers all get correctly aligned to the top… OF THE WRONG LAYER 🙄.</p>
<p>I asked the team if we could come up with a simple solution and, once again, the team gently informed that we had already built it. <strong>When there are multiple layers selected, clicking in one of the selected layers again will set it as the anchor.</strong> From here, anything else you align will do so around it.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchgkA4w1sJCH" autoplay="lazy" loop="true" alt="A video showing different anchor layers from which align the rest of the layers from"></mave-clip>
<figcaption><p>Click on one of the selected layers to set it as an anchor.</p></figcaption>
</figure>
<h3 id="3-automatically-set-prototype-target-by-proximity">3. Automatically set prototype target by proximity</h3>
<p>One day I was putting together a feature presentation in Sketch, and I was creating some “slides” in the Typical Designer Fashion™* of arranging Artboards in the X and new chapters in the Y axis.</p>
<p>After it was all done, I wanted to present it as a Prototype, but before I could do that, I had to connect all the Artboards with the Prototype Spaghetti**. And I have to admit, it’s not an enjoyable process, especially if you later have to introduce a new slide, and reconnect the dingus all over again.</p>
<p>Guess what, did you know that you can <a href="/docs/prototyping/adding-links/#automatically-linking-artboards">set Prototype targets by proximity</a>? <strong>You can select all Artboards and hit Auto Link to Right Artboard</strong>. Setting this feature will make sure they’re all connected in the way you expect them to, and if it’s the rightmost Artboard in the Canvas, it’s smart enough to link to the one in the row below it.</p>
<p>*Not actually a trademark.</p>
<p>**Not the official term, Rafa’s words do not represent the views of his employer.</p>
<p>***Again, not a trademark.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchlCxdBM10Ue" autoplay="lazy" loop="true" alt="A video showing how to link an Artboard to the Artboard to its right"></mave-clip>
<figcaption><p>Wondering how to make a great presentation? We’ve got you covered.</p></figcaption>
</figure>
<h3 id="4-click-drag-to-add-hotspot-layers">4. Click-drag to add Hotspot layers</h3>
<p>While we’re talking about Prototyping, and while we’re being vulnerable with each other… I… I used to draw rectangles on top of my work, make them transparent, and then use them as a trigger for a Prototype action 🥺.</p>
<p>I saw the light when the team told me you can clear Selection, hit <kbd>I</kbd> and click-drag to <a href="/docs/prototyping/adding-hotspots/#adding-hotspots">create a new Interaction layer</a>. From there you’ll automatically be put in the state where you just have to select the target.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchLj9LS50Xtx" autoplay="lazy" loop="true" alt="A video showing how to add an interaction layer"></mave-clip>
<figcaption><p>We love rectangles, but they’re not always necessary 😉.</p></figcaption>
</figure>
<h3 id="5-rename-multiple-artboards">5. Rename multiple Artboards</h3>
<p>This is one of those things that I had accepted years ago, and never bothered to check if it had changed (spoiler: <a href="/docs/designing/layer-basics/renaming-layers/#renaming-multiple-layers">it has</a>). I used to use a plugin to rename multiple Artboards at the same time.</p>
<p>Say I design a bunch of Artboards for a login flow, and then want to rename them all to “Login Screen #1”, etc.
Not only can you do this natively in Sketch, but you can do it in style. With multiple Artboards selected, hit <kbd>⌘</kbd><kbd>R</kbd> to show the <strong>Rename Selected Layers</strong> sheet where you can optionally match existing names, and even use regular expressions.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchbBcDjUYvMT" autoplay="lazy" loop="true" alt="A video showing how to renamae multiple layers"></mave-clip>
<figcaption><p>Keeping your layers tidy used to be a tedious task — not anymore.</p></figcaption>
</figure>
<h3 id="6-select-a-bunch-of-artboards-and-turn-them-into-symbols">6. Select a bunch of Artboards and turn them into Symbols</h3>
<p>This one is so obvious that I am not even sure why it’s here? Maybe this didn’t use to be the case, but did you know that you can <strong>select multiple Artboards and hit <kbd>⌘</kbd><kbd>Y</kbd> to convert each to a new Symbol</strong>?</p>
<p>This is especially useful when I’m designing a bunch of icons in a grid, and then want to turn them all into Symbols and add them to my Library.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchYbFbBcMqOS" autoplay="lazy" loop="true" alt="A video showing how to turn an Artboard into a Symbol"></mave-clip>
<figcaption><p>Focus on your design, then turn them to Symbols in seconds.</p></figcaption>
</figure>
<h3 id="7-artboard-template-previews">7. Artboard Template Previews</h3>
<p>I absolutely adore <a href="/blog/introducing-artboard-templates/">Artboard Templates</a>, and I think it’s a very underrated feature — it’s a great way to get started without the constraints of a Symbol (since I intend to add things to it and change things around). I use them all the time. For example, I’ll create a simple Artboard of an iPhone frame that includes the correct device corner radius, the Dynamic Island and Home Indicator, or sometimes I’ll even design the basic structure of an app with a custom tab bar, for example.</p>
<p>Long story short, I use Artboard Templates a lot. However, I missed being able to make my custom Artboard Templates look as nice and tidy as the default ones and have their own custom thumbnails. Guess what? Turns out you can.</p>
<p><strong>You can create a 92x92 Artboard with the name <em>Previews / Name of Artboard Template</em> and Sketch will use that as the thumbnail</strong> — it will even sync if you add it as a Library!</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchM8pZVRCQlu" autoplay="lazy" loop="true" alt="A video showing how to add a thumbnail to an Artboard Template"></mave-clip>
<figcaption><p>Previews can be helpful to keep things organise and quickly find what you need.</p></figcaption>
</figure>
<h3 id="8-copy-color-in-different-code-formats">8. Copy color in different code formats</h3>
<p>I had <a href="/docs/symbols-and-styles/color-variables/#using-color-variables-in-developer-handoff">c</a><a href="/docs/symbols-and-styles/color-variables/#using-color-variables-in-developer-handoff">opied Color Variables in different formats</a> in the web app but little did I know you can also do this via the Mac app — such a time saver!</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktch40ukTU7uMy" autoplay="lazy" loop="true" alt="A video showing how to copy color in different formats from the Inspector"></mave-clip>
<figcaption><p>Color Variables are great for keeping colors consistent between design and code projects.</p></figcaption>
</figure>
<h3 id="9-open-windows-when-relaunching">9. Open windows when relaunching</h3>
<p>I usually work on the same 2-3 documents for a long time: often my main document, along with couple of Libraries that I like to keep open.</p>
<p>I’m also a weirdo* who likes to reboot my Mac often, and quit apps regularly if I’m not working with them for a while. So when I would relaunch Sketch I would have to look for and open all of those documents again — I even looked for a setting somewhere that would let me reopen windows when relaunching the app.</p>
<p>Turns out Sketch out-Mac-nerded me by respecting the system’s preference! To have your windows restored when launching Sketch go to <strong>System Settings > Desktop & Dock</strong> and uncheck the <strong>Close windows when quitting an application</strong> preference.</p>
<p>*Not actually a weirdo, I don’t judge how people use their Macs (much). There’s no right or wrong way to use your tools (for the most part).</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchIQZbivfIjE" autoplay="lazy" loop="true" alt="A video showing un checking the Close windown when quitting an application in the Systems Settings"></mave-clip>
<figcaption><p>Setting things up the way you like it is a crucial step when setting your workflow.</p></figcaption>
</figure>
<h3 id="10-resize-with-keyboard-">10. Resize with Keyboard (<kbd>⌘</kbd><kbd>↑</kbd><kbd>↓</kbd><kbd>→</kbd><kbd>←</kbd>)</h3>
<p>And my last and most recent finding: you know when you make small and precise layer position adjustments? Your mouse or trackpad are not the best tools for this job, so you go old school and use the arrow keys on your keyboard, right? One pixel up <kbd>↑</kbd>,one pixel to the left <kbd>←</kbd>.</p>
<p>But when it comes to <a href="/docs/designing/layer-basics/resizing-and-rotating-layers/#resizing-layers">resizing</a>, I would head to the Inspector, select the Width or Height text area, and increase the values by one with the arrow keys. But then sometimes I would have to defocus that and adjust its position because I wanted it to grow one pixel to the left, for example.</p>
<p>Well, turns out you can use <kbd>⌘</kbd><kbd>←</kbd><kbd>→</kbd> to increase or decrease the width, and <kbd>⌘</kbd><kbd>↑</kbd><kbd>↓</kbd> for height. Plus, it will also work with the <kbd>⇧</kbd> modifier and respect the nudge values set in your settings.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktch8YuB2JRNzE" autoplay="lazy" loop="true" alt="A video increasing and decreasing the width and height"></mave-clip>
<figcaption><p>Resizing with your keyboard can help you stay precise and speed things up.</p></figcaption>
</figure>
<hr />
<p>And that’s 10! I wonder if any of these were a surprise to you just like they were to me, and better yet, I’d love to hear about one of your recent discoveries in our community forum. I’ll be there!</p>
https://www.sketch.com/blog/behind-smart-layout-part-2/
Behind the feature: How we took Smart Layout beyond Symbols (Part 2)
In our second Behind the feature post, Paulo and Torsten take us through how they tackled some of Smart Layout’s biggest issues and took the feature a big step forward. 2024-01-11T09:31:03+00:00
2024-01-11T09:31:03+00:00
Paulo Pereira
Torsten Radtke
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/2024-01/sl-btf-2-still.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=c24a3762ce1bc8c30603391587073c2e" srcset="https://sketch-cdn.imgix.net/assets/blog/2024-01/sl-btf-2-still.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=1218318da56bb34ce495c95415c1773e 360w, https://sketch-cdn.imgix.net/assets/blog/2024-01/sl-btf-2-still.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=85284d48c5f0e137f5ced335a93bbf57 390w, https://sketch-cdn.imgix.net/assets/blog/2024-01/sl-btf-2-still.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=6ce010946e3ba7de95fa478d730231f1 640w, https://sketch-cdn.imgix.net/assets/blog/2024-01/sl-btf-2-still.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=077215256eb1dfa4e51080cc4e120725 768w, https://sketch-cdn.imgix.net/assets/blog/2024-01/sl-btf-2-still.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=39bb8dbcf85f89604ed3da9dfd0c5dcf 1024w, https://sketch-cdn.imgix.net/assets/blog/2024-01/sl-btf-2-still.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=0d56734a987265d120a8e1e08bad5391 1220w, https://sketch-cdn.imgix.net/assets/blog/2024-01/sl-btf-2-still.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=b4f4ed03ab0c8ad787af15e943904b94 1440w, https://sketch-cdn.imgix.net/assets/blog/2024-01/sl-btf-2-still.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=8949f1ac4a0ba2b5fa2987e9de8f0f8a 1600w, https://sketch-cdn.imgix.net/assets/blog/2024-01/sl-btf-2-still.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=c24a3762ce1bc8c30603391587073c2e 1920w, https://sketch-cdn.imgix.net/assets/blog/2024-01/sl-btf-2-still.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=6c2c61e579f1129d3514e2a219a0dbc9 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p><em>In November 2023, we shipped a <a href="https://www.sketch.com/blog/smart-layout-beyond-symbols/">major upgrade to Smart Layout</a> and in this series, we’re taking a look behind the scenes of how we made it happen. <a href="https://www.sketch.com/blog/behind-smart-layout-part-1/">In the first post</a>, 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.</em></p>
<hr />
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2 id="identifying-the-issues">Identifying the issues</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>At the end of a long and thorough investigation, we found a few problem areas to focus on:</p>
<ol>
<li><strong>Inconsistent rules between different directions.</strong> 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.</li>
<li><strong>Nested layouts along the same axis.</strong> 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.</li>
<li><strong>Cleaning up space when removing layers.</strong> Removing layers from a layout presents an additional challenge. We not only have to account for space the layer <em>itself</em> took up, but also the space <em>around</em> it, otherwise the design will be left with excessive space and look wrong. While this did happen, it didn’t quite match expectations.</li>
</ol>
<p>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.</p>
<h2 id="setting-up-a-safety-net">Setting up a safety net</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2 id="diving-into-the-detail">Diving into the detail</h2>
<p>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.</p>
<h3 id="problem-area-1-creating-layout-consistency-regardless-of-direction">Problem area 1: Creating layout consistency, regardless of direction</h3>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchyHho7Za5ai" autoplay="lazy" loop="true" alt="A video showing how Smart Layout affects right-to-left and left-to-right layouts."></mave-clip>
<figcaption><p>Right-to-left layouts now behave like mirrored versions of left-to-right layouts</p></figcaption>
</figure>
<h3 id="problem-area-2-improving-layout-of-layers-overlapping-along-the-layout-axis">Problem area 2: Improving layout of layers overlapping along the layout axis</h3>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchdFho3wWuIL" autoplay="lazy" loop="true" alt="A video showing how Smart Layout works with nested layouts along the same axis."></mave-clip>
<figcaption><p>Making nested layouts like this work as you’d expect involves three separate actions: resizing, repositioning and moving.</p></figcaption>
</figure>
<h3 id="problem-area-3a-eliminating-spaces-between-hidden-layers">Problem area 3a: Eliminating spaces between hidden layers</h3>
<p>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:</p>
<ol>
<li>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.</li>
<li>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.</li>
</ol>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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!</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchNx0dIVQ7XK" autoplay="lazy" loop="true" alt="A video showing how Smart Layout works when removing spaces in layouts."></mave-clip>
<figcaption><p>Removing the smallest adjacent space(s) when hiding layers keeps the correct spacing in layouts like this.</p></figcaption>
</figure>
<h3 id="problem-area-3b-preserving-space-when-hiding-layers">Problem area 3b: Preserving space when hiding layers</h3>
<p>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.</p>
<p>As we <a href="https://www.sketch.com/blog/behind-smart-layout-part-1/">outlined in our first post</a>, 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 <strong>Pin to Edge</strong> and <strong>Fix Size</strong> constraints. These are already available to any layer within a group, but also work in the context of Smart Layout.</p>
<p>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.</p>
<p>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.</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktch2g87FR0nAZ" autoplay="lazy" loop="true" alt="A video showing how the preserve space when hidden checkbox works."></mave-clip>
<figcaption><p>Sometimes you’ve just gotta ship a checkbox.</p></figcaption>
</figure>
<h2 id="shipping-our-improvements">Shipping our improvements</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Our first ideas was to ship these updates in <a href="http://sketch.com/beta/">Beta releases</a> only, but our Betas require effort to opt-in. Instead, <a href="https://www.sketch.com/experimental/">we added a new Experimental Features settings panel</a> to <a href="https://www.sketch.com/releases/mac/#version-95.1">v95 of the Mac app</a>. This allowed designers to try out work-in-progress features, share their feedback via <a href="https://forum.sketch.com">the community forum</a>, and switch them off whenever they needed to. We released our work under the <strong>Better Smart Layout Reliability</strong> feature option and, knowing that it was easy to switch off at any time, enabled it by default for maximum exposure.</p>
<hr />
<p>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.</p>
<p><em>To keep up with series, keep an eye <a href="/blog/tags/behind-the-feature/">on the blog</a> or follow us on <a href="https://www.twitter.com/sketch">X</a> or <a href="https://mastodon.design/@sketch">Mastodon</a> for updates.</em></p>
https://www.sketch.com/blog/meet-the-maker-matthew-skiles/
Meet the Maker: Matthew Skiles
“For years now I’ve used Sketch every day — and wouldn’t want it any other way.”2024-01-08T15:29:28+00:00
2024-01-08T15:29:28+00:00
Matthew S.
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-matthew-skiles-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=42239c26196dca1cbe4dee30f256df10" srcset="https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-matthew-skiles-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=b53b24f638e2712f32c9d6bdd150b690 360w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-matthew-skiles-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=7d23ea6783c70db998bb8a9cf5be8369 390w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-matthew-skiles-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=cec18f11363e8b38dc147c084694bb52 640w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-matthew-skiles-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=1cda72f2c715f8d61a390232cbe8b24d 768w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-matthew-skiles-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=ae93041a9b52e5631b39a846b9d35745 1024w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-matthew-skiles-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=a5813b704f29a2b36beb5dda6b66fbfb 1220w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-matthew-skiles-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=ffdc2b0018a88045545e9d62301834c3 1440w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-matthew-skiles-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=3546b5fc37c226c26f64ffd490f3cd5a 1600w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-matthew-skiles-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=42239c26196dca1cbe4dee30f256df10 1920w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-matthew-skiles-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=5619a73186d50eef31c093e8c31672dd 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">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.</p>
<h2 id="how-did-you-get-started-using-sketch">How did you get started using Sketch?</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2 id="what-inspired-you-to-create-the-work-youre-sharing-with-us">What inspired you to create the work you’re sharing with us?</h2>
<p>We needed an app icon design for a Mastodon app called <a href="https://radiant.social/">Radiant</a>. 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.</p>
<figure><img alt="" src="https://sketch-cdn.imgix.net/assets/blog/matthew-radiant-icon.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=789612ea76fa7cd8c25b20ccf4a6221f" srcset="https://sketch-cdn.imgix.net/assets/blog/matthew-radiant-icon.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=76e02e9782b90374c9c72102d728e117 360w, https://sketch-cdn.imgix.net/assets/blog/matthew-radiant-icon.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=ab21020bec8417fb0b6c7206ce62a2f2 390w, https://sketch-cdn.imgix.net/assets/blog/matthew-radiant-icon.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=e4ce9b7554336a18b6a615a0e5b9476a 640w, https://sketch-cdn.imgix.net/assets/blog/matthew-radiant-icon.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=310ac0c44b8ea070cd6fb1139b7f3846 768w, https://sketch-cdn.imgix.net/assets/blog/matthew-radiant-icon.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=0aa732b4a4fd2a97f20ecb88794db540 1024w, https://sketch-cdn.imgix.net/assets/blog/matthew-radiant-icon.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=33f6acbe3ae6c8c288d40d5e1b194fa5 1220w, https://sketch-cdn.imgix.net/assets/blog/matthew-radiant-icon.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=eeb0f2527e9891d46c12717bf4404c72 1440w, https://sketch-cdn.imgix.net/assets/blog/matthew-radiant-icon.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=39eceffe74c9188db1be1c98df382e21 1600w, https://sketch-cdn.imgix.net/assets/blog/matthew-radiant-icon.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=789612ea76fa7cd8c25b20ccf4a6221f 1920w, https://sketch-cdn.imgix.net/assets/blog/matthew-radiant-icon.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=f1cc4bc424df4690f632c8a753ec8deb 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>Matthew’s icon for Radiant - made in Sketch.</p></figcaption></figure>
<p>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.</p>
<h2 id="what-tools-and-features-in-sketch-do-you-use-the-most">What tools and features in Sketch do you use the most?</h2>
<p>Gradient Fills and Gaussian Blurs — so much magic can come from those two.</p>
<h2 id="what-advice-would-you-give-to-anyone-looking-to-create-something-similar-to-your-designs">What advice would you give to anyone looking to create something similar to your designs?</h2>
<p>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.</p>
https://www.sketch.com/blog/meet-the-maker-duncan-horne/
Meet the Maker: Duncan Horne
“If you see a really cool icon design with a crazy effect, try and recreate it yourself.”2024-01-08T15:00:53+00:00
2024-01-08T15:00:53+00:00
Duncan H.
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-duncan-horne-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=9247019a8817bc16fa9d0498a20238d5" srcset="https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-duncan-horne-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=30bb24d0e82c94a69ad62d1401c79e1e 360w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-duncan-horne-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=ed5cc7f1c5d9c9db7575e2924421f0d6 390w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-duncan-horne-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=105d51cf162285138731c532bf1f60fd 640w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-duncan-horne-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=b91d37209df802024281fdcec4396b58 768w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-duncan-horne-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=ccca06d1837b5140b7e75bdf7a99a7f1 1024w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-duncan-horne-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=55362445ede9766a68c2b0898eafd92e 1220w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-duncan-horne-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=ea269dbc30bbf9d1209220518895cdb6 1440w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-duncan-horne-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=347ea1384d0a41f4b0582c4a76e29a76 1600w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-duncan-horne-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=9247019a8817bc16fa9d0498a20238d5 1920w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-duncan-horne-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=22d6566cf97522ca9251ef88ed1b816b 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">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 <a href="https://www.duncandesign.online/">Duncan Horne</a>: a freelance icon designer, as well as a front-end developer and “some other things in between”.</p>
<h2 id="how-did-you-get-started-using-sketch">How did you get started using Sketch?</h2>
<p>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.</p>
<h2 id="what-inspired-you-to-create-the-work-youre-sharing-with-us">What inspired you to create the work you’re sharing with us?</h2>
<p>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.</p>
<figure><img alt="An image showing a Wolverine illustration, created by Duncan" src="https://sketch-cdn.imgix.net/assets/blog/duncan-wolverine.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=134d4b6eb7714b8b8d6fc46066a877d1" srcset="https://sketch-cdn.imgix.net/assets/blog/duncan-wolverine.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=8253154741da7569cc0073c8ca4bf8eb 360w, https://sketch-cdn.imgix.net/assets/blog/duncan-wolverine.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=a19a0e22a218eaf0e4f74180b81cc34c 390w, https://sketch-cdn.imgix.net/assets/blog/duncan-wolverine.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=4a19518d852d79a92fd74d67ff58f4a3 640w, https://sketch-cdn.imgix.net/assets/blog/duncan-wolverine.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=543b2bba7f4af9b296189131a78acc7b 768w, https://sketch-cdn.imgix.net/assets/blog/duncan-wolverine.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=2e4c083055a6c3bfa1ca963f996601db 1024w, https://sketch-cdn.imgix.net/assets/blog/duncan-wolverine.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=71e2633b8df87cecfd0ea28eabe4d9c4 1220w, https://sketch-cdn.imgix.net/assets/blog/duncan-wolverine.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=9c6483020e0c0ce72ca3defa1dfed6ff 1440w, https://sketch-cdn.imgix.net/assets/blog/duncan-wolverine.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=28d6dba9a870cde243cfef4a3075565f 1600w, https://sketch-cdn.imgix.net/assets/blog/duncan-wolverine.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=134d4b6eb7714b8b8d6fc46066a877d1 1920w, https://sketch-cdn.imgix.net/assets/blog/duncan-wolverine.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=0bd92979961d7ed20a7e904fbdc05340 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>Duncan’s Wolverine illustration — made in Sketch.</p></figcaption></figure>
<p>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.</p>
<p>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.</p>
<h2 id="what-tools-and-features-in-sketch-do-you-use-the-most">What tools and features in Sketch do you use the most?</h2>
<p>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!</p>
<h2 id="what-advice-would-you-give-to-anyone-looking-to-create-something-similar-to-your-designs">What advice would you give to anyone looking to create something similar to your designs?</h2>
<p>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.</p>
https://www.sketch.com/blog/sketch-in-2023/
Sketch in 2023: What have we been up to?
Let’s take a look back at everything we’ve shipped this year — from major Smart Layout updates, to importing Figma files, and a whole lot more!2023-12-12T10:19:44+00:00
2023-12-12T10:19:44+00:00
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/2023-12/sketch-in-2023-static.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=7c07e919b27a92a91be890bf09e67bfd" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-12/sketch-in-2023-static.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=631f3aba03d3cb44bfeeaf816f702841 360w, https://sketch-cdn.imgix.net/assets/blog/2023-12/sketch-in-2023-static.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=31a4c41b4d88237db70b15c14a44abce 390w, https://sketch-cdn.imgix.net/assets/blog/2023-12/sketch-in-2023-static.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=f426ab207c950e5f17049cafa66d17fc 640w, https://sketch-cdn.imgix.net/assets/blog/2023-12/sketch-in-2023-static.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=29f6f30461f361a80b15012566177bce 768w, https://sketch-cdn.imgix.net/assets/blog/2023-12/sketch-in-2023-static.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=67cec338c06723c1c4a3375762376c08 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-12/sketch-in-2023-static.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=a2798240bcbca1bae292a17979f64cfd 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-12/sketch-in-2023-static.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=214ad83565f55b04a3eda85d8ab3c73f 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-12/sketch-in-2023-static.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=3abc9817d192216fdaa278fd09265076 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-12/sketch-in-2023-static.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=7c07e919b27a92a91be890bf09e67bfd 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-12/sketch-in-2023-static.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=f33d08698a4ef70b465025905274f030 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">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.</p>
<div class="btc-tip">
Looking for a TL;DR? Get all the headlines in our <a href="https://www.youtube.com/watch?v=v9GWRiesKLU">two-minute recap video</a>.
</div>
<h2 id="taking-a-giant-leap-with-smart-layout">Taking a giant leap with Smart Layout</h2>
<p>One of <a href="/blog/whats-next-for-sketch/">our goals for the Mac app in 2023</a> was to take a major leap with <a href="/docs/designing/smart-layout/">Smart Layout</a>. As the year comes to an end, we’re pretty happy to say we’ve done just that.</p>
<p>We started by making Smart Layout’s existing behavior <a href="/updates/improved-smart-layout-when-working-with-nested-layouts/">more reliable and predictable</a>, especially how spacing collapses when you hid a nested Symbol. We also <a href="/updates/smart-layout-improvements/">improved behavior for different layout directions</a>. Then, we shipped a new <a href="/updates/experimental-features/">experimental features menu</a> — giving everyone a chance to try and share feedback on our future Smart Layout improvements.</p>
<p>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.</p>
<p>In November, we released a major update and our biggest leap with Smart Layout yet. <a href="/blog/smart-layout-beyond-symbols/">Smart Layout is now available wherever you need it</a> — 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.</p>
<p>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.</p>
<p>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!</p>
<figure class="embed no-border">
<mave-clip class="video-player" poster="custom" theme="sketch" embed="sktchaZU7cBWSmj" autoplay="lazy" loop="true" alt="A video showing how Smart Layout affects layers in Sketch."></mave-clip>
</figure>
<h2 id="closing-the-feedback-loop">Closing the feedback loop</h2>
<p>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.</p>
<p>Today, you can give, receive and discuss feedback <a href="/updates/commenting/">in the Mac app</a> as you’re designing, <a href="/updates/commenting-on-iphone-and-ipad/">in our View & Mirror app</a> 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.</p>
<p>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.</p>
<p>To truly close the feedback loop, we added <a href="/updates/resolve-comments/">the option to resolve comments</a>. 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.</p>
<figure class="no-border"><img alt="A screenshot showing comments in the Sketch Mac app." src="https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-feedback%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=2334590cb4c49ea2da3e582142f847e1" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-feedback%402x.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=cd6a3acc05b49c86e555389f242f27e1 360w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-feedback%402x.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=f1cb81257546814b6fb066a614f195e7 390w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-feedback%402x.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=1840dde8967b48f62248b51c47bf5968 640w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-feedback%402x.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=341af9f6222b8c3a779776d95f6b5cef 768w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-feedback%402x.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=86e84ebc88cb8fc3ef2f6f41ad1b81eb 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-feedback%402x.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=c10a4a5e6c635d6e3b48b771b7ecfedb 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-feedback%402x.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=32eb1fd963c16e37027541635f12f96f 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-feedback%402x.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=8fdccf8129aa7a7b06a41e50b526d7fd 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-feedback%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=2334590cb4c49ea2da3e582142f847e1 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-feedback%402x.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=b3b5de4695d53b88646ed5911113be35 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /></figure>
<h2 id="bringing-sketch-to-even-more-screens">Bringing Sketch to even more screens</h2>
<p>2022 saw us ship an <a href="/blog/iphone-app/">all-new iPhone app</a> 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.</p>
<p>With <a href="https://apps.apple.com/us/app/sketch-view-and-mirror/id1609224699">Sketch — View & Mirror</a>, 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.</p>
<p>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 href="/updates/ios-app/">a full Canvas view for the iPad</a>. 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.</p>
<p>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!</p>
<p>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).</p>
<figure class="no-border"><img alt="An image showing the Sketch — View & Mirror app on iPhone and iPad." src="https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-ios%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=d9bf0139a0bb60dc74645703a17913a0" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-ios%402x.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=eadd831782f42824b9b9ef9666880c1a 360w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-ios%402x.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=b6c36b92d52916379972a13cc15571dd 390w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-ios%402x.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=e854552c64bafeb84f5fa6a914c7222c 640w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-ios%402x.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=6e793631bfe24b15123ac875c156310c 768w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-ios%402x.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=dcabe41116b9aa3aa9fc1fb9540fb213 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-ios%402x.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=0e2b24075f8dbc4a45e74f7c24dac578 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-ios%402x.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=949de08749ccf73be5d3958d062c3e98 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-ios%402x.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=bb95b48b6b526eb9abec6b068e370453 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-ios%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=d9bf0139a0bb60dc74645703a17913a0 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-ios%402x.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=df1cb28a3f2cf9189b61c2f78ad9f851 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /></figure>
<h2 id="building-an-even-better-workspace">Building an even better Workspace</h2>
<p>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.</p>
<p>If you make full use of your Workspace, it likely means you have a lot of files to browse through. To help with that, <a href="https://www.sketch.com/updates/collections/">we added Collections</a> — another level of organization inside your <a href="https://www.sketch.com/docs/getting-started/projects-and-collections/#organizing-with-projects">Projects</a>. Much like Projects, we designed Collections to be as workflow-agnostic as possible, so you can group and organize documents <a href="https://www.sketch.com/blog/projects-collections-guide/">in any way that makes sense to you</a>.</p>
<p>On top of Collections, we added <a href="https://www.sketch.com/updates/better-sorting-and-filtering/">new filtering and sorting options</a> to the web app, making it easier to find the exact document you need. Meanwhile in the Mac app, we introduced a <a href="https://www.sketch.com/updates/new-save-dialog/">redesigned save dialog</a>, which takes full advantage of Collections and adds better search, navigation, and previews.</p>
<p>Back on the web app, we gave document share settings a major overhaul. <a href="https://www.sketch.com/updates/new-sharing-modal/">The redesigned modal</a> has three clear tabs, making it easier to set who you share your designs with, and what they can access.</p>
<figure class="no-border"><img alt="A screenshot showing an abstract interpretation of Collections in Sketch." src="https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-collections%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=8018804465d1de83cfa38460d4f06ace" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-collections%402x.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=8b6ef102de935533158ca6ae64f8817b 360w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-collections%402x.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=5b63d008a5f340b6481bd73d9b12e3b4 390w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-collections%402x.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=a1914208b55f41f6ae8421f8bf7c4b78 640w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-collections%402x.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=117ed1057cfd8ce8d7da5f6e95d8a191 768w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-collections%402x.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=22631e30bd060aa2a5835be4ca4d1d50 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-collections%402x.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=a6b91654cdb7795a5a68151da0d606a2 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-collections%402x.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=c4342fc1449d194f99aa62d6aa839832 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-collections%402x.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=cc01bc90ee26afa2f81faf0b6f41180e 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-collections%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=8018804465d1de83cfa38460d4f06ace 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-collections%402x.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=38fefc5879fa81c2efbb22a9ef087f60 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /></figure>
<h2 id="introducing-figma-imports-templates-and-more">Introducing Figma imports, Templates and more</h2>
<p>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.</p>
<p>At the start of the year, we added support for <a href="https://www.sketch.com/updates/import-your-figma-files/">importing Figma files</a>. Now, switching tools is easy as dragging your .fig docs onto our app icon. We also <a href="https://github.com/sketch-hq/fig2sketch">open sourced the underlying file converter</a> for others to use and help us improve on.</p>
<p>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 <a href="https://www.sketch.com/blog/guide-to-templates/">over 200 design templates</a>, 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.</p>
<p>You can also now <a href="https://www.sketch.com/updates/templates/">mark documents in your Workspace as templates</a> 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.</p>
<p>Creating your own Workspace templates pairs nicely with a new option we shipped to <a href="https://www.sketch.com/updates/document-libraries/">enable Libraries on a per-document basis</a>. 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.</p>
<p>For those of you who care about naming your layers, we’ve added <a href="https://www.sketch.com/updates/multi-layer-renaming/">powerful multi-layer renaming</a>. 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.</p>
<p>Finally, we’ve made a some big improvements to <a href="https://www.sketch.com/updates/selection-improvements/">selection and dragging</a> — there’s a lot to talk about here (so much <a href="https://www.youtube.com/watch?v=baYNWwFlyNQ">we made a whole video about it</a>) — from additional indicators when you’ve selected layers within a larger Symbol, to being able to hold <code>X</code> to drag a marquee selection without moving the layer you’re currently hovering over. You’ll really feel the difference here.</p>
<figure class="no-border"><img alt="A screenshot showing a selection of templates in the Sketch Mac app." src="https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-templates%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=1d0fd80a2f418f2d436ae0c3cbe76d42" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-templates%402x.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=02e02aee4cff8299c75e6d71bc70b1e7 360w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-templates%402x.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=7b7b4255b0370ad089a553df7f7856e5 390w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-templates%402x.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=7b76a0bd4a281155b2968c90c60b7f84 640w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-templates%402x.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=41cd657401dd256198384e67dd095b9b 768w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-templates%402x.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=82bdeadd1a277b619252359fe8cad5ab 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-templates%402x.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=dc7c938792b2f65bedf022e802653f1a 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-templates%402x.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=07a15d7c3e8e0bd143aa36ce993bd5f9 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-templates%402x.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=a7a2d8acfa3cb2561e20c0b56137d867 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-templates%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=1d0fd80a2f418f2d436ae0c3cbe76d42 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-templates%402x.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=1899e2bca013ef8e720a405ef6c0879b 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /></figure>
<h2 id="coming-back-to-the-mac-app-store">Coming back to the Mac App Store</h2>
<p>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 <a href="https://www.sketch.com/updates/available-on-the-mac-app-store/">back on the Mac App Store</a>. 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.</p>
<p>Apple were also kind enough to give us a write-up, detailing what they love about Sketch — <a href="https://apps.apple.com/us/story/id1708335344">check it out</a>!</p>
<figure class="no-border"><img alt="A screenshot showing the Sketch icon in the Mac App Store." src="https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-mas%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=9edd29b52d0770742212a2f0a9a90edb" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-mas%402x.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=1e7608ea5324ca1e597e4fcbf1a4ae09 360w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-mas%402x.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=f18bc9316c5da075a557f657be0496e8 390w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-mas%402x.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=8eb85c80bf4e337007e3b31dc242d3d4 640w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-mas%402x.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=405d0c17c0aadf1a28d929df51a31e6e 768w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-mas%402x.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=270376ae0eaf3c62bae36bd48da3c7e1 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-mas%402x.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=a77de5e50cccccb02624288a4fc753b0 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-mas%402x.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=eb2bed95720ce9ddc4452a103fa46d88 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-mas%402x.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=3b9b5b1099c40a96bfdffe9690a1455c 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-mas%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=9edd29b52d0770742212a2f0a9a90edb 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-12/2023-mas%402x.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=c874de45945c2c6a1a80d333d07e0807 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /></figure>
<hr />
<p>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.</p>
<p>As ever, we’re <a href="https://forum.sketch.com/">over in the community forum</a> 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.</p>
<ul>
<li><a href="https://www.sketch.com/updates/">See every feature we’ve shipped</a></li><li><a href="https://www.sketch.com/releases/mac/">Read the release notes for every Mac update</a></li><li><a href="https://www.sketch.com/signup/">New to Sketch? Sign up here</a></li>
</ul>
https://www.sketch.com/blog/meet-the-maker-lucas-haas/
Meet the Maker: Lucas Haas
“It is so easy to achieve visual effects with Sketch.”2023-12-11T13:03:32+00:00
2023-12-11T13:03:32+00:00
Lucas H.
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-lucas-haas-header-hd%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=ceefac99779924d42aaef8267967aea2" srcset="https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-lucas-haas-header-hd%402x.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=534cce3d74bf741a121cb04f1d9ad81e 360w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-lucas-haas-header-hd%402x.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=1d41d0de59bcdb9df7af766b60daf6b4 390w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-lucas-haas-header-hd%402x.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=06f4180330b50b7dd173c0103fa6f12d 640w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-lucas-haas-header-hd%402x.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=b53fc544555b94bbff8334d0076d3de8 768w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-lucas-haas-header-hd%402x.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=07ca0f2fe8d7433931da453757cb48c7 1024w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-lucas-haas-header-hd%402x.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=6ece0049e2de8afe3947f81f4b2a38b5 1220w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-lucas-haas-header-hd%402x.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=7cf49c417506354b1bbb43371c08375c 1440w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-lucas-haas-header-hd%402x.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=0413da69d713e44af987428897815971 1600w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-lucas-haas-header-hd%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=ceefac99779924d42aaef8267967aea2 1920w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-lucas-haas-header-hd%402x.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=5817be58e216e854621667a3f8ccad47 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">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).</p>
<h2 id="how-did-you-get-started-using-sketch">How did you get started using Sketch?</h2>
<p>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.</p>
<h2 id="what-inspired-you-to-create-the-work-youre-sharing-with-us">What inspired you to create the work you’re sharing with us?</h2>
<p>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.</p>
<figure><img alt="An image showing the Globetrotter icon" src="https://sketch-cdn.imgix.net/assets/blog/globetrotter-icon-in-sketch.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=5b7c28d80be223d08cb26c104896aff4" srcset="https://sketch-cdn.imgix.net/assets/blog/globetrotter-icon-in-sketch.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=b4257e5398c9a2db9f002baa191bd4fa 360w, https://sketch-cdn.imgix.net/assets/blog/globetrotter-icon-in-sketch.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=68ab649aac0bf149f4d83a914d6ee556 390w, https://sketch-cdn.imgix.net/assets/blog/globetrotter-icon-in-sketch.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=3e903b6611b2083518c7cff4986b23ab 640w, https://sketch-cdn.imgix.net/assets/blog/globetrotter-icon-in-sketch.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=4207e6e9586dacee2961c3fd5e6abee2 768w, https://sketch-cdn.imgix.net/assets/blog/globetrotter-icon-in-sketch.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=a504a68c4adf0be73959a80380d4fe45 1024w, https://sketch-cdn.imgix.net/assets/blog/globetrotter-icon-in-sketch.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=a0068b8629594fae51bb8f9174f8c3a1 1220w, https://sketch-cdn.imgix.net/assets/blog/globetrotter-icon-in-sketch.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=2dbf53cd6bf0b76cd62f85e16fd417e7 1440w, https://sketch-cdn.imgix.net/assets/blog/globetrotter-icon-in-sketch.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=26a88d6f21367ad84315b7aef8f9ecca 1600w, https://sketch-cdn.imgix.net/assets/blog/globetrotter-icon-in-sketch.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=5b7c28d80be223d08cb26c104896aff4 1920w, https://sketch-cdn.imgix.net/assets/blog/globetrotter-icon-in-sketch.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=4c2be3defd154de7af8431df0dab0471 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>Globetrotter’s new icon, created by Lucas and made in Sketch.</p></figcaption></figure>
<h2 id="what-tools-and-features-in-sketch-do-you-use-the-most">What tools and features in Sketch do you use the most?</h2>
<p>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.</p>
<h2 id="what-advice-would-you-give-to-anyone-looking-to-create-something-similar-to-your-designs">What advice would you give to anyone looking to create something similar to your designs?</h2>
<p>Question everything, even if you see a 2px border instead of 1. Question it, copy it, modify it, try it yourself.</p>
<p class="footnote">* The original Globetrotter icon was created by <a href="https://twitter.com/JPEGuin" target="_blank" rel="nofollow noopener noreferrer">Shihab Mehboob</a></p>
https://www.sketch.com/blog/meet-the-maker-volodymyr-kondriianenko/
Meet the Maker: Volodymyr Kondriianenko
“Sketch gives me the possibility to create more artistic things like icons and GUIs for apps. It is a very relaxing experience!”2023-11-29T12:53:31+00:00
2023-11-29T12:53:31+00:00
Volodymyr K.
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-volodymyrK-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=183de21f0b2b59e84e89f9b8dbe39924" srcset="https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-volodymyrK-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=f23e15c27112d407a483fb52da7f4105 360w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-volodymyrK-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=968590bffca854d5dd6fd4cb28e1008c 390w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-volodymyrK-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=e493d8b3090a94f269a879912f656cc7 640w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-volodymyrK-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=822e508f2c88eb39b4b87bb64258a7d2 768w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-volodymyrK-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=1e9f3b5585dbbef14c47cbffe616d391 1024w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-volodymyrK-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=2d14eb4e5f7331efcf6d7d713e451739 1220w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-volodymyrK-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=9520991c37970d5031a44f56a44a4021 1440w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-volodymyrK-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=46c3ea7ad7c06e5da26d9fa7bb6ee67b 1600w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-volodymyrK-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=183de21f0b2b59e84e89f9b8dbe39924 1920w, https://sketch-cdn.imgix.net/assets/blog/meet-the-maker-volodymyrK-header%40x2.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=0225a7bda1d238c43c81e1a2f13ce87e 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">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.</p>
<h2 id="how-did-you-get-started-using-sketch">How did you get started using Sketch?</h2>
<p>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.</p>
<h2 id="what-inspired-you-to-create-the-work-youre-sharing-with-us">What inspired you to create the work you’re sharing with us?</h2>
<p>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.</p>
<p>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.</p>
<figure><img alt="An image showing the design of Volodymyr‘s MiniDisc project" src="https://sketch-cdn.imgix.net/assets/blog/volodymyr-minidisk.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=d874965008a89fcf7a5f3d38a2806dfb" srcset="https://sketch-cdn.imgix.net/assets/blog/volodymyr-minidisk.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=9397935824a1aaaed1cc3a2fa560ec4a 360w, https://sketch-cdn.imgix.net/assets/blog/volodymyr-minidisk.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=6377827f75e17634746420d53a9b67e0 390w, https://sketch-cdn.imgix.net/assets/blog/volodymyr-minidisk.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=585d55adbbb512f6ccaf7f9083f95350 640w, https://sketch-cdn.imgix.net/assets/blog/volodymyr-minidisk.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=3a1680209ba0c4eb80d2ecc62db129e6 768w, https://sketch-cdn.imgix.net/assets/blog/volodymyr-minidisk.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=6b0280f27a403f10db9a8a4ff8d8f578 1024w, https://sketch-cdn.imgix.net/assets/blog/volodymyr-minidisk.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=dc4df237281ab960dbcf95bbfa306347 1220w, https://sketch-cdn.imgix.net/assets/blog/volodymyr-minidisk.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=4a6c178ac04a38bfdcda26d1663c2b03 1440w, https://sketch-cdn.imgix.net/assets/blog/volodymyr-minidisk.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=5417426f3b49a36817f411112b3bd8d9 1600w, https://sketch-cdn.imgix.net/assets/blog/volodymyr-minidisk.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=d874965008a89fcf7a5f3d38a2806dfb 1920w, https://sketch-cdn.imgix.net/assets/blog/volodymyr-minidisk.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=3e6c6f17eba6190cc454266ce2f0a258 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>Volodymyr’s MiniDisc illustration — made in Sketch.</p></figcaption></figure>
<h2 id="what-tools-and-features-in-sketch-do-you-use-the-most">What tools and features in Sketch do you use the most?</h2>
<p>Complex fills, inner shadows, strokes for icons. Symbols and color variables for UIs.</p>
<h2 id="what-advice-would-you-give-to-anyone-looking-to-create-something-similar-to-your-designs">What advice would you give to anyone looking to create something similar to your designs?</h2>
<p>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.</p>
<ul>
<li><a href="https://www.sketch.com/blog/made-with-sketch/">Discover what else people have #MadeWithSketch</a></li><li><a href="https://www.sketch.com/blog/how-to-make-the-most-of-color-variables/">Learn how to easily sync and manage colors across your designs</a></li><li><a href="https://www.sketch.com/courses/sketch-101/">New to design? Get started with our courses</a></li>
</ul>
https://www.sketch.com/blog/behind-smart-layout-part-1/
Behind the feature: How we took Smart Layout beyond Symbols (Part 1)
In the first installment of a three-part series, Product Manager Paulo Pereira and Mac Developer Torsten Radtke look at the history of Smart Layout in Sketch — and what we planned to do with it.2023-11-09T13:05:46+00:00
2023-11-09T13:05:46+00:00
Paulo Pereira
Torsten Radtke
<img alt="An abstract illustration showing different designs and layouts that can benefit from the Smart Layout feature" src="https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-btf-header-1.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=c9c817a8813fba860fe93b21afca5ac4" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-btf-header-1.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=57b28a498080fdece4e8d4a11c62703c 360w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-btf-header-1.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=b0c9395d9c29186db8dce127444fa79f 390w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-btf-header-1.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=cd113c62a6473104801cb129e2439c5d 640w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-btf-header-1.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=3829439e668539a61bcaa0673847d653 768w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-btf-header-1.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=9e0c91c326c34fd315037b2387f688b7 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-btf-header-1.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=74a596875c148bc8881b699854dedccd 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-btf-header-1.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=dcf89ab7f250d6540fa8f0a8c0bef094 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-btf-header-1.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=07ee5a1e98604e3276c010e914806328 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-btf-header-1.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=c9c817a8813fba860fe93b21afca5ac4 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-btf-header-1.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=09f7ffa50136940d79dbb0663e7fc700 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">We’ve just released <a href="/blog/smart-layout-beyond-symbols/">a major update to Smart Layout</a>, taking it far beyond its roots in Symbols. This latest update builds upon <a href="/updates/improved-smart-layout-when-working-with-nested-layouts/">an earlier one</a> that made Smart Layout more reliable and predictable, along with related enhancements to Smart Distribute.</p>
<p class="large">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.</p>
<hr />
<p>We introduced Smart Layout to Sketch <a href="/blog/smart-layout-a-new-welcome-window-and-projects-on-the-mac-and-cloud-whats-new-in-sketch/">in late 2019</a>, building upon Symbols and Libraries, with the aim of making Symbols more flexible:</p>
<blockquote>
<p>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.</p>
<p>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.</p>
</blockquote>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<h2 id="what-smart-layout-is--and-isnt">What Smart Layout is — and isn’t</h2>
<p>Let’s start by understanding what Smart Layout actually is. It’s based on three key principles:</p>
<ol>
<li><strong>Minimal setup.</strong> 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.</li>
<li><strong>Freeform arrangement.</strong> 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.</li>
<li><strong>One single system.</strong> It takes care of two key tasks of managed layout systems at once. First, layers must adapt to layers <em>contained</em> within: such as a button, which in its simplest form is a text layer surrounded by a rectangle. Second, layers must adapt to <em>adjacent</em> layers: take two text blocks laid out vertically, where the bottom one must move down as the top one grows.</li>
</ol>
<p>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).</p>
<p>We designed Smart Layout so it accommodates but isn’t limited to stack-based layouts.</p>
<h2 id="how-smart-layout-actually-works">How Smart Layout actually works</h2>
<p>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.</p>
<p>To do that, Smart Layout considers three inputs:</p>
<ol>
<li><strong>The layout chosen by the designer.</strong> What are its axis and direction?</li>
<li><strong>The change that was made.</strong> Did the layer(s) grow or shrink, or disappear?</li>
<li><strong>The current state of the design.</strong> Which other layers are in or adjacent to the changed region, and what’s their spatial relationship to the changed layer(s)?</li>
</ol>
<p>While the first two inputs are very simple, the latter can be extremely complex.</p>
<p>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).</p>
<figure><img alt="An image showing the different spatial relationships between layers affected by Smart Layout." src="https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-spatial-relationships.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=863dbe1753c53ef702fa4ebdffbf953c" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-spatial-relationships.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=0a3cb75d9b85ca232ebea653fc2d7f03 360w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-spatial-relationships.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=a954b1e7d44fdf93bdab43cc950d98a3 390w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-spatial-relationships.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=28ee151d6e03591aeecae0fd7beadf73 640w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-spatial-relationships.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=eaca1e27993e66d62d14d873226cd839 768w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-spatial-relationships.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=46f8aaa7cac92c928e6e08b0a276ba87 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-spatial-relationships.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=66f6c71a160942c1cc4473a140db1840 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-spatial-relationships.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=e7b75959b16b1af743a429b5e51dcbd0 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-spatial-relationships.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=18fbd685bfc57fede8161896e5392236 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-spatial-relationships.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=863dbe1753c53ef702fa4ebdffbf953c 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-11/sl-spatial-relationships.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=284d92f7c2b89b18c16e84276e0fb4be 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>Spatial relationships between the reference layer and other layers, and actions taken for each.</p></figcaption></figure>
<p>When doing this evaluation, we have to consider:</p>
<ul>
<li>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.</li>
<li>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.</li>
</ul>
<p>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.</p>
<p>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.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchKgBuTdnf3f" autoplay="lazy" loop="true" alt="A video showing how Smart Layout can result in three different actions on a set of layers."></mave-player>
<figcaption><p>Even simple layouts will often contain different spatial relationships and lead to all three actions.</p></figcaption>
</figure>
<p>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.</p>
<p>Finally, we must consider the <em>direction</em> along the layout <em>axis.</em> 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.</p>
<h2 id="the-challenges-we-faced-with-smart-layout">The challenges we faced with Smart Layout</h2>
<p>As we looked to improve Smart Layout, we were faced with three main challenges.</p>
<ol>
<li><strong>Smart Layout’s outcomes could be unexpected and inconsistent.</strong> 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.</li>
<li><strong>Smart Layout was not available to groups outside of Symbols.</strong> 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.</li>
<li><strong>The popularity of stack layout systems created an expectation mismatch.</strong> 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 <a href="#what-smart-layout-is--and-isnt">if it’s not</a>, we needed to better accommodate that expectation when it’s used in a stack arrangement.</li>
</ol>
<p>On top of this, we had some aggravating factors.</p>
<ul>
<li>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.</li>
<li>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.</li>
</ul>
<p>The challenge was a tall one, so it was time to assemble a team and form a plan.</p>
<h2 id="the-road-ahead">The road ahead</h2>
<p>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.</p>
<p>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:</p>
<ul>
<li><strong>First, we’d make Smart Layout more reliable, but still limited to Symbols.</strong> 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.</li>
<li><strong>In parallel, we’d also improve our stacking features.</strong> 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.</li>
<li><strong>After this, we’d bring Smart Layout to groups.</strong> 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.</li>
</ul>
<p>We had our work cut out for us, and we knew it’d be a long journey, but an important one.</p>
<hr />
<p>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.</p>
<p>To keep up with series, keep an eye <a href="/blog/tags/behind-the-feature/">on the blog</a> or follow us on <a href="https://www.twitter.com/sketch" target="_blank" rel="nofollow noopener noreferrer">X</a> or <a href="https://mastodon.design/@sketch/" target="_blank" rel="nofollow noopener noreferrer">Mastodon</a> for updates.</p>
https://www.sketch.com/blog/smart-layout-beyond-symbols/
New in Sketch: A major upgrade to Smart Layout
We’re responding to one of our biggest feature requests and taking Smart Layout beyond Symbols.2023-11-07T07:45:00+00:00
2023-11-07T07:45:00+00:00
Freddie Harrison
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/2023-11/SL-99-header.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=40ef03a43ccbbdef7a3ec72066196b79" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-11/SL-99-header.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=5f52aad7fd39f8b9ae58a5110179b7ce 360w, https://sketch-cdn.imgix.net/assets/blog/2023-11/SL-99-header.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=555d695d9502175ee06f51ea16c6c9f1 390w, https://sketch-cdn.imgix.net/assets/blog/2023-11/SL-99-header.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=7086adf8a40e5f950a8dd1ce2739a246 640w, https://sketch-cdn.imgix.net/assets/blog/2023-11/SL-99-header.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=fd9d1f8a9ec31de0c61a22dc6b7687f2 768w, https://sketch-cdn.imgix.net/assets/blog/2023-11/SL-99-header.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=4ca3cf38a324024272582777f366ea95 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-11/SL-99-header.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=6a9f8bbab40578d907ee323de7a159e5 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-11/SL-99-header.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=1e4a7955bf518890fe828bc9c71f4a40 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-11/SL-99-header.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=5d9573159e6f735017310ea03c85ce4a 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-11/SL-99-header.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=40ef03a43ccbbdef7a3ec72066196b79 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-11/SL-99-header.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=ffcc8be6be8f7f9ea60f35bcee43fdbf 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">After a few releases <a href="/experimental/">as an experimental feature</a>, 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.</p>
<p>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…</p>
<h2 id="made-for-symbols-destined-for-more">Made for Symbols, destined for more</h2>
<p>Before we take a look at what’s new, let’s take a step back and recap on what Smart Layout is and does.</p>
<p>We <a href="/blog/smart-layout-a-new-welcome-window-and-projects-on-the-mac-and-cloud-whats-new-in-sketch/">launched Smart Layout back in 2019</a> 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.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchvJU6QV94xT" autoplay="lazy"></mave-player>
<figcaption><p>Smart Layout automatically resizes layers within a Symbol, keeping spacing consistent as content changes.</p></figcaption>
</figure>
<p>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.</p>
<p>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.</p>
<h2 id="smart-layout-now-in-groups-and-artboards">Smart Layout: Now in groups and Artboards</h2>
<p>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.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchG8YrdtlMKP" autoplay="lazy"></mave-player>
<figcaption><p>You can drag and drop layers into a group with Smart Layout and let Sketch figure out the rest.</p></figcaption>
</figure>
<p>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.</p>
<div class="btc-tip">
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: <a href="https://skt.ch/SLSketchTutorial">grab it here</a>.
</div>
<h2 id="great-on-stacks--and-thats-just-the-start">Great on stacks — and that’s just the start</h2>
<p>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 <a href="/docs/designing/layer-basics/aligning-layers/#moving-multiple-layers-with-smart-distribute">Smart Distribute handles</a>, 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.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchA7rJ1bKU2d" autoplay="lazy"></mave-player>
<figcaption><p>Smart Layout plays nicely with stacks, paying particular attention to spacing when you duplicate layers.</p></figcaption>
</figure>
<p>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.</p>
<h2 id="the-small-things-add-up">The small things add up</h2>
<p>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.</p>
<p>You can now set or change Smart Layout for any selected group or Artboard with a new, two-step shortcut: <kbd>⌘</kbd><kbd>L</kbd> followed by <kbd>←</kbd> <kbd>H</kbd> <kbd>→</kbd> <kbd>↑</kbd> <kbd>V</kbd> or <kbd>↓</kbd> 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.</p>
<p>If you need to tweak a layer without affecting the other layers around it, you can now pause Smart Layout with <kbd>⌥</kbd><kbd>⌘</kbd><kbd>L</kbd> and do just that. Once you’ve made your changes, you can clear your selection to resume Smart Layout once again.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchtiMqoTe8o6" autoplay="lazy"></mave-player>
<figcaption><p>You can now pause Smart Layout to make a quick change without anything automatically resizing.</p></figcaption>
</figure>
<p>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.</p>
<p>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.</p>
<hr />
<p>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!</p>
<p>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 <a href="https://forum.sketch.com/">share it over on the forum</a>.</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=tnIITEpvSMM">Watch a full walkthrough video of these updates</a></li><li><a href="https://www.sketch.com/docs/designing/smart-layout/">Read the documentation</a></li><li><a href="sketch://update">Get the update</a></li>
</ul>
https://www.sketch.com/blog/web-app-nov-23/
New in the web app: Dark mode and better ways to share, sort and filter
When it comes to workflows, the simplest things can have the biggest impact2023-10-31T16:59:48+00:00
2023-10-31T16:59:48+00:00
Gabrielle van Welie
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/2023-10/dark-mode-header.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=55df78136e138d00841fc4bbb8f1306f" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-10/dark-mode-header.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=42106bb09b749646972e7da69b6b11db 360w, https://sketch-cdn.imgix.net/assets/blog/2023-10/dark-mode-header.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=b12dc1d692090250b17d9649c4ba9a5e 390w, https://sketch-cdn.imgix.net/assets/blog/2023-10/dark-mode-header.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=d107a1af37015568fed81a889f7f6298 640w, https://sketch-cdn.imgix.net/assets/blog/2023-10/dark-mode-header.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=b9e7e4aac3624296ab99d7cf65c15a45 768w, https://sketch-cdn.imgix.net/assets/blog/2023-10/dark-mode-header.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=a04a408bfa536bd54f7e6ada999f9157 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-10/dark-mode-header.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=a71b9e9a8cef5ace47d56d799007a792 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-10/dark-mode-header.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=e3d2eb93b6ee925af356ab953405cc11 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-10/dark-mode-header.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=4ad5e56eecefdabcd452106b87d34e9d 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-10/dark-mode-header.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=55df78136e138d00841fc4bbb8f1306f 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-10/dark-mode-header.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=466c33b8ba458a294eb767fc69c679e8 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">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 👇</p>
<h2 id="better-sharing-controls">Better sharing controls</h2>
<p>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.</p>
<p>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 <strong>Workspace Members</strong> tab and choose between giving them editing or viewing permissions. We’ll also show special settings for restricted projects.</p>
<p>For managing external users, you can use the <strong>Guests</strong> tab to invite people via email or the <strong>Everyone</strong> 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.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchYJ5ohLCrQj"></mave-player>
</figure>
<h2 id="powerful-sorting-and-filtering">Powerful sorting and filtering</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>And of course, you can combine both features for more targeted results.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchy9yikvGl3A"></mave-player>
</figure>
<h2 id="dark-mode">Dark Mode</h2>
<p>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 <strong>Account menu</strong> > <strong>Appearance</strong> (or try <a href="https://www.sketch.com/settings/appearance">this handy link</a>). From here, you can set it to <strong>Light</strong>, <strong>Dark</strong> or <strong>System Default</strong> to have it match your system’s settings — the choice is yours.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchVbztDLg2in"></mave-player>
</figure>
<hr />
<p>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 <a href="https://forum.sketch.com">community forum</a>.</p>
<p>Are you ready to try out these new features? Head over to the <a href="/c/">web app</a>!</p>
<ul>
<li><a href="https://www.sketch.com/c/">Open the web app</a></li>
</ul>
https://www.sketch.com/blog/icons-tutorial/
A beginner’s guide to icon design in Sketch
Learn how to create your own icons without needing to be an amazing illustrator2023-10-26T06:16:25+00:00
2023-10-26T06:16:25+00:00
Gabrielle van Welie
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/2023-10/shapes-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=b2642a09b98fba9b2e0559a9c03cc91f" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-10/shapes-tutorial.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=6b6b00df015223627e941ad5a586cd39 360w, https://sketch-cdn.imgix.net/assets/blog/2023-10/shapes-tutorial.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=0af6b1c85062b956ed29615f5a271f92 390w, https://sketch-cdn.imgix.net/assets/blog/2023-10/shapes-tutorial.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=c2fdc6214d565acf5ce20f9840e19da6 640w, https://sketch-cdn.imgix.net/assets/blog/2023-10/shapes-tutorial.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=4515346058d89850f643ca2997f4686a 768w, https://sketch-cdn.imgix.net/assets/blog/2023-10/shapes-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=0421076e7841dabc0a30f7c238ce8ab7 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-10/shapes-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=7b856f97e8b6272af2a535f012d18887 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-10/shapes-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=81ba415826a53af99bc7952e6e863605 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-10/shapes-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=730d1f5ff07075fc1a7943fed732a536 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-10/shapes-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=b2642a09b98fba9b2e0559a9c03cc91f 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-10/shapes-tutorial.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=946cf4d4ab05b514457d9d613cee7bcf 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">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.</p>
<p>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.</p>
<p>You’ll learn to create icons using:</p>
<ul>
<li>Boolean operations such as subtract and intersect</li>
<li>Borders</li>
<li>Basic shape tools like Oval and Rectangle</li>
<li>Vector editing</li>
</ul>
<p>Let’s take a look 🔍</p>
<div class="btc-tip">
To get started, open a new document in Sketch, press <kbd>A</kbd> to activate the Artboard tool, and create three 24x24 px Artboards for each of your icons.
</div>
<h2 id="creating-a-location-pin-icon-using-subtract">Creating a location pin icon using Subtract</h2>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchzh6cAGNciG" subtitles="en"></mave-player>
</figure>
<p>Press <kbd>O</kbd> to activate the Oval tool and create a 12x12 px circle. You can hold <kbd>⌥</kbd><kbd>⇧</kbd> to create a perfect circle outward from the center. Alternatively, you can quickly insert the circle and adjust the size through the Inspector.</p>
<p>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 <kbd>5</kbd> to reduce the opacity to 50%.</p>
<div class="btc-tip">
<strong>Pro tip:</strong> Select a shape layer and use <strong>Layer</strong> > <strong>Style</strong> > <strong>Set as Default Style</strong> to set its style(s) as the new default for any new shape you create.
</div>
<p>To create the hole in our location pin icon, duplicate the circle layer by selecting it and pressing <kbd>⌘</kbd><kbd>D</kbd>. Then hold <kbd>⇧</kbd><kbd>⌥</kbd> and scale it down to 6x6 px.</p>
<p>With the reduced opacity from before, it’ll now be easy to see how shapes overlap before we commit to cutting anything out.</p>
<p>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.</p>
<p>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.</p>
<p>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!</p>
<h2 id="creating-an-eyeball-icon-using-difference">Creating an eyeball icon using Difference</h2>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchjyWkAWKNJc" subtitles="en"></mave-player>
</figure>
<p>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.</p>
<p>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.</p>
<div class="btc-tip">
<strong>Pro tip:</strong> Press <kbd>⌥</kbd> and hover over any layers on your Artboard to measure their distance to the edges.
</div>
<p>Duplicate the layer, this time holding <kbd>⌥</kbd> and dragging out a duplicate — or you can use the same technique from the previous step. Position your duplicate 5px from the <strong>top</strong> edge of the Artboard.</p>
<p>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.</p>
<p>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 <strong>Tools</strong> button in the Toolbar and selecting <strong>Flatten</strong> from the dropdown menu.</p>
<p>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 <kbd>↵</kbd> to exit Vector Editing Mode.</p>
<p>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 🌯</p>
<h2 id="creating-a-magnifying-glass-icon-using-borders">Creating a magnifying glass icon using Borders</h2>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktch5sNt8zXtVr" subtitles="en"></mave-player>
</figure>
<p>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.</p>
<p>Head to your last Artboard and create a 14x14 circle. Tap <kbd>F</kbd> to remove the Fill and <kbd>B</kbd> 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.</p>
<p>Now, for the magnifying glass handle, let’s draw a line segment using the Vector Tool, which you can trigger by pressing <kbd>V</kbd>. 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 <strong>Snap to half pixels</strong> button, the third one below the sizing controls.</p>
<p>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 <kbd>↵</kbd> to confirm you’re done drawing and give the handle the same style as the circle.</p>
<div class="btc-tip">
<strong>Pro tip:</strong> To quickly copy a layer’s style, press <kbd>⌥</kbd><kbd>⌘</kbd> <kbd>C</kbd> to copy and <kbd>⌥</kbd><kbd>⌘</kbd><kbd>C</kbd> to paste it onto another layer.
</div>
<p>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.</p>
<p>Select both paths, click the <strong>Edit</strong> icon on the toolbar, and choose <strong>Outlines</strong>. Now, rather than having two paths with borders, we have two compound paths with Fills, which you can join using the Union Boolean operation.</p>
<p>Hold down <kbd>⌘</kbd><kbd>⇧</kbd> 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!</p>
<hr />
<p>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 <a href="https://forum.sketch.com/c/share-your-knowledge/ask-the-community/17">over in our forum</a>.</p>
<div class="btc-tip">
<strong>Read next:</strong> Discover how <a href="/blog/forrest-v2/">Matt Emmins, the designer behind Forrest</a> created a suite of custom icons for the app’s big new update.
</div>
<ul>
<li><a href="sketch://">Try it in Sketch</a></li>
</ul>
https://www.sketch.com/blog/depth-tutorial/
How to create depth in Sketch
Learn how to use shadows, gradients and blurs to breathe life into your designs2023-09-28T08:05:02+00:00
2023-09-28T08:05:02+00:00
Gabrielle van Welie
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=05fce39df092f63aede354cdf989e59a" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-tutorial.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=a3b0ed64416bc057b22d401dc8365837 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-tutorial.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=0c0d956d21206bf14ecdb4afedeb1fca 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-tutorial.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=3b6609abfa36324bcaa6d27a99acb320 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-tutorial.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=0b451802b117d296d8ded2a8d9ab0027 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=4da952107e5f8d4a68b9889076948a5e 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=24c911e5fa40771c3ea393eaec607212 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=d1752c6575c0a91228d2a502e9dbd1f1 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=7f46dc636f5d37f07956594ff511e753 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-tutorial.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=05fce39df092f63aede354cdf989e59a 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-tutorial.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=21b2df508cf5f12036d3b8dd535bdf61 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">Looking to give a little more realism to your designs? Maybe you’re familiar with working with depth or are even a big <a href="/blog/complete-guide-skeuomorphism/">skeuomorphism</a> 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 <em>more</em>. More realism, more depth, more life.</p>
<p>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 <a href="/blog/keeping-it-real-nikola-lazarevic-on-photorealistic-design-in-sketch/">photorealistic</a>, adding a bit of depth can really spruce up your icons and interfaces.</p>
<p>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.</p>
<div class="btc-tip">
You can also follow along with our <a href="/s/653c5f96-5e74-4bdd-b545-7b0b1e2358a0">practice doc</a>, where you can inspect Joseph’s final version.
</div>
<figure class="no-border"><img alt="An image showing a switch in Sketch before and after applying depth effects" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-in-sketch.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=79d64299e4cf0f78fb2349400cd1a721" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-in-sketch.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=c17b27a6790e96252b9d01240932254b 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-in-sketch.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=74d88d532971b1da269dabfea423b93d 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-in-sketch.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=a1f9010ef16fe9b54e0170a1b0a8cfff 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-in-sketch.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=d657f9f414a167a681f7c0fe1eceadd1 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-in-sketch.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=683303070c3be489d37b59e237074f9d 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-in-sketch.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=74cfa10c537da866db596d1d441579d4 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-in-sketch.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=357b921beac9cd3dd4f10ae709442c7d 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-in-sketch.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=74c18a7abce5ca73fd29c05589413f73 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-in-sketch.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=79d64299e4cf0f78fb2349400cd1a721 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-in-sketch.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=cb1df5dd2e1728913db035e2ef00e5db 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>A switch made in Sketch, before and after applying depth effects.</p></figcaption></figure>
<p>We’ll show you how to use:</p>
<ul>
<li>Simple style properties to make basic shapes look 3D</li>
<li>Shadows and highlights to mimic how light hits surfaces</li>
<li>Gradients to illustrate the falloff of light</li>
<li>Blurs to blend surfaces</li>
</ul>
<p>Ready? Let’s dive in 🪂</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchS4F9rKN0eZ" subtitles="en"></mave-player>
<figcaption><p>You can watch Joseph’s tutorial now, or go at your own pace with our guide 👇</p></figcaption>
</figure>
<div class="btc-featured-features btc-post-it" data-controller="entrance">
<p class="btc-featured-features__title">Featured in this article</p>
<div class="btc-featured-features__features">
<a href="/docs/symbols-and-styles/styling/shadows/" class="btc-feature-link" target="_blank">
Shadows
<svg height="16" width="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m12.326 9.473-.012-5.645-5.644-.012m4.588 1.068-7.43 7.43" fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="2" /></svg>
</a>
<a href="/docs/symbols-and-styles/styling/gradients/" class="btc-feature-link" target="_blank">
Gradients
<svg height="16" width="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m12.326 9.473-.012-5.645-5.644-.012m4.588 1.068-7.43 7.43" fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="2" /></svg>
</a>
<a href="/docs/symbols-and-styles/styling/blurs/" class="btc-feature-link" target="_blank">
Blurs
<svg height="16" width="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m12.326 9.473-.012-5.645-5.644-.012m4.588 1.068-7.43 7.43" fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="2" /></svg>
</a>
</div>
</div>
<h2 id="1-draw-a-switch-container-and-knob">1. Draw a switch container and knob</h2>
<p>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.</p>
<h2 id="2-tone-down-the-background">2. Tone down the background</h2>
<figure><img alt="An image showing toned down background color" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-2.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=aca27a45a47e4c580e1b36c59c2897d9" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-2.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=31582490936a37274fa58e1dcd62bfc8 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-2.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=ad95324315ce5cceebf341c1b234e6d5 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-2.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=866aae83fe7020e4ff9242c980662280 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-2.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=385413944b831afa647ca81bb5a3494f 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-2.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=c490823fc542ccb85a32afc30df1e67f 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-2.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=7fa86d3a98f9ae60b2a64b2b5ff9b256 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-2.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=96ec1c766ce4a710f6802d6a7810ebec 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-2.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=4115ee0fef5cdb2b616d848333725096 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-2.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=aca27a45a47e4c580e1b36c59c2897d9 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-2.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=a4e0c7cd5441c50433daf17de1150aff 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<p>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.</p>
<div class="btc-tip">
<strong>Joseph’s pro tip:</strong> 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.
</div>
<h2 id="3-add-a-gradient-to-the-switch-container">3. Add a gradient to the switch container</h2>
<figure><img alt="Image showing added gradient" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-3.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=a34faaf88fe345b341529732252b68f4" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-3.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=57553f524f44e4d2094b08257f1e3f22 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-3.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=492c8f8052597a31ce8bdd519150a42c 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-3.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=fe6502b28b71c99ff11444d3598b50e7 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-3.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=c432b956d636c5abb61e64b790b1cc02 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-3.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=d279913006ba21565e5c9c99f0aafe77 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-3.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=5625f119da518fa7f244d7adb06e4c50 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-3.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=bcd6e1f018ca6bad7398ecb663ab7c17 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-3.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=dbe5b1111c9da9fe300fde43ab575e2e 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-3.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=a34faaf88fe345b341529732252b68f4 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-3.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=ef24ff084a84ddd31245fe40101c6f93 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<p>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.</p>
<h2 id="4-add-an-inner-shadow-to-the-switch-container">4. Add an inner shadow to the switch container</h2>
<figure><img alt="Image showing added inner shadow" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-4.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=77782c8f0f38dd931e7286a1295ae1a1" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-4.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=9bcf2197a6639e8d58d8bc3b92d9ea82 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-4.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=1253b4434e9765b15a400596e0adeb5e 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-4.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=5dedc0f98833501a7006a1e7a9c8f045 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-4.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=a1d1a899722311b5830764d7b0192eda 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-4.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=fc91c5c20076b28c34a1b9847c3d8f8b 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-4.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=ae4ac52f76271c6ea6aaaab5cb3b8da5 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-4.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=cff04300e6901618aa3832d485b5ecfc 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-4.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=51c5f97bf17811fd95f90c523ba3d535 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-4.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=77782c8f0f38dd931e7286a1295ae1a1 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/depth-step-4.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=8ebd99e573dde7d1b57a10cb64370689 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<p>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.</p>
<div class="btc-tip">
<strong>Joseph’s pro tip:</strong> Always keep the qualities of the light source in mind. If the light source is warmer, the result will be cooler shadows.
</div>
<h2 id="5-add-a-drop-shadow-to-the-knob">5. Add a drop shadow to the knob</h2>
<p>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.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchZjvvqPZ3hq" subtitles="en"></mave-player>
</figure>
<h2 id="6-mask-the-knob-and-shadow-into-the-switch-container">6. Mask the knob and shadow into the switch container</h2>
<p>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?</p>
<p>Easy! Let’s mask the knob and container by selecting both layers, Control-clicking, and choosing <strong>Mask Selection</strong> from the menu. Now that the knob and shadow will be clipped within the path of the container.</p>
<div class="btc-tip">
<strong>Joseph’s pro tip:</strong> 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.
</div>
<h2 id="7-add-a-gradient-to-the-knob">7. Add a gradient to the knob</h2>
<p>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.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchRjhei8pfhf" subtitles="en"></mave-player>
</figure>
<h2 id="8-soften-the-knob-edges">8. Soften the knob edges</h2>
<p>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.</p>
<p>We can create this effect by using <a href="/docs/symbols-and-styles/styling/shadows/">Inner Shadows</a>.</p>
<div class="btc-tip">
<strong>Joseph’s pro tip:</strong> 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.
</div>
<p>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.</p>
<p>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.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchf3IjLcoUm0" subtitles="en"></mave-player>
</figure>
<h2 id="9-duplicate-and-shrink-the-knob">9. Duplicate and shrink the knob</h2>
<p>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.</p>
<p>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 <kbd>⌘</kbd><kbd>D</kbd> to duplicate it. Hold <kbd>⇧</kbd><kbd>⌥</kbd> and resize it to about 16x16 px. Finally, disable the shadow. This should result in a bulge sticking out of the knob.</p>
<p>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.</p>
<h2 id="10-flip-the-extrusion-vertically">10. Flip the extrusion vertically</h2>
<p>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 <strong>Flip Vertically</strong> button under the <strong>Layer Properties</strong> section of the Inspector, and watch the magic happen.</p>
<h2 id="11-soften-the-indentation">11. Soften the indentation</h2>
<p>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.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchtZpMHjqkSX" subtitles="en"></mave-player>
</figure>
<h2 id="12-add-a-slight-outer-bevel">12. Add a slight outer bevel</h2>
<p>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.</p>
<h2 id="13-add-a-gradient-to-the-background">13. Add a gradient to the background</h2>
<p>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!</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktch9VwgPXRKRf" subtitles="en"></mave-player>
</figure>
<p>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.</p>
<hr />
<p>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 <a href="/blog/one-layer-strawberry/">David Blum’s tutorial</a> on how to create a one-layer strawberry. Just beware: the strawberry looks so real that it might just make you hungry.</p>
<ul>
<li><a href="sketch://">Try it out in Sketch</a></li>
</ul>
https://www.sketch.com/blog/forum-reviews/
Let’s talk shop: Time to reveal your layers and put your designs to the test
Join us in our Community Forum for some show-and-tell ✨ 2023-09-20T13:10:53+00:00
2023-09-20T13:10:53+00:00
Gabrielle van Welie
<img alt="image made in sketch of community forum" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/forum-outreach.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=17cabc834b05b276ed15a5ba2f7fde9b" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/forum-outreach.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=dd69189f4de020b1e3a851ce95168329 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forum-outreach.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=07061eb36e32151166bb8f59e176d7f6 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forum-outreach.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=0783953e590781ba8d8515b17156e6fd 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forum-outreach.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=35468c47a5f169059156cdc9b23eccd9 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forum-outreach.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=b535cce95e69a122335b0a9a0adf3169 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forum-outreach.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=dc165b953b5a3fee8048800824710cf0 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forum-outreach.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=fe6d1e76d60e6356a358432d9cee2da7 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forum-outreach.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=2f140a9c0f29cbe8fad2df7ab335b0a8 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forum-outreach.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=17cabc834b05b276ed15a5ba2f7fde9b 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forum-outreach.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=fbb149861e2c156b1a4cb2c70bfb6f9c 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p>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.</p>
<p>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.</p>
<h2 id="design-reviews">Design reviews</h2>
<p>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.</p>
<p>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.</p>
<p>To kick things off, we’re sharing a <a href="https://forum.sketch.com/t/we-ve-got-something-for-you-design-reviews/1733">UI example in the forum</a> — Sketch file included. You can use it, remix it or critique it! We look forward to seeing some of your work 👀</p>
<h2 id="show-us-your-layers">Show us your layers</h2>
<p>If there’s one thing designs and designers have in common, it’s having many, many layers! Some people are serious about <strong><em>naming their layers™️</em></strong>, while others are fine figuring out the difference between “<em>Rectangle</em>” and “<em>Rectangle 1234</em>”.</p>
<p>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…<strong><em>Let’s reveal our layers.</em></strong></p>
<p>You can already <a href="https://forum.sketch.com/t/show-us-your-layers/1741">check out a few examples</a> 😉</p>
<p>Hope to see you in the comments!</p>
<ul>
<li><a href="https://forum.sketch.com">Join our forum</a></li>
</ul>
https://www.sketch.com/blog/forrest-v2/
How Forrest put a twist on fitness tracking — then did it all over again
Designer Matt Emmins talks us through how the two-person team behind Forrest got to v2 — and how Sketch helped them along the way.2023-09-13T09:37:20+00:00
2023-09-13T09:37:20+00:00
Freddie Harrison
<img alt="image of forrest app made with sketch" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-mws.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=acb6d19f5495790f66057fb26d0436dd" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-mws.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=4e68684e91d2e63bcdbd1c759bbba975 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-mws.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=d86beb1ec8de140db540d9f00aee6392 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-mws.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=37734e4e0d6eef6252f55f96b5263dd2 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-mws.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=7c20cb29538f75c7dbce0fa01da1e939 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-mws.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=1198e6736210259e6d724eda8ebc9ed5 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-mws.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=09878911ba3da06d6d9d6d6cfe03b536 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-mws.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=2fb2d52b6570a13845b56f33912b7c71 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-mws.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=0974eca0905169dac4b9be4be7629629 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-mws.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=acb6d19f5495790f66057fb26d0436dd 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-mws.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=667651752a58523a7c7135c3e9ef9880 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">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.</p>
<p><a href="https://forrest.app/">Forrest</a> 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.</p>
<p>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?</p>
<p>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.</p>
<hr />
<p><strong>The idea behind Forrest is pretty unique. How did it come about?</strong></p>
<p>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.</p>
<p>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.</p>
<p><strong>How did the first designs for Forrest come together?</strong></p>
<p>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 <em>Forrest Gump</em>).</p>
<blockquote>
<p>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.</p>
</blockquote>
<p>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.</p>
<p>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.</p>
<p><strong>What are the challenges you face when it comes to designing the UI for an app like Forrest?</strong></p>
<p>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.</p>
<p>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.</p>
<figure><img alt="A side-by-side comparison of the race view screen in Forrest v1 and Forrest v2" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-race-view.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=657689a2b3307c25da38bc575450565d" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-race-view.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=7bbce195905667040e0f72be61901e15 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-race-view.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=a314a3eb0c43577aa7f777fbcc054465 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-race-view.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=bbdf4824a909af8aad44ca2f829116a4 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-race-view.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=31b953474764e8566cfca2319d81656c 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-race-view.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=9c98d55b2ac982ed70706af6a42fca15 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-race-view.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=860e53a7c63b28356d8e2c4fd190f1f5 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-race-view.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=362d7e9cd88cded079187082007c9b83 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-race-view.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=bacf323bda2e09d4d0747603517c8106 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-race-view.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=657689a2b3307c25da38bc575450565d 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-race-view.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=32e65fb5842a234b013f767a4922ef42 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /></figure>
<p>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.</p>
<blockquote>
<p>Deciding on the minimum level of information someone needs to understand what you are showing them, without removing context, is easier said than done</p>
</blockquote>
<p>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.</p>
<p><strong>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?</strong></p>
<p>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.</p>
<p>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.</p>
<blockquote>
<p>Forrest is completely independent, self-funded and 100% owned by ourselves</p>
</blockquote>
<p>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.</p>
<p><strong>Beyond the new features that come with v2, were there any specific design goals you wanted to achieve?</strong></p>
<p>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.</p>
<p>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.</p>
<figure><img alt="A side-by-side comparison of the create race screen in Forrest v1 and Forrest v2" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-create-race.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=2827d0cfa260cac26c603925729237a6" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-create-race.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=f1694ecec85c90d319b4998d00e12c4a 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-create-race.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=9b2f0379c4d1d7562e017aa33b413616 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-create-race.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=8a07dcdee9521a040efc13b1b5186b90 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-create-race.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=1b5085a52ff1f8532af6f6bc061261b9 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-create-race.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=f988159c80e334d7ba0ce709fcf7b518 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-create-race.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=564169100b10a8aa86dbb097c1f9541a 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-create-race.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=2a6a9cb621d86b5a1cd070fa76e55fbe 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-create-race.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=f824fe0fa70ec4be776e4c6f4d48f6b4 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-create-race.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=2827d0cfa260cac26c603925729237a6 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-create-race.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=e9c44ab75414b54b4aff557da12540bd 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /></figure>
<p>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.</p>
<p>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.</p>
<p><strong>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?</strong></p>
<p>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.</p>
<p>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.</p>
<blockquote>
<p>Icons are like a design quest for pure simplicity and clarity while retaining the truest form of their meaning</p>
</blockquote>
<p>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.</p>
<figure><img alt="A side-by-side comparison of the create race screen in Forrest v1 and Forrest v2" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-icons.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=a02043ebcbbe8d2658e4524f507b54d7" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-icons.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=bb4c3544211b7f5c12b7d1c02e2c26b2 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-icons.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=490249c08775d979c88f4512b0d6694c 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-icons.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=f677188406f5aa57b19c283762a4124b 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-icons.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=df1e933f0527676519b1d8e033c49796 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-icons.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=bba9d9308d2b570906c68295ce195a94 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-icons.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=7f3fea718cf9b152a9848e1f1875c1cf 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-icons.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=f6168c1fcbb0d78e0213654043a7298b 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-icons.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=1ec73c654b6571ed41038031429b21a4 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-icons.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=a02043ebcbbe8d2658e4524f507b54d7 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-icons.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=397d95d5fbeab987813849a0248b2b5f 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /></figure>
<p>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.</p>
<p><strong>Were there any additional challenges you faced, or considerations you had to make, when it came to introducing the social element of Forrest v2?</strong></p>
<p>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?</p>
<p>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.</p>
<p>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.</p>
<p><strong>What does your history with Sketch look like? And why was it your choice when it came to designing Forrest?</strong></p>
<p>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.</p>
<p>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.</p>
<figure><img alt="An image showing various Symbols used in Forrest v2’s design" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=d285021547fdbb0a191649b731042390" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=d9f61bbeb65626ca3b01bb782f512cf3 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=f6846219e7d498f06968e75860a6eb2d 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=4b7a1b02073ac4b54d699215b18882b3 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=f950f7898fa07332d92805f54a14dfc0 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=92c93218eef4c85af0464681f2c6c35d 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=697e7137c14d6f3d59e9ea1a8798c596 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=233a1df746286a1404aa831d666b4264 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=0ffc6abd8dc297e8be482adce2bf467e 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=d285021547fdbb0a191649b731042390 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=56d8b3060b1c09cf1bd5c59339b95af7 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /></figure>
<p>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.</p>
<blockquote>
<p>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</p>
</blockquote>
<p>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.</p>
<p>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.</p>
<p><strong>Are there any specific Sketch features that have helped you in the process of designing Forrest?</strong></p>
<p>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.</p>
<p>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.</p>
<blockquote>
<p>Building a nested Symbols with automatically resizing components makes the design process easier and insanely satisfying</p>
</blockquote>
<p>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.</p>
<figure><img alt="An image showing Color Variables used in Forrest v2’s design" src="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-color-vars.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=55708b4b06717cc3b02709476a35a779" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-color-vars.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=531ac4f4c260fb8cce1d708720468ab1 360w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-color-vars.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=c8ee3a27c56657bbd355c65ffc6c5b54 390w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-color-vars.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=6c0000bf608ca2dd151a6a529f20f0d6 640w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-color-vars.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=bb37a33f9dcd5ff678852088bf4a1be5 768w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-color-vars.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=954827e3df9eec979bbb86ee9148a202 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-color-vars.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=d32ecf747db106f45f9973ec8b144fb7 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-color-vars.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=ab75f9b11d1139cf10a64d8651e638ef 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-color-vars.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=a4c1f84c7c541a336d508b0c64b5cc0e 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-color-vars.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=55708b4b06717cc3b02709476a35a779 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-09/forrest-sketch-color-vars.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=46f557ec94bf045a6ad5a9bbf0a58d48 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /></figure>
<p>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.</p>
<p>I’ve also found the <a href="https://apps.apple.com/en/app/sketch-view-and-mirror/id1609224699">Sketch — View and Mirror app</a> 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.</p>
<p><strong>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?</strong></p>
<p>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.</p>
<p>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.</p>
<p>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!</p>
<p><em><a href="https://apps.apple.com/gb/app/forrest-run-ride-race/id1529584540?ign-itscg=30200&ign-itsct=apps_box">Forrest</a> is available for download on iOS.</em></p>
<hr />
<p>Have you made something great with Sketch? We’d love to see it. Tell us about it in the <a href="https://forum.sketch.com/">community forum</a>!</p>
<ul>
<li><a href="https://apple.co/2HbNFsd">Download Forrest on the App Store</a></li>
</ul>
https://www.sketch.com/blog/sketch-iphone-ipad-guide/
Your guide to Sketch on iPhone and iPad
Whether you want to Mirror designs as you work on them, browse your Workspace on the move, or share feedback from the comfort of your sofa, our iOS app has you covered. 2023-09-07T07:23:24+00:00
2023-09-07T07:23:24+00:00
Freddie Harrison
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-app.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=537c104c9e1e024b29006fb0732e7ddd" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-app.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=8e4bba8e8eb16c7d23c4642642d9b7f6 360w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-app.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=7a972e2279579e40bc72424ebe941147 390w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-app.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=5384ab5de6c5abdb0251b498db4b09f0 640w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-app.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=73495b3f8c4222b5202e2ed13f20db6c 768w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-app.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=365b682dcbfef02a3a4804975d84b31a 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-app.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=0915b58e5f7cd41ab4627b52cd60d8b9 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-app.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=76355f9eec85157fbb38cf984b2ae9ef 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-app.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=7398822ca1b090dc8accd57e007869b3 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-app.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=537c104c9e1e024b29006fb0732e7ddd 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-app.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=c570d37f1e7f2cf60db0fef397aed31f 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">Back in July 2022, we launched <a href="https://www.sketch.com/blog/iphone-app/">a brand new Sketch app for iPhone</a>. Since then, we’ve been working hard on a whole host of updates and improvements — and a lot has changed!</p>
<p>For starters, <a href="https://apps.apple.com/app/sketch-view-and-mirror/id1609224699">Sketch — View and Mirror</a> 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.</p>
<h2 id="browse-your-workspace-on-the-move">Browse your Workspace on the move</h2>
<figure><img alt="An image showing an iPad browsing a Sketch workspace and documents." src="https://sketch-cdn.imgix.net/assets/blog/2023-08/ipad-browse.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=5d6752276c2df87fb22088b118c1b774" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-08/ipad-browse.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=40a8f934cce6e5f58e1b15d602333ab1 360w, https://sketch-cdn.imgix.net/assets/blog/2023-08/ipad-browse.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=831974362a72021e12a9ea22d917028a 390w, https://sketch-cdn.imgix.net/assets/blog/2023-08/ipad-browse.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=198064285101d027e5af9a6c6f47448c 640w, https://sketch-cdn.imgix.net/assets/blog/2023-08/ipad-browse.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=ef3e6edffc81d44ac4da503e5004cdf1 768w, https://sketch-cdn.imgix.net/assets/blog/2023-08/ipad-browse.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=435fd6cca2f7343519fb0cb18c84d697 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-08/ipad-browse.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=cd374fb2efad3f3f255a2ab5a7951e85 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-08/ipad-browse.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=8119af21153226b884235e3d163f9c19 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-08/ipad-browse.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=8627f8365b16a9e50130a32ffa288855 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-08/ipad-browse.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=5d6752276c2df87fb22088b118c1b774 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-08/ipad-browse.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=2094ee84ffbe6fb8fa94608b4d92c8be 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>To switch between Workspaces, tap on the Workspace icon in the top corner of the screen</p></figcaption></figure>
<p>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.</p>
<p>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.</p>
<p>There’s full support for recent Workspace organization features like <a href="/blog/projects-collections-guide/">Projects and Collections</a>, 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.</p>
<p>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.</p>
<div class="btc-tip">
Sketch — View & Mirror works exclusively with a <a href="/pricing/">Sketch subscription</a>, so you’ll need to sign in with an active Sketch Account to use the app, even if you want to open local documents.
</div>
<h2 id="view-documents-in-full-detail">View documents in full detail</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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…</p>
<h2 id="create-view-resolve-and-respond-to-comments">Create, view, resolve and respond to comments</h2>
<figure><img alt="An image showing a Sketch document with comments on an iPhone and iPad." src="https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-comments.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=9b460cf4fd5edea52ee89b43561862c2" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-comments.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=9b8af333255fcf88a070e864f463c7d8 360w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-comments.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=d6852519c26ede123d93cbf1d50d24fd 390w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-comments.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=1526040331aac596a12395d97680a501 640w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-comments.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=f3a45bb3a6a8578336c8899c5a68feb8 768w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-comments.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=d7185748acb3a3c84c34dfa1e2a9ef4a 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-comments.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=a6c56e0a16cd672a37bb81f219a144b2 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-comments.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=4d1556108070d0e5fa9f9996c2afc181 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-comments.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=1722b39243cdc12ca492ca1b03d3dd83 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-comments.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=9b460cf4fd5edea52ee89b43561862c2 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-ipad-comments.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=25f9efc9311e836983913156eacac694 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>You can create, respond to, and resolve comments on Mac, iPhone, iPad or the web app</p></figcaption></figure>
<p>Having access to Sketch documents on your iPhone or iPad really makes sense when it comes to reviewing designs and <a href="/docs/sharing-and-collaborating/commenting/">sharing feedback</a>. 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.</p>
<p>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.</p>
<h2 id="test-prototypes-on-real-devices">Test prototypes on real devices</h2>
<p>If there’s one thing better than <a href="/docs/prototyping/">creating a quick prototype</a> to test out a new flow or idea, it’s trying that prototype on a real device.</p>
<p>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.</p>
<p>If you have multiple prototypes or <a href="/docs/prototyping/using-starting-points/">prototype start points</a> in a single Sketch document, you can long press on the play button in the top-right corner to choose between them.</p>
<h2 id="mirror-documents-as-you-edit-on-your-mac">Mirror documents as you edit on your Mac</h2>
<figure><img alt="An image showing a Mac and an iPhone, both showing the same Sketch document." src="https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-mirror.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=ec1827a457f0fd3297d7ee81565752ca" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-mirror.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=c676dda71d6cd3f566370b80089ef71f 360w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-mirror.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=55eb8464f57fb2a97408050fda6a5062 390w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-mirror.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=e067631d1f52c6067a83178a6685f39b 640w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-mirror.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=48f925dcc47e8e4d303ef096e0d1309a 768w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-mirror.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=8603d678f3f8939aab792f700617ed64 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-mirror.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=39f2733ec44b7372fd9ed27833bbbbb9 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-mirror.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=9078b20e425a55585dbe24151b5b8f14 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-mirror.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=2e44a9a0366146c0214a7918c3ce61d1 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-mirror.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=ec1827a457f0fd3297d7ee81565752ca 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-08/iphone-mirror.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=0bcba420ed2bb07db53c1cd25f09f513 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption><p>Mirroring a document as you edit on your Mac gives you a quick way to preview changes on a real device</p></figcaption></figure>
<p>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.</p>
<p>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.</p>
<p>Our iPhone and iPad app not only makes use of the same rendering engine we use on the Mac, but also the <a href="/blog/everything-about-the-sketch-mac-app-2022/">real-time collaboration</a> 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.</p>
<p>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.</p>
<p>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.</p>
<div class="btc-tip">
If you want to open a document you’re editing on your Mac even faster, you can use <a href="https://support.apple.com/en-gb/HT209455">Apple’s Handoff feature</a>. 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.
</div>
<hr />
<p><a href="https://apps.apple.com/app/sketch-view-and-mirror/id1609224699">Sketch — View and Mirror</a> 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 <a href="https://forum.sketch.com/">community forum</a>. See you there!</p>
https://www.sketch.com/blog/chibistudio/
How ChibiStudio helps anime fans express their creativity
Get ready to obsess over the most kawaii app of all2023-08-17T06:59:42+00:00
2023-08-17T06:59:42+00:00
Gabrielle van Welie
<img alt="Image of ChibiStudio screens made in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/chibistudio.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=d769d79711d916a7e40732d05194328c" srcset="https://sketch-cdn.imgix.net/assets/blog/chibistudio.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=1beeef780c802da0ec8a2b69393666d6 360w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=f300bb74ae061f75a4d159b7b251abc9 390w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=281f4f34982ed87b61f80c061fa7fa06 640w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=bd6ec60c47d30043b97714133f63eccf 768w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=172cb9374ac87f5a0926192944059b41 1024w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=b0452e6613b3c374c4cbd3e74a84737e 1220w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=208976be83764a7799d62282c45d5239 1440w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=d501130e580aaaf63b0d94e4775d9098 1600w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=d769d79711d916a7e40732d05194328c 1920w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=1f1bb0819af9931cc616721669498a78 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">You might know developer <a href="https://twitter.com/_inside" target="_blank" rel="nofollow noopener noreferrer">Guilherme Rambo</a> for his work as a <a href="https://rambo.codes/" target="_blank" rel="nofollow noopener noreferrer">vigilante</a>, cracking down on Apple’s secrets and helping them fix security vulnerabilities in macOS, iOS, and other operating systems through their bug bounty program.</p>
<p>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 <em>what</em>. But this time, Apple came to Guilherme’s rescue with the announcement of the App Store for iMessage at the WWDC that same year.</p>
<p>“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.</p>
<p>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.”</p>
<p>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!</p>
<p>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.</p>
<h2 id="the-making-of-chibistudio">The making of ChibiStudio</h2>
<p>For Ewerton, ideas start right in Sketch. “[I’ll start] using mostly just the <a href="/docs/designing/vector-editing/">vector tool</a>, 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.</p>
<p>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.</p>
<p>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.</p>
<figure class="no-border"><video title="Time-lapse showing how Ewerton Lima designs for ChibiStudio in Sketch" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/ChibiStudioTimeLapse.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/ChibiStudioTimeLapse.mp4" type="video/mp4" /></video><figcaption></figcaption></figure>
<p>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.”</p>
<p>To accomplish this, he created a plugin that <a href="/docs/designing/importing-and-exporting/#exporting-css-and-svg-code">exports</a> 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.</p>
<p>For optimal performance and cost-effectiveness, they use the internal tool to convert the SVGs into <a href="https://developer.apple.com/documentation/quartzcore" target="_blank" rel="nofollow noopener noreferrer">Core Animation</a> 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.</p>
<figure><img alt="Screenshot of Chibi Studio’s internal tool" src="https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-InternalTool.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=5ccf504edd4b192ce499e51cf693f87c" srcset="https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-InternalTool.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=59b564961c956b897783644d201f9917 360w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-InternalTool.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=77235012e9d12bd1b4607569d1eb2464 390w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-InternalTool.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=5b9a070c33fd17c878445b1ff0da8de7 640w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-InternalTool.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=95dc20d6b71130ef67b5e32bf80c92bc 768w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-InternalTool.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=0646b5bb1451fd98f40a2f2dd102da30 1024w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-InternalTool.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=df317e78a4125f0c92b9302ae30711d8 1220w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-InternalTool.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=1f5cd21272567fe141224cf5a9e4224c 1440w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-InternalTool.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=7283aacfaae96e0b482673dd8ea24e9c 1600w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-InternalTool.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=5ccf504edd4b192ce499e51cf693f87c 1920w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-InternalTool.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=702b97bf56bb66aceda586389fd6749d 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<p>“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.</p>
<h2 id="doing-right-by-the-user">Doing right by the user</h2>
<p>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.</p>
<p>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.</p>
<p>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.”</p>
<p>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.”</p>
<figure><img alt="Screenshot of ChibiStudio in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-ItemInSketch.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=645b4597ac6fac72ef208e6a0b847dc3" srcset="https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-ItemInSketch.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=7555ec30fe236c00a85e4cf3f454eeb5 360w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-ItemInSketch.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=2514121bb8923c1104c2a954464a4d53 390w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-ItemInSketch.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=422766b406663ed77631b2f35c8a9570 640w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-ItemInSketch.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=763299a4fd73782d98e94df7868ae450 768w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-ItemInSketch.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=23ca788b0d3b8456d30662d67e93b86c 1024w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-ItemInSketch.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=4c10b6b436f22b2fb90a437d6b7a9588 1220w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-ItemInSketch.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=f6ff9876f3f12b855097f6bbbbe38b44 1440w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-ItemInSketch.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=1486ea01e259c88749597561fefe75c3 1600w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-ItemInSketch.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=645b4597ac6fac72ef208e6a0b847dc3 1920w, https://sketch-cdn.imgix.net/assets/blog/ChibiStudio-ItemInSketch.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=86caedaca51bfede9170790f8e260aff 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h2 id="idea-meet-development">Idea, meet Development</h2>
<p>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?</p>
<p>“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.</p>
<p>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 <a href="https://developer.apple.com/app-clips/" target="_blank" rel="nofollow noopener noreferrer">App Clip</a> 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 <a href="https://rambo.codes/posts/2020-08-29-turning-the-chibistudio-canvas-into-an-app-clip" target="_blank" rel="nofollow noopener noreferrer">Guilherme’s blog</a>.</p>
<figure class="no-border"><img alt="View of multiple ChibiStudio screens" src="https://sketch-cdn.imgix.net/assets/blog/chibistudio.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=fdb69c35a8b1bfefadca0d567b7ff1be" srcset="https://sketch-cdn.imgix.net/assets/blog/chibistudio.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=c93c2cc546f24d576c3e518955313364 360w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=bda0d1e812194b296482f544a860cce1 390w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=95984c37c826f0ea50608f12395b0212 640w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=f401f9d6cb3791e32ce7eb5329eb75df 768w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=501b45fd67149f67a93e9a39adb18bdf 1024w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=176ec0d84289d5e1ad61b6e46b17f482 1220w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=43711f4c4e8136288d17b314ebaa5bbb 1440w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=d10419dccd70038fb953400dea1d4930 1600w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=fdb69c35a8b1bfefadca0d567b7ff1be 1920w, https://sketch-cdn.imgix.net/assets/blog/chibistudio.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=1a7973806b403c08a10b527801bd48ed 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h2 id="reaping-the-rewards">Reaping the rewards</h2>
<p>While economic success is often what app creators are after, there can be a lot more to gain than just financial freedom.</p>
<p>“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.</p>
<p>“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.”</p>
<p>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.”</p>
<hr />
<p><a href="https://chibi.app/" target="_blank" rel="nofollow noopener noreferrer">ChibiStudio</a> is available for <a href="https://apps.apple.com/app/chibistudio/id1135307199" target="_blank" rel="nofollow noopener noreferrer">iOS</a>. You can also follow them on <a href="https://twitter.com/chibistudioapp" target="_blank" rel="nofollow noopener noreferrer">Twitter</a> and <a href="https://www.instagram.com/chibistudioapp/" target="_blank" rel="nofollow noopener noreferrer">Instagram</a> to stay up to date with all the <a href="/blog/made-with-sketch-viviane-valenta/">kawaii</a> cuteness they’ll have in store.</p>
<ul>
<li><a href="https://www.sketch.com/blog/made-with-sketch/">Read more #MadeWithSketch stories</a></li>
</ul>
https://www.sketch.com/blog/design-systems-best-practices/
How to organize and maintain design systems in Sketch
Start thinking about design systems in a whole new way2023-08-11T06:37:10+00:00
2023-08-11T06:37:10+00:00
Jaime Creixems
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/design-system-management.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=71a21bcf2fd52f156e70ad913d610e8d" srcset="https://sketch-cdn.imgix.net/assets/blog/design-system-management.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=59e7b7976ae265c2021ea7325148ca73 360w, https://sketch-cdn.imgix.net/assets/blog/design-system-management.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=955e2748ff1a7cba4617d4d49be525e4 390w, https://sketch-cdn.imgix.net/assets/blog/design-system-management.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=bf2f55d8e6b4887057d04d25f001f51e 640w, https://sketch-cdn.imgix.net/assets/blog/design-system-management.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=34722b6afc6a8fb0d65e937abbd04ad9 768w, https://sketch-cdn.imgix.net/assets/blog/design-system-management.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=9b5e0eeb000e0db3439ee86ff1b85993 1024w, https://sketch-cdn.imgix.net/assets/blog/design-system-management.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=cd260c13cf6c06d4c01c2777deecd2a7 1220w, https://sketch-cdn.imgix.net/assets/blog/design-system-management.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=4b0accc0fdad99e0084030c41ab3e001 1440w, https://sketch-cdn.imgix.net/assets/blog/design-system-management.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=84a9fdda79283b2065ab374d241e8949 1600w, https://sketch-cdn.imgix.net/assets/blog/design-system-management.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=71a21bcf2fd52f156e70ad913d610e8d 1920w, https://sketch-cdn.imgix.net/assets/blog/design-system-management.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=8f34c11831a5fe4eb0abb701db7c6d71 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">Recently, I talked about <a href="/blog/build-design-systems/">how to build a design system</a>. I covered basic components like <a href="/blog/how-to-make-the-most-of-color-variables/">Color Variables</a> and <a href="/docs/libraries/library-styles/">Styles</a>, and how to work in guidelines and agreements. But as your <a href="/blog/what-is-a-design-system/">design system</a> 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.</p>
<p>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.</p>
<p>Let’s take a look 👀</p>
<h2 id="embrace-your-inner-organizer">Embrace your inner organizer</h2>
<p>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.</p>
<p>In Sketch, you can use <a href="/docs/getting-started/projects-and-collections/#creating-a-project">Projects</a> and <a href="/blog/projects-collections-guide/">Collections</a> 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.</p>
<p>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.</p>
<div class="btc-tip">
<strong>Related:</strong> <a href="/blog/projects-collections-guide/">Three ways to organize your Sketch Workspace with Projects and Collections</a>.
</div>
<h2 id="choose-between-platform-agnostic-and-platform-priority">Choose between platform-agnostic and platform priority</h2>
<p>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.</p>
<p>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.</p>
<p>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 <a href="https://developer.apple.com/design/resources/">Apple’s UI kits</a>.</p>
<p>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!</p>
<h2 id="group-your-components">Group your components</h2>
<p>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?</p>
<p>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.</p>
<p>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.</p>
<div class="btc-tip">
<strong>Pro tip:</strong> You can use emojis like📱and 💻 emojis to name device-specific components.
</div>
<figure class="no-border"><video title="Video showing how grouped components look in Sketch" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/design-systems-group-components.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/design-systems-group-components.mp4" type="video/mp4" /></video><figcaption></figcaption></figure>
<h2 id="work-with-one-source-of-truth">Work with one source of truth</h2>
<p>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?</p>
<p><a href="/docs/sharing-and-collaborating/sharing-and-viewing-documents/creating-starred-versions/#controlling-library-updates-with-stars">Starred versions</a> 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 <strong>Star</strong> that version of the Library and we’ll deliver the update to anyone using the Library.</p>
<p>Here are a couple of extra tips on how you can use version stars to manage your design system better:</p>
<ul>
<li><strong>Add a page for previewing changes.</strong> 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.</li>
<li><strong>Add a description.</strong> You can add descriptions to your starred versions to describe any major changes, making it easier for your team to find the right one.</li>
<li><strong>Set “release dates” for your team.</strong> 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.</li>
</ul>
<p>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.</p>
<figure class="no-border"><video title="Video showing how to star Library versions in Sketch" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/design-systems-star-versions.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/design-systems-star-versions.mp4" type="video/mp4" /></video><figcaption></figcaption></figure>
<h2 id="build-out-your-components-using-styles">Build out your components using Styles</h2>
<p>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.</p>
<p>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.</p>
<figure class="no-border"><video title="Video showing how to update color variables in Sketch" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/design-systems-color-variables.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/design-systems-color-variables.mp4" type="video/mp4" /></video><figcaption><p>We have a whole guide on Color Variables if you want to learn more!</p></figcaption></figure>
<h2 id="establish-a-design-system-council">Establish a design system council</h2>
<p>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.</p>
<p>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.</p>
<p>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! 🍕</p>
<p>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.</p>
<hr />
<p>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.</p>
<ul>
<li><a href="https://www.sketch.com/blog/build-design-systems/">Learn more about design systems</a></li><li><a href="sketch://">Try it out in Sketch</a></li>
</ul>
https://www.sketch.com/blog/build-component-library/
How to build a component Library in Sketch
Learn how to bring Symbols, Styles, Color Variables and Artboard Templates together2023-08-03T06:09:27+00:00
2023-08-03T06:09:27+00:00
Gabrielle van Welie
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/build-component-library.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=efd0dde5e0faa2bbc64825eceb2641d0" srcset="https://sketch-cdn.imgix.net/assets/blog/build-component-library.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=9e7ff6a14bb8ebefd46898a368cfb6c2 360w, https://sketch-cdn.imgix.net/assets/blog/build-component-library.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=7c33ac137535043e8dbb8437c167e3f0 390w, https://sketch-cdn.imgix.net/assets/blog/build-component-library.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=ebc3b201e9c9e9c349c7ceec368f7a74 640w, https://sketch-cdn.imgix.net/assets/blog/build-component-library.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=1aa2059a0a6b61d1fd56078a5beb63c2 768w, https://sketch-cdn.imgix.net/assets/blog/build-component-library.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=585f8aabbde637d5341cb1e8bbbfe78f 1024w, https://sketch-cdn.imgix.net/assets/blog/build-component-library.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=5b91212b143ca5dbb3767bd10f9ed1f0 1220w, https://sketch-cdn.imgix.net/assets/blog/build-component-library.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=d2cedca9859d11a1ff8b3402d0c6823b 1440w, https://sketch-cdn.imgix.net/assets/blog/build-component-library.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=ed61f34c5e339eb7dd209d37052be245 1600w, https://sketch-cdn.imgix.net/assets/blog/build-component-library.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=efd0dde5e0faa2bbc64825eceb2641d0 1920w, https://sketch-cdn.imgix.net/assets/blog/build-component-library.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=ddf753da00eda5f640bdde88e082d753 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">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 <a href="/docs/libraries/">Library</a>.</p>
<p>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!</p>
<h2 id="how-to-create-a-library">How to create a Library</h2>
<p>With <a href="https://www.sketch.com/blog/libraries-an-in-depth-look/">Libraries</a>, 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.</p>
<p>You can turn any document into a Library in Sketch by using <strong>File</strong> > <strong>Add as Library</strong>. In the web app, you can turn existing documents into a Library via document settings.</p>
<div class="btc-tip">
You can learn more about <a href="https://www.sketch.com/courses/sketch-102/3-1-creating-sharing-libraries/">Libraries</a> with our free Sketch 102 course — and so much more!
</div>
<figure class="no-border"><video title="Video showing how to create a library in Sketch" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/library-create.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/library-create.mp4" type="video/mp4" /></video><figcaption></figcaption></figure>
<p>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.</p>
<p>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.</p>
<h2 id="level-1-basic-components">Level 1: Basic components</h2>
<p>If you’re building a Library from the ground up, we’d recommend starting with the fundamental building blocks of styles and colors.</p>
<p>Here’s your component starter pack in Sketch 👇</p>
<h3 id="color-variables">Color Variables</h3>
<p><strong><a href="/docs/symbols-and-styles/color-variables/">Color Variables</a></strong> 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.</p>
<figure class="no-border"><img alt="Image showing color variables in a Library in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/library-color-variables.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=8dec58af5f22e2aa0a4752ba14316f3e" srcset="https://sketch-cdn.imgix.net/assets/blog/library-color-variables.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=1f2ba26666791d0109e39aed96bbf95f 360w, https://sketch-cdn.imgix.net/assets/blog/library-color-variables.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=9468d23790181f4276d51454d65e60f7 390w, https://sketch-cdn.imgix.net/assets/blog/library-color-variables.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=c223aa324d4cbcbdc03d24efcf145a82 640w, https://sketch-cdn.imgix.net/assets/blog/library-color-variables.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=eceb8ca03c298786402d4f4d97b9c311 768w, https://sketch-cdn.imgix.net/assets/blog/library-color-variables.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=4b7dc819e1243c01e1bfd240d6f9b5d3 1024w, https://sketch-cdn.imgix.net/assets/blog/library-color-variables.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=cac7d1f4574f495d04d3cc289645a904 1220w, https://sketch-cdn.imgix.net/assets/blog/library-color-variables.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=4b5a4379b3a6b3ec0e64b6bad6e577ac 1440w, https://sketch-cdn.imgix.net/assets/blog/library-color-variables.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=931232a50aeee62c3993e9c1e9c23e42 1600w, https://sketch-cdn.imgix.net/assets/blog/library-color-variables.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=8dec58af5f22e2aa0a4752ba14316f3e 1920w, https://sketch-cdn.imgix.net/assets/blog/library-color-variables.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=b4d7db7a8ce8dd7fafdff1a1e542c83e 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h3 id="text-styles">Text Styles</h3>
<p>When it comes to working with typography, <strong><a href="/docs/symbols-and-styles/text-and-layer-styles/text-styles/">Text Styles</a></strong> 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.</p>
<figure class="no-border"><img alt="Image showing text styles in a Library in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/library-text-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=4f464b69ba4f9f05ccdc1754f3de1637" srcset="https://sketch-cdn.imgix.net/assets/blog/library-text-styles.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=0896bbf103494dfa088f110ab2b70953 360w, https://sketch-cdn.imgix.net/assets/blog/library-text-styles.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=205c3ade2cc8142a2c9027cd3e0838dc 390w, https://sketch-cdn.imgix.net/assets/blog/library-text-styles.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=ee1e1b16157c21b3a58e2090efa5f1f0 640w, https://sketch-cdn.imgix.net/assets/blog/library-text-styles.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=6805d12f14d0726448d0eb0366b9f514 768w, https://sketch-cdn.imgix.net/assets/blog/library-text-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=8ba2570613c74840bdb77ce8eb526594 1024w, https://sketch-cdn.imgix.net/assets/blog/library-text-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=6a211dfc1e6a24c5f7bc4c9649b35fa3 1220w, https://sketch-cdn.imgix.net/assets/blog/library-text-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=561082571cf15892a52bcbb73f083d6f 1440w, https://sketch-cdn.imgix.net/assets/blog/library-text-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=1c770ee8ab943a2d06a405a1ca23639e 1600w, https://sketch-cdn.imgix.net/assets/blog/library-text-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=4f464b69ba4f9f05ccdc1754f3de1637 1920w, https://sketch-cdn.imgix.net/assets/blog/library-text-styles.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=1292261865ee814a38eaddc9d46c75dd 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h3 id="layer-styles">Layer Styles</h3>
<p><strong><a href="/docs/symbols-and-styles/text-and-layer-styles/layer-styles/">Layer Styles</a></strong> 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.</p>
<figure class="no-border"><img alt="Image showing layer styles in a Library in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/library-layer-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=94be20b2b3adfdf7cd434dcb6fe21533" srcset="https://sketch-cdn.imgix.net/assets/blog/library-layer-styles.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=482508823ece64de4c6d54bc8b961202 360w, https://sketch-cdn.imgix.net/assets/blog/library-layer-styles.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=fb2e562fc7b7f792126d853a06aa042d 390w, https://sketch-cdn.imgix.net/assets/blog/library-layer-styles.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=38f9cdabaad8cef972e861986e34b2a5 640w, https://sketch-cdn.imgix.net/assets/blog/library-layer-styles.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=5e14d7dce8e25d6eab8ae223481fbabe 768w, https://sketch-cdn.imgix.net/assets/blog/library-layer-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=f474fd8eb6c079ba5a3b529400f13df4 1024w, https://sketch-cdn.imgix.net/assets/blog/library-layer-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=f002858bddcc46511255444b580b5b6e 1220w, https://sketch-cdn.imgix.net/assets/blog/library-layer-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=b29d3efb4cdcc165637971d5e9e89efd 1440w, https://sketch-cdn.imgix.net/assets/blog/library-layer-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=74d6bca82da2e61fa20979962e985524 1600w, https://sketch-cdn.imgix.net/assets/blog/library-layer-styles.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=94be20b2b3adfdf7cd434dcb6fe21533 1920w, https://sketch-cdn.imgix.net/assets/blog/library-layer-styles.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=ea3b556fa189fb922e1e32a63d00fc17 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h3 id="how-it-all-comes-together">How it all comes together</h3>
<p>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.</p>
<p>You can quickly access Color Variables and styles through the Components view, which you can trigger by pressing <kbd>C</kbd> in the Mac app. From here, you can drag them drop them right onto layers you want to apply them to.</p>
<p>Once you’ve got your basic components ready, you can start working on more complex elements.</p>
<h2 id="level-2-symbols-and-nested-symbols">Level 2: Symbols and Nested Symbols</h2>
<p>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.</p>
<h3 id="symbols">Symbols</h3>
<p><a href="/docs/symbols-and-styles/symbols/">Symbols</a> 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.</p>
<p>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.</p>
<div class="btc-tip">
New to Symbols? You’re in for a treat. We’ve recently written about the <a href="https://www.sketch.com/blog/symbols-benefits/">benefits of working with Symbols</a> in Sketch, and <a href="/blog/symbols-workflow/">how to incorporate Symbols into your workflow</a> if you want to get up to speed.
</div>
<figure class="no-border"><img alt="Image showing symbols in a Library in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/library-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=939a10cbcdc2cfdb9830d151fb92a976" srcset="https://sketch-cdn.imgix.net/assets/blog/library-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=703c09c60d497222eb6ef17fab2104cb 360w, https://sketch-cdn.imgix.net/assets/blog/library-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=9b9c79943d3566f32b08a35e0d7af8fb 390w, https://sketch-cdn.imgix.net/assets/blog/library-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=b23ada2c86858168d503b73055ec7882 640w, https://sketch-cdn.imgix.net/assets/blog/library-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=a566216a5c84731e7e163cdef58562cf 768w, https://sketch-cdn.imgix.net/assets/blog/library-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=317418bc8fdebdffe463ea97cdee8a0e 1024w, https://sketch-cdn.imgix.net/assets/blog/library-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=a92bfb521eb9878579fd878afc083d90 1220w, https://sketch-cdn.imgix.net/assets/blog/library-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=8385d3c46d84e5d811e1de06ea4ecdc1 1440w, https://sketch-cdn.imgix.net/assets/blog/library-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=94b9948094314598286b8b8264d6eca6 1600w, https://sketch-cdn.imgix.net/assets/blog/library-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=939a10cbcdc2cfdb9830d151fb92a976 1920w, https://sketch-cdn.imgix.net/assets/blog/library-symbols.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=2871dc7ff5c1c839d8ca72d2977f113d 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h3 id="nested-symbols">Nested Symbols</h3>
<p>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.</p>
<h3 id="how-it-all-comes-together-1">How it all comes together</h3>
<p>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.</p>
<h2 id="level-3-artboard-templates">Level 3: Artboard Templates</h2>
<p>With <a href="https://www.sketch.com/blog/introducing-artboard-templates/">Artboard Templates</a>, 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.</p>
<p>All you have to do is select the Artboard and enable the <strong>Use as Template</strong> checkbox in the Inspector. Then, you’ll be able to access your new Artboard Template through the dropdown in the Inspector after pressing <kbd>A</kbd> or in the Components window.</p>
<figure class="no-border"><img alt="Image showing artboard templates in a Library in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/library-artboard-templates.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=1a57d96fe9f90277637e93de5860bb07" srcset="https://sketch-cdn.imgix.net/assets/blog/library-artboard-templates.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=1ce28da5d072d1ae2f65ff006400935a 360w, https://sketch-cdn.imgix.net/assets/blog/library-artboard-templates.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=05c2cdc4583f6971e12d95a882419b91 390w, https://sketch-cdn.imgix.net/assets/blog/library-artboard-templates.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=d5723985f22047f4e7683ca8110d0720 640w, https://sketch-cdn.imgix.net/assets/blog/library-artboard-templates.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=1d3328682307cc13bd51571f30bc410f 768w, https://sketch-cdn.imgix.net/assets/blog/library-artboard-templates.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=c48a732485f031793a3418b593080965 1024w, https://sketch-cdn.imgix.net/assets/blog/library-artboard-templates.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=fcbfe685ef6cec453ca2ae061657d22c 1220w, https://sketch-cdn.imgix.net/assets/blog/library-artboard-templates.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=004685b19ce4709fc7d8d14181995da5 1440w, https://sketch-cdn.imgix.net/assets/blog/library-artboard-templates.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=13d2c8b378b23d0d09b130a5b97a74a0 1600w, https://sketch-cdn.imgix.net/assets/blog/library-artboard-templates.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=1a57d96fe9f90277637e93de5860bb07 1920w, https://sketch-cdn.imgix.net/assets/blog/library-artboard-templates.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=436f6d4b73d5a0c37f87ebd40e4f5e05 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<p>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.</p>
<div class="btc-tip">
<strong>Pro Tip:</strong> 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.
</div>
<figure class="no-border"><video title="Video showing how to use an Artboard Template in a Library in Sketch" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/artboard-template-example.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/artboard-template-example.mp4" type="video/mp4" /></video><figcaption></figcaption></figure>
<h3 id="how-it-all-comes-together-2">How it all comes together</h3>
<p>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.</p>
<p>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 <a href="https://www.sketch.com/blog/build-design-systems/">how to build a design system</a> you can check out if you’re looking to dive deeper.</p>
<hr />
<p>And there you have it! If you want to learn more about Libraries, we have <a href="https://www.sketch.com/blog/libraries-an-in-depth-look/">an in-depth post</a> ready for you.</p>
<ul>
<li><a href="https://www.sketch.com/blog/libraries-an-in-depth-look/">Learn more about Libraries</a></li><li><a href="sketch://">Try it out in Sketch</a></li>
</ul>
https://www.sketch.com/blog/symbols-benefits/
Benefits of working with Symbols in Sketch
Learn how to take your workflow to the next level with Symbols2023-07-27T06:14:35+00:00
2023-07-27T06:14:35+00:00
Gabrielle van Welie
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/symbols-benefits.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=82b60f3e9a196e3330d52a86edba1683" srcset="https://sketch-cdn.imgix.net/assets/blog/symbols-benefits.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=63ad684158859983d0dcd97177fed386 360w, https://sketch-cdn.imgix.net/assets/blog/symbols-benefits.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=4860fbe44eb3a698f5b8631f90146d72 390w, https://sketch-cdn.imgix.net/assets/blog/symbols-benefits.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=83f579cf0e8b6a1e50eaba8543b2c470 640w, https://sketch-cdn.imgix.net/assets/blog/symbols-benefits.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=a5e9ce8437cac77d830b8b7e4f8b510a 768w, https://sketch-cdn.imgix.net/assets/blog/symbols-benefits.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=1c7d341a56d6c51f3dd320caff57547c 1024w, https://sketch-cdn.imgix.net/assets/blog/symbols-benefits.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=d6fdefe16e06970ecac2f4500d01e178 1220w, https://sketch-cdn.imgix.net/assets/blog/symbols-benefits.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=6427db2ce4eb7061210e257eaa40f63c 1440w, https://sketch-cdn.imgix.net/assets/blog/symbols-benefits.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=19c543166d7b7a00074e3e2968012a80 1600w, https://sketch-cdn.imgix.net/assets/blog/symbols-benefits.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=82b60f3e9a196e3330d52a86edba1683 1920w, https://sketch-cdn.imgix.net/assets/blog/symbols-benefits.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=13da6e89ac2d4403ba9af33f44bd7d3a 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">Feeling like your workflow could use a little power-up? Let’s talk Symbols! Maybe you’ve played around with Symbols but haven’t <a href="/blog/symbols-workflow/">integrated them entirely into your workflow</a>. Or you might be new to Sketch (welcome!). Whichever the case, this post is for you.</p>
<p>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!</p>
<p>But first, a quick refresher.</p>
<h2 id="what-are-symbols-again">What are Symbols again?</h2>
<p>In simple terms, a <strong><a href="/docs/symbols-and-styles/symbols/">Symbol</a></strong> is a special type of <strong><a href="/docs/interface-and-settings/the-mac-app-interface/the-canvas/#using-artboards">Artboard</a></strong> 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.</p>
<p>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 <a href="/blog/create-symbols-sketch/">how to create Symbols in Sketch</a>.</p>
<h2 id="benefits-of-working-with-symbols-in-sketch">Benefits of working with Symbols in Sketch</h2>
<p>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.</p>
<h3 id="they-help-you-work-faster">They help you work faster</h3>
<p>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.</p>
<p>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.</p>
<figure class="no-border"><video title="Graphic showing how you can edit individual Symbol Instances in Sketch" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/symbol-source.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/symbol-source.mp4" type="video/mp4" /></video><figcaption></figcaption></figure>
<h3 id="they-make-your-designs-more-flexible">They make your designs more flexible</h3>
<p>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.</p>
<p>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 <a href="/docs/designing/smart-layout/">Smart Layout</a> documentation for more details.</p>
<h3 id="they-let-you-iterate-with-ease">They let you iterate with ease</h3>
<p>Overrides are your best friend when you need to make changes to your Symbol instances. In the <a href="/docs/symbols-and-styles/overrides/#customizing-instances-with-overrides-in-symbols">Overrides</a> 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.</p>
<p>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.</p>
<figure class="no-border"><img alt="Diagram showing how to edit Symbols via overrides in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/symbol-instances-benefit.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=9acbc6634edc77c80d08d90bad2cc5d2" srcset="https://sketch-cdn.imgix.net/assets/blog/symbol-instances-benefit.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=f945dd1c3d500e5cc1e1e43e5cf25629 360w, https://sketch-cdn.imgix.net/assets/blog/symbol-instances-benefit.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=4af5b31910b020c6443647401edf8525 390w, https://sketch-cdn.imgix.net/assets/blog/symbol-instances-benefit.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=f4e5b94df7c5b9c8694c98bc0e6ba02c 640w, https://sketch-cdn.imgix.net/assets/blog/symbol-instances-benefit.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=e3ea8fd22ec3c0a7af63c10c7f3c367a 768w, https://sketch-cdn.imgix.net/assets/blog/symbol-instances-benefit.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=de3907c3030b7b3b0a773aea9e00ace2 1024w, https://sketch-cdn.imgix.net/assets/blog/symbol-instances-benefit.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=2d18e0f64f2fdce964193db94ff18e4e 1220w, https://sketch-cdn.imgix.net/assets/blog/symbol-instances-benefit.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=f517ba0da8a04b4c385d3d4e5e73d983 1440w, https://sketch-cdn.imgix.net/assets/blog/symbol-instances-benefit.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=603be80ea0a4f1d65b31b6295b2ac7ea 1600w, https://sketch-cdn.imgix.net/assets/blog/symbol-instances-benefit.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=9acbc6634edc77c80d08d90bad2cc5d2 1920w, https://sketch-cdn.imgix.net/assets/blog/symbol-instances-benefit.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=e9fc0873a3dc3099efdb2ded991f02d9 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h3 id="they-make-collaboration-intuitive">They make collaboration <strong>intuitive</strong></h3>
<p>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.</p>
<p>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.</p>
<div class="btc-tip">
Looking for hands-on practice? Check out our <a href="/s/40b8119c-9077-44c6-97a2-48af0773d004">Symbols tutorial</a>.
</div>
<h3 id="they-help-simplify-handoff">They help simplify handoff</h3>
<p>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.</p>
<p>We hope this post has given you a better idea of what you can do with Symbols. The next step is upping your <a href="/blog/symbols-workflow/">workflow game</a> 🚀</p>
<ul>
<li><a href="https://www.sketch.com/blog/create-symbols-sketch/">Learn more about Symbols</a></li><li><a href="https://www.sketch.com/features/">Discover more features</a></li>
</ul>
https://www.sketch.com/blog/projects-collections-guide/
Three ways to organize your Workspace with Projects and Collections
Keep your Sketch documents at your fingertips with these tips for using Projects and Collections2023-07-20T06:47:40+00:00
2023-07-20T06:47:40+00:00
Freddie Harrison
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/2023-07/collections-projects.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=2cd19255bcf2aca275e4b08b5d54bf5f" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-07/collections-projects.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=80df90a9b5b0d02a13f5e2f35cdf9999 360w, https://sketch-cdn.imgix.net/assets/blog/2023-07/collections-projects.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=d046c3441efcdae32d9c4d33f8955c41 390w, https://sketch-cdn.imgix.net/assets/blog/2023-07/collections-projects.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=d5380e47f38539ed96c0b59544c73b7d 640w, https://sketch-cdn.imgix.net/assets/blog/2023-07/collections-projects.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=9bcf7ebe316043e93174893a57dba3a6 768w, https://sketch-cdn.imgix.net/assets/blog/2023-07/collections-projects.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=916203822961693dc7c7cc7852841a35 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-07/collections-projects.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=dce99aaab26a085f7424b11d44b1291f 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-07/collections-projects.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=2d32f9ce468d6d53160ee70a02a86ad3 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-07/collections-projects.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=bd3df01b72a0760d3dc301744c5b17c7 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-07/collections-projects.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=2cd19255bcf2aca275e4b08b5d54bf5f 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-07/collections-projects.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=87d6f6d6a72e13890e7ec8de8bdd9b08 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">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!</p>
<p>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.</p>
<p>To help keep things organized, we introduced <a href="/docs/getting-started/projects-and-collections/#organizing-with-projects">Projects</a> — 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 <a href="/docs/getting-started/projects-and-collections/#organizing-with-collections">Collections </a>come in.</p>
<p>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.</p>
<p>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.</p>
<hr />
<h2 id="organizing-by-project-name-and-status">Organizing by project name and status</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<figure class="no-border"><img alt="Example of how you can use Collections to organize work in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/collections-status.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=96450587d89d8633ed7a2fea11c83be8" srcset="https://sketch-cdn.imgix.net/assets/blog/collections-status.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=8009100fb6a1eacfb3b4642f529c6253 360w, https://sketch-cdn.imgix.net/assets/blog/collections-status.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=542ac67b16fc13a2310e8a223f5aa53a 390w, https://sketch-cdn.imgix.net/assets/blog/collections-status.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=7f72a277c793d0f76dcfe03d3b4f23da 640w, https://sketch-cdn.imgix.net/assets/blog/collections-status.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=4220cde364dcb619e0aeef295e0de47b 768w, https://sketch-cdn.imgix.net/assets/blog/collections-status.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=66661ee3889177d250076b1dab84ae39 1024w, https://sketch-cdn.imgix.net/assets/blog/collections-status.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=1336bb6dab9c11ca047bb8dccadd241a 1220w, https://sketch-cdn.imgix.net/assets/blog/collections-status.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=8787fff11b8765d015b8fe7b481a68cc 1440w, https://sketch-cdn.imgix.net/assets/blog/collections-status.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=6da48e27bda66f0835cfc6f929f92c19 1600w, https://sketch-cdn.imgix.net/assets/blog/collections-status.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=96450587d89d8633ed7a2fea11c83be8 1920w, https://sketch-cdn.imgix.net/assets/blog/collections-status.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=d4020feeb0019192c1c2cf1a74bbb02a 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h2 id="organizing-by-client-and-project">Organizing by client and project</h2>
<p>If you’re working with multiple clients, another way to organize your work is by client (at Project level) and project (at Collections level).</p>
<p>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).</p>
<p>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.</p>
<figure class="no-border"><img alt="Example of how you can use Collections to organize work in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/collections-brand.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=18fc7cdce9f1f03c424c8b6b8433dc80" srcset="https://sketch-cdn.imgix.net/assets/blog/collections-brand.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=fd268ed4ce2fd9acd6e6fcef7a44e036 360w, https://sketch-cdn.imgix.net/assets/blog/collections-brand.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=fb490e945c6889725a6086cff3b1742e 390w, https://sketch-cdn.imgix.net/assets/blog/collections-brand.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=883033406725c2d53851c69a28f31560 640w, https://sketch-cdn.imgix.net/assets/blog/collections-brand.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=a446d6449dae5abf8a04ad6ab2961b2c 768w, https://sketch-cdn.imgix.net/assets/blog/collections-brand.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=a80e648d61fcbfc28e04232b2269b361 1024w, https://sketch-cdn.imgix.net/assets/blog/collections-brand.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=64f14550e45d73ed52dd9ff3e27f2ef0 1220w, https://sketch-cdn.imgix.net/assets/blog/collections-brand.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=ed73114e22e4911c5aa8ef13f161c6bc 1440w, https://sketch-cdn.imgix.net/assets/blog/collections-brand.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=62724b6eaf5068e14887bdb0dc836f37 1600w, https://sketch-cdn.imgix.net/assets/blog/collections-brand.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=18fc7cdce9f1f03c424c8b6b8433dc80 1920w, https://sketch-cdn.imgix.net/assets/blog/collections-brand.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=59d898a8b0fcb6031fa5837009960025 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<h2 id="organizing-by-brand-and-work-type">Organizing by brand and work type</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<figure class="no-border"><img alt="Example of how you can use Collections to organize work in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/collections-project.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=7ece4e361eedc205766955c9870999c9" srcset="https://sketch-cdn.imgix.net/assets/blog/collections-project.jpg?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=jpg&s=b983306549f878d798306d89600da9ec 360w, https://sketch-cdn.imgix.net/assets/blog/collections-project.jpg?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=jpg&s=ff86d4d6655d647225e2b4a96b066e66 390w, https://sketch-cdn.imgix.net/assets/blog/collections-project.jpg?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=jpg&s=f7858f4505084d7cd3fdcbe9878c04f0 640w, https://sketch-cdn.imgix.net/assets/blog/collections-project.jpg?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=jpg&s=c10df18d1b17373ef702b6da8fe1d323 768w, https://sketch-cdn.imgix.net/assets/blog/collections-project.jpg?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=jpg&s=61456908f18ece252ea4236058a07952 1024w, https://sketch-cdn.imgix.net/assets/blog/collections-project.jpg?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=jpg&s=991ddbb5e0c59133646308f60d5e1a31 1220w, https://sketch-cdn.imgix.net/assets/blog/collections-project.jpg?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=jpg&s=5dc36b166ddca74ce93d8f3d971eaa4f 1440w, https://sketch-cdn.imgix.net/assets/blog/collections-project.jpg?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=jpg&s=1e9e23c2262cd2e6c919c25ea58ca805 1600w, https://sketch-cdn.imgix.net/assets/blog/collections-project.jpg?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=jpg&s=7ece4e361eedc205766955c9870999c9 1920w, https://sketch-cdn.imgix.net/assets/blog/collections-project.jpg?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=jpg&s=5a1fd54b6800cc532120e99a62a06062 2400w" sizes="(min-width: 1024px) 744px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" /><figcaption></figcaption></figure>
<hr />
<p>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.</p>
<p>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, <a href="https://www.sketch.com/signin/">on the web</a>, or your <a href="https://apps.apple.com/app/sketch-view-and-mirror/id1609224699">iPhone or iPad</a>.</p>
<p>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 <a href="https://forum.sketch.com/">community forum</a>? We’d love to see it!</p>
<ul>
<li><a href="https://www.sketch.com/docs/getting-started/projects-and-collections/#organizing-with-projects">Learn how to use Projects</a></li><li><a href="https://www.sketch.com/docs/getting-started/projects-and-collections/#organizing-with-collections">Read the Collections documentation</a></li>
</ul>
https://www.sketch.com/blog/symbols-workflow/
How to incorporate Symbols into your Sketch workflow
Are you getting the most out of Symbols?2023-07-13T06:33:55+00:00
2023-07-13T06:33:55+00:00
Gabrielle van Welie
<img alt="" src="https://sketch-cdn.imgix.net/assets/blog/symbols-workflow.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=db59da81ecd4adbbd36baf3409e17c30" srcset="https://sketch-cdn.imgix.net/assets/blog/symbols-workflow.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=fb7fc6c06cb9f023fa0543841f50545a 360w, https://sketch-cdn.imgix.net/assets/blog/symbols-workflow.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=c8facfb0c6a5d77f1fc8d29836bba327 390w, https://sketch-cdn.imgix.net/assets/blog/symbols-workflow.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=9607b9dd049e3d647e6516044126c9bf 640w, https://sketch-cdn.imgix.net/assets/blog/symbols-workflow.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=de4bc84ff1fa3671b582af4c03c29647 768w, https://sketch-cdn.imgix.net/assets/blog/symbols-workflow.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=42e453743551311fbeb24106e48275a5 1024w, https://sketch-cdn.imgix.net/assets/blog/symbols-workflow.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=c1aa946f72ac0885cb6429a65d12d28e 1220w, https://sketch-cdn.imgix.net/assets/blog/symbols-workflow.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=f8dff08e38a59f42e361c05627887035 1440w, https://sketch-cdn.imgix.net/assets/blog/symbols-workflow.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=1c1bc7b8712eab19cf8eb83bc7dbd466 1600w, https://sketch-cdn.imgix.net/assets/blog/symbols-workflow.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=db59da81ecd4adbbd36baf3409e17c30 1920w, https://sketch-cdn.imgix.net/assets/blog/symbols-workflow.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=4e1f0d09dd273b19f291d90ba02965df 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">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!</p>
<div class="btc-tip">
New to Symbols? Check out our <a href="/blog/create-symbols-sketch/">intro series</a>.
</div>
<p>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.</p>
<h2 id="symbols--color-variables">Symbols 🤝 Color Variables</h2>
<p><a href="/blog/how-to-make-the-most-of-color-variables/">Color Variables</a> 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 <a href="/docs/symbols-and-styles/styling/the-color-popover/">Color Picker</a>.</p>
<p>You can apply Color Variables to any part of a Symbol, whether it’s a <a href="/docs/symbols-and-styles/styling/fills/">fill</a>, <a href="/docs/symbols-and-styles/styling/borders/">border</a>, <a href="/docs/symbols-and-styles/styling/shadows/">shadow</a> or <a href="/docs/designing/text/">text layer</a> within it. This will help you in two ways:</p>
<ol>
<li><strong>Keeping your Symbols updated.</strong> Any changes you make to your Color Variables will automatically sync with your Symbols as well.</li>
<li><strong>Easily override colors.</strong> You can use the <a href="/docs/symbols-and-styles/overrides/#customizing-instances-with-overrides-in-symbols">Overrides Panel</a> to swap between Color Variables, making it easy to switch between your project’s primary colors.</li>
</ol>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktcheu2wEHie1Q"></mave-player>
<figcaption><p>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.</p></figcaption>
</figure>
<h2 id="symbols--styles">Symbols 🤝 Styles</h2>
<p>Similar to Color Variables, with Styles you can store a set of <a href="/docs/symbols-and-styles/text-and-layer-styles/text-styles/">text</a> or <a href="/docs/symbols-and-styles/text-and-layer-styles/layer-styles/">layer styles</a>, 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.</p>
<p>Remember that you can double-click to dive down into Symbol instances and select individual layers within.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktch1JYLJvdqXS"></mave-player>
</figure>
<h2 id="symbols-libraries">Symbols 🤝 Libraries</h2>
<p><a href="/blog/libraries-an-in-depth-look/">Libraries</a> 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 <a href="/blog/introducing-artboard-templates/">Artboard templates</a>. Then, you can sync any changes you make to the source components to any other document using the Library.</p>
<p>So, you can take all the benefits we mentioned before — about combining Symbols with Color Variables and Styles — and multiply them across documents!</p>
<h2 id="symbols-smart-layout">Symbols 🤝 Smart Layout</h2>
<p>With <strong><a href="/docs/designing/smart-layout/#smart-layout-in-symbols">Smart Layout</a></strong>, 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.</p>
<p>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.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktch7qv7KPJEfw"></mave-player>
</figure>
<h2 id="symbols-handoff">Symbols 🤝 Handoff</h2>
<p>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.</p>
<figure class="embed">
<mave-player class="video-player" poster="custom" theme="sketch" embed="sktchwc7jmQ5xAP"></mave-player>
<figcaption><p>Check out our page on [Handoff](/handoff/) to learn more in Sketch</p></figcaption>
</figure>
<p>And there you have it! Did we miss any of your favorite Symbol combinations? Let us know in our <a href="https://forum.sketch.com/c/share-your-knowledge/6">forum</a> 😉</p>
<ul>
<li><a href="https://www.sketch.com/symbols/">Learn more about Symbols</a></li><li><a href="sketch://">Try it out in Sketch</a></li>
</ul>
https://www.sketch.com/blog/an-in-depth-look-at-prototyping-in-sketch/
An in-depth look at Prototyping in Sketch
Learn how to create dynamic prototypes with Overlays and preview them in context using our iOS app2023-06-28T07:00:00+00:00
2023-06-28T07:00:00+00:00
<img alt="Examples of prototyping in Sketch" src="https://sketch-cdn.imgix.net/assets/blog/2023-01/an-in-depth-look-at-prototyping-in-sketch%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=dee804ccd91a9883a17c2e7606393ca8" srcset="https://sketch-cdn.imgix.net/assets/blog/2023-01/an-in-depth-look-at-prototyping-in-sketch%402x.png?ixlib=rb-4.1.0&fit=max&w=360&q=95&auto=format&fm=png&s=1139480d308151c85ecce14e0802e42f 360w, https://sketch-cdn.imgix.net/assets/blog/2023-01/an-in-depth-look-at-prototyping-in-sketch%402x.png?ixlib=rb-4.1.0&fit=max&w=390&q=95&auto=format&fm=png&s=04db4dd2d3e755e30cd7c712626d5100 390w, https://sketch-cdn.imgix.net/assets/blog/2023-01/an-in-depth-look-at-prototyping-in-sketch%402x.png?ixlib=rb-4.1.0&fit=max&w=640&q=95&auto=format&fm=png&s=ee30de6947546cd234d278e49b4fcc0d 640w, https://sketch-cdn.imgix.net/assets/blog/2023-01/an-in-depth-look-at-prototyping-in-sketch%402x.png?ixlib=rb-4.1.0&fit=max&w=768&q=95&auto=format&fm=png&s=4345fab50ca35cd61fe91c5e74962bb2 768w, https://sketch-cdn.imgix.net/assets/blog/2023-01/an-in-depth-look-at-prototyping-in-sketch%402x.png?ixlib=rb-4.1.0&fit=max&w=1024&q=95&auto=format&fm=png&s=6f180a00fc51ca8cd0182c00b65c5a48 1024w, https://sketch-cdn.imgix.net/assets/blog/2023-01/an-in-depth-look-at-prototyping-in-sketch%402x.png?ixlib=rb-4.1.0&fit=max&w=1220&q=95&auto=format&fm=png&s=c4b593a2aa7d12dfcca06b89a4d8917d 1220w, https://sketch-cdn.imgix.net/assets/blog/2023-01/an-in-depth-look-at-prototyping-in-sketch%402x.png?ixlib=rb-4.1.0&fit=max&w=1440&q=95&auto=format&fm=png&s=4f518ba651e13537d7814f908eca116e 1440w, https://sketch-cdn.imgix.net/assets/blog/2023-01/an-in-depth-look-at-prototyping-in-sketch%402x.png?ixlib=rb-4.1.0&fit=max&w=1600&q=95&auto=format&fm=png&s=8d2afa17403817b15c63017078060464 1600w, https://sketch-cdn.imgix.net/assets/blog/2023-01/an-in-depth-look-at-prototyping-in-sketch%402x.png?ixlib=rb-4.1.0&fit=max&w=1920&q=95&auto=format&fm=png&s=dee804ccd91a9883a17c2e7606393ca8 1920w, https://sketch-cdn.imgix.net/assets/blog/2023-01/an-in-depth-look-at-prototyping-in-sketch%402x.png?ixlib=rb-4.1.0&fit=max&w=2400&q=95&auto=format&fm=png&s=b3362bb1bffe66179a30c5ad7f218ac2 2400w" sizes="(min-width: 1024px) 942px, (min-width: 768px) 93vw, (min-width: 640px) 92vw, (min-width: 390px) 89vw, 88vw" width="100%" height="auto" >
<p class="large">In the past, we’ve talked about how to <a href="/blog/prototyping-guide/">get started with prototyping</a>, 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 <a href="/blog/overlays-benefits/">Overlays</a>, and preview them without ever leaving Sketch. We’ll also show you how to test your prototypes in context on an <a href="/blog/iphone-app/">iOS device</a>, so you can get a feel for how it’ll work in the wild.</p>
<p class="large">Let’s get prototyping!</p>
<div class="btc-tip">
Not familiar with prototyping? We answer all your burning questions in <a href="/blog/what-is-a-prototype/">this post</a>.
</div>
<h2 id="getting-started"><strong>Getting started</strong></h2>
<p>To start prototyping in Sketch you’re going to need some Artboards. In this case, it’s easier to work with <a href="/docs/symbols-and-styles/templates/">Artboard Templates</a> 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 <a href="#how-to-create-scrolling-prototypes">later</a>!</p>
<p>You’ll find a whole host of built-in Apple and <a href="/blog/android-app-design/">Android</a> device templates you can use to get started. Just press <kbd>A</kbd> and select them from the dropdown in the Inspector.</p>
<div class="btc-tip">
Not sure how to populate your Artboards? Take a look at these <a href="/blog/wireframe-examples/">wireframe examples</a>.
</div>
<h2 id="how-to-add-interactions"><strong>How to add Interactions</strong></h2>
<p>Once you have your Artboards, it’s time to start linking them. An Interaction or <a href="/docs/prototyping/adding-links/">Link</a> connects a layer to the Artboard you want to transition to — also known as the <a href="/docs/prototyping/adding-links/#how-to-edit-links">Target</a>. That way, if you click on that layer while previewing your prototype, it’ll take you to the destination Artboard.</p>
<p>You can link Artboards by using any of the layers within them. To create an Interaction, select the layer and press <kbd>I</kbd>. You can also head to the <strong>Prototype</strong> tab in the <a href="/docs/interface-and-settings/the-mac-app-interface/the-inspector/">Inspector</a> and click on <strong>Create an Interaction.</strong> 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!</p>
<figure><video title="Video showing how to add links to prototypes in Sketch" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/prototyping-interaction.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/prototyping-interaction.mp4" type="video/mp4" /></video><figcaption><p>To remove an Interaction, simply set its Target to “None” or select the layer and choose <strong>Prototyping > Remove Links from Selection</strong> from the menu.</p></figcaption></figure>
<div class="btc-tip">
<strong>Pro tip:</strong> Not a fan of orange? You can change the color of your Interactions and hotspot layers in the Canvas tab in Preferences.
</div>
<h2 id="customizing-your-interactions">Customizing your interactions</h2>
<p>Once you’ve set your interaction, you can define a transition animation for it. You’ll find several options to choose from in the <strong>Animation</strong> section of the Inspector, though you can also opt for no animation.</p>
<p>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 <a href="/docs/prototyping/using-maintain-scroll-position-after-click/"><strong>Maintain scroll position after click</strong></a> box right underneath the <strong>Animation</strong> section.</p>
<p>At the top of the Inspector, you can also use the <strong>Target</strong> 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.</p>
<figure><video title="Video showing how to add animations to prototype interactions in Sketch" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/prototyping-animation.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/prototyping-animation.mp4" type="video/mp4" /></video><figcaption><p>If you want your layer to remain static, you can check the <strong>Maintain scroll position after click</strong> box right underneath the <strong>Animation</strong> section.</p></figcaption></figure>
<h2 id="hotspots-what-they-are-and-when-to-use-them"><strong>Hotspots: what they are and when to use them</strong></h2>
<p>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.</p>
<p>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 <kbd>H</kbd> to start drawing one right on the Canvas.</p>
<p>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.</p>
<figure><video title="A video showing how to add hotspots to prototypes in Sketch" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/prototyping-hotspot.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/prototyping-hotspot.mp4" type="video/mp4" /></video><figcaption><p>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.</p></figcaption></figure>
<p>Hotspots are extra useful because you can place them inside <a href="/blog/create-symbols-sketch/">Symbols</a> where you can then <a href="/blog/overrides-improvements-v94/">override</a> 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 <a href="/blog/overrides-improvements-v94/#new-overrides-panel-who-dis">overrides panel</a>.</p>
<div class="btc-tip">
<strong>Pro tip:</strong> Your Canvas can get pretty busy with all those Interactions and hotspots. Toggle them on and off using the <kbd>^</kbd><kbd>F</kbd> shortcut or by selecting <strong>View > Show Prototyping</strong> from the menu bar.
</div>
<h2 id="how-to-add-dynamism-with-overlays">How to add dynamism with Overlays</h2>
<p>You can create menus, modals, messages and many other UI elements using <a href="/docs/prototyping/overlays/">Overlays</a>, a special type of Artboard.</p>
<p>To turn an existing Artboard into an overlay, select it, head to the <strong>Prototype</strong> tab of the Inspector and toggle the Artboard type from <strong>Screen</strong> to <strong>Overlay.</strong> 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.</p>
<p>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 <a href="/blog/everything-about-overlays/">comprehensive guide</a>.</p>
<figure><video title="Video showing how to create overlays in Sketch" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/create-an-overlay.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/create-an-overlay.mp4" type="video/mp4" /></video><figcaption><p>Want to learn more about Overlays? Check out our <a href="/s/b44b0744-3029-4ac1-b9f4-e70c4f61baaf">demo document</a>.</p></figcaption></figure>
<h2 id="setting-start-points">Setting Start Points</h2>
<p>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 <strong>Set as Start Point</strong> from the menu. You’ll know it worked when you see a <img class="ui-icon ui-icon--11x11" data-id="flag.filled" src="/images/icons/mac/monochrome/11x11/flag.filled.svg" alt="Start Point" title="Start Point" /> icon appear next to the Artboard’s name.</p>
<p>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.</p>
<div class="btc-tip">
<strong>Note:</strong> For every Start Point you set, Sketch will generate a new prototype in the web app.
</div>
<h2 id="how-to-create-scrolling-prototypes">How to create scrolling prototypes</h2>
<p>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.</p>
<p>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 <strong>Maintain scroll position</strong> box.</p>
<h2 id="preview-your-prototypes-in-sketch"><strong>Preview your prototypes in Sketch</strong></h2>
<p>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 <a href="sketch://">Mac app</a>, the <a href="/c/">web app</a> — where you can share your prototypes with clients and colleagues — or on your iOS devices, using our <a href="https://apps.apple.com/app/sketch-view-and-mirror/id1609224699">iOS app</a>.</p>
<p>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.</p>
<p>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.</p>
<div class="btc-tip">
<strong>Tap targets:</strong> When you click or tap, these indicators will appear in the Preview window wherever you’ve added Interactions and hotspot layers.
</div>
<h2 id="share-your-prototypes"><strong>Share your prototypes</strong></h2>
<p>As well as previewing in Sketch, you can also share your prototypes on the <a href="/c/">web app</a> 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.</p>
<p>You’ll find your prototypes under <strong>Views</strong> in the web app’s right-hand sidebar. And just like any document on your Workspace, you’re <a href="/blog/welcome-to-workspaces-managing-roles-and-permissions/">in control</a> of who can see your prototypes.</p>
<p>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 <a href="/blog/get-started-with-on-canvas-commenting/">comments</a> to let viewers leave feedback on individual Artboards — perfect for collaborating with colleagues or getting feedback from clients.</p>
<figure><video title="Video showing how to share prototypes in the Sketch web app" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/prototyping-share.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/prototyping-share.mp4" type="video/mp4" /></video><figcaption><p>To find more share options, click on the <strong>⋯</strong> in the top nav bar.</p></figcaption></figure>
<h2 id="test-your-ios-designs-in-context"><strong>Test your iOS designs in context</strong></h2>
<p>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 <a href="https://apps.apple.com/en/app/sketch-view-and-mirror/id1609224699">iOS app</a>, 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.</p>
<figure class="no-border"><video title="Video of Joseph prototyping on iPad" muted="" playsinline="" controls="" width="100%" poster="https://cdn.sketch.com/assets/blog/ipad-prototyping.jpg" height="auto"><source src="https://cdn.sketch.com/assets/blog/ipad-prototyping.mp4" type="video/mp4" /></video><figcaption></figcaption></figure>
<p>And there you have it! Hope you’re feeling pumped to get started on your next prototyping project.</p>
<ul>
<li><a href="https://www.sketch.com/blog/learn-design/">Learn more about designing in Sketch</a></li><li><a href="sketch://">Ready to start prototyping? To the Mac app!</a></li>
</ul>