Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'sketch app'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Categories

  • Management
  • Design
  • Requirements
  • Development
  • Test
  • Atlassian

Categories

  • Personal
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-Commerce

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Security
  • E-commerce

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Security
  • E-Commerce
  • Others

Categories

  • Thoughts
  • Debate
  • Health
  • Hobbies

Categories

  • Personligt
    • Åsikter
    • Humor
    • Spel
    • Träning
  • Allmänt
    • Internet
    • Program & tjänster
  • Intressant
    • Prylar
  • Professionellt
    • Management
    • Krav
    • Designs
    • Webbutveckling
    • Test
    • Atlassian
    • säkerhet
    • Förvaltning
    • Ehandel
    • Wordpress
  • Personligt_

Categories

  • Prologue
    • About This Book
  • The Tools
    • Jira Software
    • Confluence
    • Jira Service Management
  • The Inception Phase
    • Portfolio Management
    • Project Management
  • The Design Phase
    • Design as part of the Inception phase
    • Design as part of the Requirement phase
    • Working with design libraries
  • The Requirement Phase
    • Definition of Requirements
    • The four levels of Requirements
  • The Development Phase
    • Atomic design
    • Estimations
  • The Test Phase
    • The Definition of Test
    • Types of Test
  • The Operations Phase
    • Release Management
  • The Post Go-Live Phase
    • Incidents
    • Changes
  • Notes
    • My Muses
    • Research

Categories

  • Theme Building
  • Javascript Framework
  • CSS Framework
  • IPS: Pages
    • Database Templates
    • Block Plugin Templates
    • Page Templates
  • Custom Applications
  • Tips & Tricks

Categories

  • Europe
    • Central Europe
    • Eastern Europe
    • Northern Europe
    • Southeastern Europe
    • Southern Europe
    • Western Europe
  • North America
    • United States of America
    • Canada
    • Mexico
    • Caribbean
    • Central America
  • South America
    • Argentina
    • Bolivia
    • Brazil
    • Chile
    • Colombia
    • Ecuador
    • Falkland Islands
    • Guyana
    • Paraguay
    • Peru
    • Suriname
    • Uruguay
    • Venezuela
  • Africa
    • Northern Africa
    • Central Africa
    • Western Africa
    • Eastern Africa
    • Southern Africa
  • Asia
    • Central Asia
    • East Asia
    • South-Eastern Asia
    • Southern Asia
    • Western Asia
  • Oceania
    • Australia
    • Fiji
    • Kiribati
    • Marshall Islands
    • Micronesia
    • Nauru
    • New Zealand
    • Palau
    • Papua New Guinea
    • Samoa
    • Solomon Islands
    • Tonga
    • Tuvalu
    • Vanuatu

Categories

  • Shared Hosting
  • Virtual Private Server
  • Cloud Hosting
  • Dedicated Hosting
  • Co-Location
  • Hosting Services

Categories

  • Professional
    • Management
    • Design
    • Requirements
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce

Categories

  • Defects
  • Ideas
  • Development
  • ☑ Archive

Categories

  • Professional
  • Management
    • Agile
  • Requirements
  • Design
  • Development
    • Frontend
    • Backend
  • Testing
  • Operations
    • Hosting
  • Atlassian
  • Security
  • E-commerce
    • CRO
    • SEO
  • Interesting

Categories

  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce

Forums

  • General
    • Open Forum
    • Support
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Test / QA
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce
    • Invision Community
  • Jobs
    • Looking for employee / consultant
    • Looking for Job / Assignment
  • Building The Site's Forums
  • Destiny 2's Discussions
  • The Journey's Discussions
  • Cinephilia's Topics
  • Diablo 4's Diablo 4 Topics
  • Shadownessence's Topics
  • sensory hyperreactivity's Topics
  • Wolcen's Wolcen Topics
  • Quality Assurance Heroes's QA Topics
  • Visual Studio Code's Forum
  • Adobe Illustrator's Adobe Illustrator Forum
  • Sketch Guru's's Sketch Topics
  • Requirements & test management in Jira's Topics
  • Microsoft Teams's Microsoft Teams Discussions
  • Figma's Figma Topics
  • Microsoft Planner's Microsoft Planner Topics
  • Psychology's Psychology Topics
  • Microsoft Word's Microsoft Word Topics
  • Microsoft Powerpoint's Microsoft Powerpoint Topics
  • WordPress Devs's Wordpress Topics
  • Ornamental Design's Ornamental Design Topics
  • Adobe Photoshop's Photoshop Discussions
  • Agile 2's Agile 2 Topics
  • Agile 2's Agile 2 Principles
  • Microsoft Outlook's Outlook Topics
  • My Book's Discussions
  • Outriders's Outriders Discussions

Categories

  • Jimi's Files
    • Curriculum vitae
    • Presentations
    • Certificates
  • Management
  • Requirements
  • Design
    • Fonts
  • Code
  • Test
  • Operations
  • Atlassian
    • Certificates of Excellence
  • Security
  • Ecommerce
  • Invision Power Services
    • JWSE Support Tickets
    • JWSE Task Management
  • Shadownessence's Files
  • WordPress Devs's Wordpress Files

Calendars

  • Project: JWSE Workboard
  • Project: JWSE Workboard
  • Community Calendar
  • Professional Events
  • Management Events
  • Requirement Events
  • Design Events
  • Development Events
  • Test Events
  • Atlassian Events
  • Operations Events
  • E-commerce Events
  • Destiny 2's Events
  • The Journey's Events
  • Cinephilia's premieres
  • Diablo 4's Diablo 4 Events
  • Agile 2's Agile 2 Events

Blogs

  • How to start your own blog
  • Sketch Blog
  • Building The Site's Blog
  • Destiny 2's Destiny 2 ramblings
  • The Journey's Stories
  • Diablo 4's Diablo 4 blog
  • Sketch Guru's's Sketch News
  • Requirements & test management in Jira's News
  • Agile 2's Agile 2 Blog

Categories

  • Personal
    • Humor
    • Music
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce
  • Destiny 2's Videos
  • The Journey's Videos
  • Cinephilia's Trailers
  • Diablo 4's Diablo 4 Videos
  • Wolcen's Wolcen Videos
  • Visual Studio Code's Videos
  • Adobe Illustrator's Adobe Illustrator Videos
  • Sketch Guru's's Sketch Videos
  • Requirements & test management in Jira's Videos
  • Microsoft Teams's Microsoft Teams Videos
  • Figma's Figma Videos
  • Microsoft Planner's Microsoft Planner Videos
  • Psychology's Psychology Videos
  • Microsoft Word's Microsoft Word Videos
  • Microsoft Powerpoint's Microsoft Powerpoint Videos
  • WordPress Devs's Wordpress Videos
  • Ornamental Design's Ornamental Design Videos
  • Adobe Photoshop's Photoshop Videos
  • Agile 2's Agile 2 Videos
  • Microsoft Outlook's Outlook Videos
  • Outriders's Outriders Videos

Categories

  • Movies
    • Action Movies
    • Adventure Movies
    • Animated Movies
    • Comedy Movies
    • Crime Movies
    • Drama Movies
    • Fantasy Movies
    • Horror Movies
    • Romance Movies
    • Sci-Fi Movies
    • Thriller Movies
    • Western Movies
  • TV Shows
    • Action TV Shows
    • Adventure TV Shows
    • Animated TV Shows
    • Comedy TV Shows
    • Crime TV Shows
    • Drama TV Shows
    • Fantasy TV Shows
    • Horror TV Shows
    • Romance TV Shows
    • Sci-Fi TV Shows
    • Thriller TV Shows
    • Western TV Shows

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me

Found 13 results

  1. After some time in beta Sketch 69 was released yesterday and it was a great release indeed. We finally got Color variables, which has been much requested. We also got the first taste of the components view which is a more structured way to manage all your assets. Finally we got a new insert window to make adding your assets into a design so very much easier and intuitive. Color variable This is amazing and I like this a lot, espcially combined with the Components view. For people who find it annoying or time consuming to turn your old layers and styles manually, there is a migration tool that you can use. It is called the Color Variables Migrator and it is of curse free to use. Components view This, to me, makes working with assets a whole lot easier. I find that this in combination with the new insert window below make it faster and much more intuitive to work with assets now. Insert Window This makes working with assets a pure pleasure. No more droplists to go through with barely visible icons. Instead we get a big, well organised window that you open when you need it pressing "C" where your assets are easy to find and you add them with drag and drop. I love it. This is one of the best updates this year to Sketch as I see it and I look forward to hearing more on the collaboration features they are working on next.
  2. After some time in beta Sketch 69 was released yesterday and it was a great release indeed. We finally got Color variables, which has been much requested. We also got the first taste of the components view which is a more structured way to manage all your assets. Finally we got a new insert window to make adding your assets into a design so very much easier and intuitive. Color variable This is amazing and I like this a lot, espcially combined with the Components view. For people who find it annoying or time consuming to turn your old layers and styles manually, there is a migration tool that you can use. It is called the Color Variables Migrator and it is of curse free to use. Components view This, to me, makes working with assets a whole lot easier. I find that this in combination with the new insert window below make it faster and much more intuitive to work with assets now. Insert Window This makes working with assets a pure pleasure. No more droplists to go through with barely visible icons. Instead we get a big, well organised window that you open when you need it pressing "C" where your assets are easy to find and you add them with drag and drop. I love it. This is one of the best updates this year to Sketch as I see it and I look forward to hearing more on the collaboration features they are working on next. View full blog article
  3. With this latest Mac app update, we’re introducing three features that we think you’re going to love. First, Color Variables — a long-requested feature and a foundational building block for any design system. Then, a new Components View — a proper home for your document’s local Symbols, Text Styles, Layer Styles and Color Variables. Finally, a new Insert Window that makes finding and inserting Components easier than ever.
  4. At Sketch, we’re proud of our role in helping to grow and define the UI design tools space. And we’re happy to see it flourish and offer so much choice to designers. So now, we want to make sure our community program fully reflects this. 2020 has been a challenge for all of us in many different forms. It’s pushed all of us to think outside of the box and consider different perspectives. Unity, equality and inclusivity were the themes that struck us the most. And with that in mind, we’re proud to announce some important changes to our community outreach efforts, creating something bigger than us that gives back to all designers out there. Starting late September, we are going to introduce changes to how we support design communities. This brand new approach will aim to: Bring inclusivity by removing barriers and embracing competition in the space Promote unity and help connect more designers to more communities Most importantly, reward community leaders for their hard work and efforts, giving back more than ever! In this post, we thought we’d share a brief overview of those changes, what they mean for wider design community and the reasons for our new approach. New support for Sketch Ambassadors We’ve had an Ambassador scheme since 2015, and since then, we’ve supported over 100 design community leaders and organizers on 5 continents. Since the beginning of 2020, we’ve been chatting with every single active Sketch Ambassador to find out how we can better support and give back to their communities. With our new approach, we want to extend our Sketch Ambassador program and establish partnerships with more communities out there. Every organization relies on different tools to carry out their work — including us! The design industry is one of the best examples of this — and we know from talking to our Ambassadors that their communities want to know about all of the tools available to them. It’s time to make sure our Ambassador program reflects this, and acknowledges our friends in the industry. With our new approach, we want to extend our Sketch Ambassador program and establish partnerships with more communities out there. We’ll soon be changing the guidelines for our Ambassadors that require them to focus their events solely on our product. We want to support communities in discussing digital design related topics, regardless of what tools they’re talking about. If you’re a Sketch Ambassador, there’s no need to feel hesitant about relying on a single tool for support. As long as you are there for your community, we would like to be there for you! Community has always been at the heart of everything we do. And we want to be at the hearts of design communities around the world. Going forward, we will be support Ambassadors on a case by case basis with licenses to raffle, official Sketch swag, invitations to feature previews and more. You can head over here to check out the details of this program and become a Sketch Ambassador yourself. Introducing Sketch Advocates As well as updating our Sketch Ambassador program to better reflect our industry, we wanted to offer something extra special to the most dedicated ambassadors. We want to reward their relentless efforts and the way they wave the Sketch flag. So, we’ve decided to launch a brand new role: Sketch Advocates. We know that there are passionate, respected design community leaders out there. They care as much about their craft as they do sharing their knowledge and bringing people together. They enjoy the challenge of building a community and they hold the same values and beliefs as we do at Sketch. These are the people we hope will become Sketch Advocates. The Sketch Advocate role is open to the most valued members of our community. We want to help them in the amazing work they do and empower them as trustworthy design community leaders. We’ll be offering Sketch Advocates a whole package of support — ranging from personalized event materials, to training sessions and speaking opportunities. You can find detailed information on all of the perks, as well as eligibility requirements, here. We’re setting a high bar for the role of Sketch Advocate — to become one, you’ll need to be both a true leader in your local design community and incredibly passionate about Sketch. For the initial launch of the role, we will be limiting Sketch Advocates to one per country and 20 in total, aiming for an even geographic distribution. Over time, we’ll continue to bring on more Advocates, but we want to make sure we can support everyone in the best way possible. If you think you have what it takes, apply through our form! Moving forward, together and stronger With these updates, we’re excited to be supporting more digital design communities out there, regardless of their tool preferences. Letting community leaders take the charge when it comes to topics, visuals and naming, we want to be more welcoming than ever. On the other hand, the new Sketch Advocate role rewards design community leaders who are truly passionate about Sketch, and have supported us and their communities on a higher level. We think this new approach treats all efforts fairly and allows more freedom and support for the communities that have made Sketch what is is today. We can’t wait to explore these brand new horizons with you! Find out more about the Sketch Advocates programFind out more about the Sketch Ambassador programUpcoming Events View the full article
  5. Sketch is 10! And to celebrate this pretty big anniversary, we’re putting together a series of blog posts looking back over the last decade and discussing the biggest trends, changes and developments — across both Sketch’s own history, and the design community as a whole. To kick things off, we sat down with Emanuel Sá, Sketch’s co-founder and Chief Design Officer, to talk all things design over the last 10 years. Okay, so let’s start at the beginning — how did you personally start with design, and what was the landscape like back then? I had a background in photography, so I was quite familiar with Photoshop. But I was never satisfied with default stuff — give me a default OS and I’ll just change everything. I just don’t accept the status quo when it comes to visuals (laughs). So I started playing in Photoshop, and I soon understood: this is more than a photo editor, there are tools here that I can benefit from if I want to change other stuff. Eventually I got into iconography. It was interesting for me, because I could change everything on the user interface, but finding replacement icons that I liked wasn’t so easy. I pretty much had an idea of what I wanted, so I thought I might as well do it myself. Soon I moved on to designing themes for the Mac, and I would say that our MacThemes.net community from ten years ago has easily been the biggest influence on interface design in the last decade. Pretty much every single user in that forum has been a designer or leader on the most successful products of the last few years. I remember at the time that Chris [Downer, Sketch’s Product Owner] was, like, 17? Janik [Baumgartner, a designer at Sketch] was about 15, and he was already designing. I would say that our MacThemes.net community from ten years ago has easily been the biggest influence on design in the last decade. Pretty much every single user in that forum has been a design leader somewhere in a big company. Back then we were just doing fun stuff. But eventually the iPhone came out. Suddenly everyone got interested in doing apps for iOS, and they needed someone to help them with design. Where did they look? The MacThemes community. I would say there were five or six of us taking on the majority of the iOS landscape when it came to interface design and iconography back then. It was interesting because in the first two years it was basically accountants, lawyers, doctors, all wanting to make an app. They’d say, “I want a contacts app, but make it a spinning wheel. You know, like the one on Wheel of Fortune? I want one like that”. We’d say, “that’s not interface design, that’s illustration.” But back then it was huge, they wanted all those details — what we call skeuomorphism. They basically wanted to cram everything that was real into a screen. Sure, this was when skeuomorphism was at the peak of popularity. Do you think that came from a misunderstanding of what skeuomorphic design was meant to be? Yeah. For some reason it was very interesting to people — minimizing huge things into very tiny spaces, often with odd perspectives. For a while, it was ‘the thing’, and to be honest I didn’t like it much. I definitely specialized in realistic designs, but I wasn’t a big fan of that particular sub-style, which then became a trend. I already had a very strong concept of trends, though, and I knew that was what people wanted at the time. So I figured I might as well get good at it if I wanted to keep freelancing. Emanuel opened up his archives after we chatted and found some old, unreleased icons — like this notes folder from around 2010. But the change to flat design in 2014? Honestly, that’s normal. Design trends are a loop. If you go back and study interface design from the 70s and 80s — and people need to understand there were interfaces back then as well, they just weren’t on devices that were accessible to the general public — it was exactly the same thing. IBM, Xerox, even Apple, they all had interfaces that went through this rotation of styles. Nowadays it’s Apple who sets the tone, and sometimes Google. That’s the way it is, and that’s fine. Flat is going to return again in eight or nine years, and we’ll be there to bring the best out of it. And I’m glad, because without change it gets boring. People need change. And we want people to keep wanting to change stuff — otherwise they don’t need Sketch. So that’s fine. As you say, skeuomorphism was a big part of the last decade — and that you learned a lot working in skeuomorphic design. How sad were you to see it go? Not sad at all. That’s really interesting, because it was your wheelhouse, it was your area of expertise, right? Yes, and it still is my comfortable zone. It’s where I know my work is going to be more consistent, at least. But I like a challenge. For me, if this is the language I need to speak, I will learn it. One thing that I said all the time is that I’m not an artist. I’m more of a visual engineer than an artist. I have rules to follow and I have to execute something useable. We should be creative, but mostly we should be mindful of constraints — and respect the interface guidelines we’re provided. I don’t have the freedom of an artist when it comes to designing software. So from that point of view, if skeuomorphism is what I must work with, that’s what I work with. If flat is what I need to work with, I will work with flat. A designer in the interface space is an engineer. And that’s great! It feels like Sketch was perfectly timed, just as the trend started skewing back toward flat. Do you think Sketch helped the flat design movement pick up faster? Oh yes, 100% sure. Because back then design was a closed group. It was meant for the chosen ones. The ones that were able to put up with Photoshop, and very specific tools that were not meant for design. Back then, Photoshop wasn’t a focused tool and it wanted to appear ‘only for professionals’. We wanted to take that feeling away with Sketch. It had to work for everyone. Back then, Photoshop wasn’t a focused tool and it wanted to appear ‘only for professionals’. We wanted to take that feeling away with Sketch. It had to work for everyone. Sketch totally changed the software approach — the approach to what an application should be for a user. And not just for designers, but on every single aspect. You should make your most important features the simplest and most obvious in your workflow. Back then, not many applications had that goal. I can only name a few, and most of them were from Panic. You can still see plenty of echoes of the first Sketch UI in today’s releases, 10 years later. Sketch also appeared around the time that Dribbble and Instagram launched. Do you think those communities helped spread the word as well? Was that a lucky break? Yeah, I think the community — around Dribbble, the App Stores, and all that — all kickstarted that movement. And that’s amazing. I’m really thankful for that. We were able to expose an application to the masses, and Dribbble was able to expose design to the masses. Like I said, back then it was a ‘closed’ group of talented designers on a forum with limited visibility. Dribbble basically took that away — and then took over (laughs). It started as a gated community, but fortunately it soon opened up, it started to expose amazing new talents, and it was great. We were able to expose an application to the masses, and Dribbble was able to expose good design to the masses. A lot of kids today who are excellent designers looked at people on Dribbble and wanted to be like them, because they could finally see that work in the public space. I mean, dude, we would release an icon set in the forums, and keep the icon set to ourselves — we wouldn’t share it with the world. It was the famous days of ‘not for release’ work. And that was very, very stupid (laughs). Dribbble took that away from everyone. So there were 10 designers in the market one year, and the next year there were 100. Now there are millions of designers, and that’s great. And it’s also more customers for us (laughs). I know you don’t miss designing in skeuomorphic style, but are there any icons — things like drives and stuff — that you miss? Oh yeah, those I do miss. That was interesting because those were very personal, you know? Those designs were personal for me. I remember doing some stuff that was not useable by today’s standards, but it was great to look at it. I remember spending nights making them. Emanuel would design whole icon and folder sets to customize everything on his Mac, like this one from 2011. I look at some of your old work on Dribbble and I just really miss this kind of stuff. I do too! Because a system can work and still feel personal. It doesn’t have to be standardized for everyone. If you look at my folders, they’re custom (often the Ciment set, by Laurent Baumann). If you look at my disk drives, they’re custom (Anstat, by Philip Antoni). I still feel the need to do these little things. I don’t know, it feels like mine, and it’s not so boring when I’m working. It doesn’t feel like I’m having a conversation with a machine, it feels like something more alive. Icons, for me, give me that. If you look at my folders, they’re custom. If you look at my disk drives, they’re custom. I still feel the need to do these little things. It doesn’t feel like I’m having a conversation with a machine, it feels like something more alive. Do you think that icons have lost some personality in the move to flat? Oh for sure. Icons nowadays aren’t icons — they’re brand extensions. It’s that simple. And that sucks. But at the same time, our icon is a little bit of a brand extension. But I still think we managed to keep some personality. We did flatten it, but in a good way I think. At the same time we made an effort to make the diamond icon our brand — and what a brand it became! So let’s talk about the Sketch icon. Yeah, that’s a really interesting story. The diamond was never designed for Sketch to begin with. It was designed for another app that Pieter and I were developing, where you dropped images and they would resize them in batches, or apply a border in batches, stuff like that. After a few weeks of work, we realized the app was unnecessary. A year later we were working on Sketch and we needed an icon. I’d made the “hand grenade” (see the Sketch icon evolution animation below), and I didn’t like it, and Pieter didn’t like it either. I reminded Pieter about the diamond, because it was beautiful and I’d loved doing it. We knew it had nothing to do with Sketch, but we thought “why not?” And that was it. I wanted something very shiny and unique, that people could look at and think “I don’t know what this application does, but its icon is interesting, so I’ll click on it,” you know? The original diamond — before it became Sketch’s icon — was blue. I wanted something very shiny and unique, that people could look at and think “I don’t know what this application does, but its icon is interesting, so I’ll click on it,” you know? And the Dock was beautiful back then. I don’t miss skeuomorphism when it comes to interfaces, but I do like a more dimensional Dock. It was beautiful, and at times there was art all over the place. I still have the Panic truck on my desktop right now. I don’t even use Transmit, man. I just like looking at it! (laughs) It’s that simple. It makes me happy to see that truck there, go figure. Emanuel designed a range of different color options, thinking that each release may use a different color icon. In the end, after a couple of changes, we settled on our current color. That old 3D Dock was great, I miss that thing. The Dock had a lot of non-shiny elements and I was like, “what’s bright, what reflects?” I always loved to play with reflections. Before that I’d worked on a folder set and everything was reflective. Talking of changing macOS designs, Big Sur feels like it’s starting to shift back away from flat design back towards skeuomorphism slightly. What do you think of that? I don’t think it looks or works great right now — but they’re going to fix it, and it’s going to be nice. It is more skeuomorphic, though, and that’s nice. It’s an improvement over what skeuomorphic design was on macOS 10.9. It’s definitely an improvement — I like it, it’s full of good ideas. The Sketch icon has come a long way in the last 10 years — and it’ll be going even further soon. It’s not about imitating a real interface, and more about depth. And I like that, I think that’s a good implementation. It’s like iOS. iOS 7 wasn’t great, but by iOS 10 it was excellent. It was well done, and well executed. It was flat, but it was well done. But for me, it’s not a new design language. It’s an evolution, and definitely a new standard. And that’s great — we’re going to follow, and improve on it. And they are going to copy us again (laughs). This is the first post in our anniversary series looking back over the last 10 years of Sketch. You can expect more memories, highlights and interviews in the coming months. What version of Sketch was your first, and what are your memories of working with it? Let us know on our social channels. Share your Sketch memories View the full article
  6. “Our goal is to make art more accessible to all while championing illustrators and the importance of art in digital experiences,” explains Pablo Stanley from his San Francisco studio. We’re chatting with him — remotely, of course — about Blush, a new plugin that brings inclusive, custom illustrations into your Sketch designs. Pablo has been a big name in the design world for a while now, working hard to help others get the most out of Sketch. He became a Sketch Ambassador in 2016, and since then he’s created inclusive illustration Libraries for everyone to use in Sketch — Avataaars and Humaaans. “With the power of Sketch Libraries and Symbols, all the components in each illustration were editable, so it was super fun and easy for designers to make their compositions,” he explains. He’s used that experience to co-found Blush, which combines his own illustrations with work from other artists, and brings in more complex systems for people to use across their designs. But despite officially being Blush’s CEO, he prefers to be called, simply, a ‘Doodler’. “To be honest, the term ‘CEO’ makes me feel a bit self-conscious, like I’m above others. We’re really a collaborative team that makes decisions as a group,” he says. “I’ve been a massive fan of Sketch plugins since day one — they amplify the things you can do as a designer, and you get to choose the superpowers that you want in your arsenal. The community has done a fantastic job, so we wanted to contribute with our own plugin.” With Blush’s new Sketch plugin, Pablo and the rest of the team are continuing his mission to make art more accessible, and giving everyone a simple way to add beautiful illustrations to Sketch designs. “Blush is a tool that brings illustrations from artists around the world to everyone,” he explains. “The cool thing is that you can customize every piece of a doodle to create your own compositions!” As a result, you’ll always be able to find something that fits your design — and suits your audience. So everyone feels welcome. “Inclusion is embedded in Blush,” Pablo explains. “The illustrators who’ve created collections have made sure to include people with different backgrounds, abilities, and beliefs in their illustrations. So people can tell their stories with doodles that represent them or their audience.” To help with that goal, the plugin randomizes the components of your illustration when you create one from scratch, so you won’t ever see the same one twice. “We believe that this can help us avoid unconscious biases we might have when creating a character,” says Pablo. “You can still change any element to your liking — things like the hairstyle, upper body, lower body, skin color, and accessories.” Illustrations by Irene Falgueras The power of personalization Blush started life as a web app — which is still available, and great if you just want to grab a quick image while you experiment with your initial design ideas. But by building a native Sketch plugin, the Blush team have made it easier to browse and customize doodles right next to the Canvas and in the context of your designs. “Imagine improving your UI with pictures, creating a banner for your blog posts, bringing some flair to your slides, and adding some visuals to your graphs!” says Pablo. It’s as simple as opening the plugin, selecting a collection, choosing a picture, and customizing it to your liking. “The cool thing is that you can close your Sketch file, return the next day, and if you want to make an edit to your illustration, just open the plugin again, and you can keep editing!” Best of all, all the artwork has a worry-free license, so you can use it for personal or commercial purposes at no extra cost. It all comes back to the team’s desire to give more people access to great artwork for their designs. “We want to give everyone the ability to bring doodles into their creations,” Pablo enthuses. “We see every screen as a canvas waiting for you to turn it into something beautiful.” The result of their mission? Anyone can mix and match artwork from illustrators across the globe, without needing to worry about finding somewhere to put attribution — unless you want to, of course. For designers looking for even more control over the illustrations, there’s also a paid tier that gives you SVG versions (“the power of vectors!”), print-resolution PNGs and other advanced features. “Having SVGs gives you control over every layer of the doodle, which is perfect for creating custom artwork, changing specific colors, or making animations,” he says. Illustrations by Mariana Gonzalez And for Blush, this is just the start. “I can’t wait for people to see what we’ve got,” says Pablo. “Some of the new stuff we’re adding includes icons, individual illustration elements (rather than just compositions), and 3D objects.” The team has plans to add animation in future, too. “It’ll allow people to first mockup their design on Sketch, and export a Lottie file or MP4 that they can use in the implementation.” Giving something back Pablo’s previous projects — Humaaans, Peeps and more — have taken the form of Sketch Libraries, with multiple overrides for each illustration. The Blush plugin was a chance to bring them together in one place. Best of all, it was an opportunity for Pablo to give back to our community by making it easier for everyone to get beautiful custom artwork. “I’ve been a massive fan of Sketch plugins since day one — they amplify the things you can do as a designer, and you get to choose the superpowers that you want in your arsenal,” says Pablo. “The community has done a fantastic job, so we wanted to contribute with our own plugin.” But beyond giving something back, Pablo‘s passion for great artwork was a driving force for Blush. “We’ve had the chance to collaborate with illustrators we admire to create some stunning collections for our users,” he smiles. “You’ll find illustrations on everything from people, plants, and food to cityscapes and abstract art. “I feel lucky to be able to collaborate with such talented artists. Their work is the lifeblood of Blush. They have put so much love and care into every little pixel, every vector, and each brushstroke. It’s a gift for every creator who wants to tell their stories with doodles.” You can download the Blush plugin from the Blush website, or create your own custom illustrations using the web app. Header image illustrations by Vijay Verma. Download the Blush PluginCheck out the web appTell us what you think View the full article
  7. We often talk about how our community makes Sketch better. Whether you’re a daily user submitting feature requests that help us make the Mac app even more powerful, or a developer building incredible extensions that improve things for everyone, it all makes a difference. So when we launched Assistants in version 68 with our community in mind, we knew you would support our vision for better design. We weren’t disappointed. Here, we’ve pulled together five of our favorite Assistants from the Sketch community — you can download them directly from this page, or find out more about them in our Assistants directory. Don’t forget, with some JavaScript knowledge (or a frontend developer friend to team up with) you can also build your own Assistant that does exactly what you need. Find our more in our announcement post. For now, let’s take a look at some Assistants. Accessibility By Yana Gevorgyan Accessibility, from Cluse creator Yana Gevorgyan, has a set of rules that help you create more accessible designs. It’ll help you spot color contrast issues between shapes as well as text layers, so you can make everything easier to understand for the visually impaired. Pair it with the Cluse plugin and you’ll be able to easily correct everything using a simple, slick interface. Organizer By Todor Iliev with Dimitriy Bunin and Roman Banks When you’re into the flow of designing, it’s easy to forget to delete empty groups, follow naming conventions or remove forgotten fills, shadows and borders. But for many design systems and workflows, keeping your files organized is essential. That’s why Organizer from Slice is so useful. It’ll help you keep your files neat and tidy with prompts to reorganize the elements you need — and remove the ones you don’t. Artboard Status & Navigator By Francesco Bertocci Artboard Status & Navigator (from Sketch Ambassador and Design Advocate Francesco Bertocci) gives you a quick and easy way to organize your artboards and navigate to them fast using Assistant rules. Simply add an emoji to your Artboard name to show whether it’s work in progress, approved, ready for sign-off or ready for handoff, and the Assistant will gather them into categories for fast access. You can add custom strings to suit your own needs, too. Perfect for when your projects grow and the Layer List starts filling up. Duplicates By oodesign Nobody likes clutter. Duplicates fulfills a simple task that’s easy to forget when you’re finished with a design — reminding you to remove duplicate Symbols, Text Styles and Layer Styles. It’s a quick way to tidy up your document before review or handoff, and acts as a handy reminder to keep your document streamlined. Sketch2React Conventions By The Sketch2React team For designers that use Sketch2React’s framework, this Sketch2React Assistant is a must. It includes rules to help you stick to the framework, including page names, Artboard names, group names and more. This one is a specific use case, but it’ll be a huge help for those that need to stick carefully to Sketch2React’s conventions — and saves you manually checking everything before you’re finished. This is just a selection of the Assistants available right now — and there are more going live all the time. Keep an eye on our directory for more in the future. And if we missed an Assistant you love, let us know. Find more AssistantsShare your favorite Assistants View the full article
  8. While Sketch is a powerful tool for designing user interfaces, we’re always amazed by the different uses people find for it. So when we saw a Reddit post about King Rabbit — a game designed entirely in the Mac app — we were intrigued. To find out more about the creation process for King Rabbit, we spoke to Brian Oppenlander, co-founder of RareSloth and designer on the title. Here’s the story of how he came to use Sketch to create every asset in the game. Can you tell us a bit about your design history? I have an MS in human-computer interaction & design from Indiana University, and after I graduated I worked for two years as an interaction designer on the user experience team at a massive healthcare software company. I never really envisioned myself making games. I made a friend, Austin, who’s a programmer — and he later became my business partner. We decided to make a mobile game, and it took us a year to complete it. After that we started on another game and eventually planned the transition to bootstrapping RareSloth and making games full-time. At the healthcare software company we used Adobe Fireworks and then later transitioned to using Sketch. So I have at least five years of experience using Sketch for UI design and games. It’s fair to say that the majority of game designers don’t use Sketch to create their assets. What made you choose Sketch as your tool? Using Sketch is definitely unconventional! I’ve never met another person using Sketch for game development. But as you can see, it can be done — and I’m still enjoying it! For my first game I used Photoshop and a tablet to paint all the assets. That’s definitely more of a ‘normal’ tool for game art. But I still don’t consider myself a very good illustrator or painter, so I’m a lot more comfortable creating minimal vector art. Sketch was flexible enough for me to create my own ‘Character Creator’ system using Symbols. On our second game I wanted to use a simple art style so I could be more consistent, faster, and be able to work more within my abilities. I started by making vector art with Illustrator, but then transitioned to Sketch. For puzzle games like King Rabbit, I think it’s imperative to make the art very clean and readable. A heavily-stylized puzzle game can quickly become visually distracting, which takes away from the puzzle experience and can potentially become overwhelming or frustrating. How did the process of designing in Sketch compare to using Illustrator, which you used for previous games? Illustrator felt bloated, and the exporting process was convoluted and slow, which was a huge pain point for me. We have to export assets very frequently. Artboard and export management is superior in Sketch — it’s really important to be able to manage and export assets quickly and efficiently. Illustrator would also crash randomly, which I have rarely experienced with Sketch. I found the asset management and export flow with Sketch to be far better than Adobe’s products. Sketch always felt so much lighter to work with, and that made work so much more enjoyable and efficient. Having the whole art pipeline contained within Sketch really streamlined things. There was less context-switching, and less time fumbling with multiple programs. How simple was it to translate your Sketch designs into a working game? I think Sketch can be a great solution for 2D games. It was flexible enough for me to create my own ‘Character Creator’ system using Symbols. These individual body part pieces are Symbols that show a preview of the character in all the different perspectives that our game supports. In our case we wanted to create a lot of skins for King Rabbit, so we needed to re-use the animations. By using a template and previewing within Sketch, we can make sure everything already lines up perfectly before we export it to the animation software. In fact we don’t even have to open our animation software anymore — if the skin looks good in Sketch, it’s production ready. Naming the Artboards with the export path makes it really quick to update assets in the game project. I also created a tileset creator system. Tilesets are a common requirement for top-down 2D games like King Rabbit. It was easy to set up a tileset template in Sketch that also shows a real-time preview to ensure everything is pixel perfect. We use our tileset template for the grounds, walls and paths. You can also use Sketch to design and preview your own repeating textures using a 9x9 grid of symbols. Here’s an example of a texture used for a dirt/stone wall. While there may be other tools that can do these things, having the whole art pipeline contained within one piece of software really streamlined things. There was less context-switching, and less time fumbling with multiple programs. Having everything (Colors, Styles, Symbols, UI elements and so on) in one place is so convenient. And did you hit any issues? How did you overcome them? When files started getting big with lots of Symbols, things started to slow down a little. I think this was caused by using a ton of Symbols, and this seems to have been improved with Sketch 67. To overcome the issue and reduce memory demands, I split assets up into separate pages or files — UI, characters, tilesets, items, and so on. What are your plans for the future of King Rabbit (and RareSloth)? Will Sketch be a part of them? Big plans! King Rabbit is a community-driven experience, where you can participate in shaping the experience for other players. Our players have built roughly 150,000 King Rabbit levels already, providing an almost infinite stream of content for free. In the next major update we’ll be adding the Rabbit Market, which lets players buy and sell rabbits directly from other players. Our skins are different from most games because they are limited to 100! We think making skins scarce is good for players because they retain their value. If you get tired of a skin, you can sell it for premium currency and buy a new one. This creates a dynamic end-game experience where players can compete to collect rabbits and show off their collection. Flipping rabbits for a profit is another meta-game for players to participate in. It will be interesting to see how it plays out. We don’t even have to open our animation software anymore — if the skin looks good in Sketch, it’s production ready. Another thing we’re testing is letting designers and artists submit their own vector assets using Sketch. For example you could create a custom rabbit skin or tileset. Not only will designers get compensation for their contributions, they’ll also get recognition from the community. If designers are interested, they can sign up on our website to get the character and tileset templates, which they can also use for their own projects. We do plan on making more games, but we want King Rabbit to continue to be a living game that we’re always improving and adding new content to. It’s a sandbox experience with a lot of potential to scale and evolve. Personally, I plan to continue using Sketch for our games. We have a nice library of assets that can be re-used or repurposed for future games, which will really help speed up development time. Do you have any tricks or advice that you’d share with other designers considering using Sketch to design a game? Start small and iterate! Scope is a skill to manage… I follow an expansion and contraction process. In the expansion stage, you allow yourself to be loose and creative. It’s usually a little chaotic. Then in contraction, you go back and get organized again, tighten things up. Repeat. If you’re always in a contraction mode, you might be over optimizing and being too much of a perfectionist. There’s a lot of pressure on designers to create pixel-perfect work. Over optimization is a trap I fell into with some of the game art — trying to make everything pixel perfect and consistent can really slow you down and limit you. This depends on what kind of work you’re doing and your constraints, of course. I think one of the traps indie game devs fall into is going too high-fidelity, to the point where everything takes too long and the game never gets finished. It’s important to be efficient with time, and Sketch helped me keep things simple. You can download King Rabbit for free on iOS, Android and Steam to see the #MadeWithSketch artwork in all its animated, interactive glory. It’s great fun. Have you used Sketch to draw detailed architectural blueprints? To create an animated cartoon series? Or something even more impressive? Let us know on Twitter — we’d love to tell your story. Find out more about King RabbitTell us about your #MadeWithSketch project View the full article
  9. Sketch 68 is out now. With this latest Mac app release, we’re introducing Assistants — a helping hand for your designs. Assistants can help you spot issues with your documents, stay consistent with design systems and prepare your files for collaboration. This release also adds the option to create, rename and delete Cloud projects from the sidebar in the Documents window. And, as ever, we’ve included a round of bug fixes based on your feedback. Open the Mac app and updateRead more about AssistantsDocumentationRelease notes View the full article
  10. When you work as part of a design team, it’s a challenge to keep everyone’s work consistent. Making sure people are using components from your design system, organizing documents properly, and completing important steps like meeting accessibility guidelines can be tough. Regular design reviews can help everyone stay on track, but it’s easy to get sidetracked by conversations about naming conventions and whether you’re using the right shade of blue. That can take focus away from the bigger picture. And that’s where Assistants can help. Assistants can automatically check your designs against rules for things like branding, accessibility, document organization and design systems usage. So you can quickly fix smaller issues and spend more time exploring new design solutions or ideas that will have a bigger impact. Before we explain how they work, let’s talk a little bit about our process for creating Assistants — and how they’ll help you focus on doing even better work. Creating your new digital team member We know from experience that design reviews can be incredibly useful — but they can also easily get bogged down in details. Life is too short to spend it searching for a group named Submit Button (Copy) to turn it into a Symbol. We knew there was a better way. So, we drew inspiration from a development tool known as code linting. In its simplest form, code linting is like a spelling and grammar check — but for code. You write some code and the linter checks it for obvious errors and issues with styling. We like to think of Assistants as the design equivalent of code linting. They automatically look for specific issues in your document and flag them, so you can easily find and fix them. “We all make mistakes and miss small details here and there — it sure is great to catch them before handoff!” Anthony Collurafici, Sketch plugin maker and principle product designer at Alarm.com. There’s an Assistant for that Different Assistants serve different purposes, and you can add as many as you want to your documents. You might have one for a brand style guide, one to check accessibility, and another for general file organization, for example. It’s easy to find and install the ones you need — you can add them with one-click from our Assistants directory. When you share your document with others, they’ll be prompted to install the Assistants it uses. And the Assistants directory isn’t the only way to add them — you can also add an Assistant from a URL or from a file on your Mac. These options are especially handy for teams who want to share Assistants privately. Once you’ve added the Assistants you want to use, they’ll check your document and show you any issues they’ve found. It’s easy to ignore rules when you’re just experimenting or working on rough ideas, too. To show you more about how they work, we’ve put together this short video: Built by us, made by you There are plenty of Assistants you can use to get started, but with some JavaScript knowledge (or a frontend developer friend to team up with) you can also build something custom to suit your team’s needs. Whether you’re a small studio or a growing organization, the possibilities are endless. “The Assistants development environment is a delight! I managed to setup our template Assistant in five minutes — including getting coffee.” Fredrik Ward, Sketch2React Once you’ve created an Assistant of your own, it’s simple to share it internally with your team — or add it to our public page if you think others in the community might find it useful. Take a look at our developer documentation for a full guide to creating your own Assistants. Finally — if you want to check a document with Assistants outside of Sketch, go right ahead. You can run them right from the command line — and even add them to your Continuous Integration (CI) workflows — making them perfectly scalable for larger teams and organizations. “The way you designed Assistants is on the edge of both the design and development worlds. And that’s great! To me it feels though as if these worlds are still kept separate, but Assistants has the power to unite them more.” Micha Wiebe, Sketch Wiki Our thinking for Assistants started with a desire to make design reviews more effective, but the benefits are much bigger. Ultimately, it’s about making collaboration easier and creating a smoother design process for teams. The reaction to Assistants during our beta and testing phases has been great, and plenty of teams are already working on their own. Now we can’t wait to see how the wider design community will adopt them. Assistants is available now in version 68 of the Mac app. If you’re ready to get a helping hand with your designs, take a look at our Assistants page and add the ones you need with a click. Open the Mac app and updateVisit the Assistants directoryRelease notesDocumentation View the full article
  11. When we post about new Sketch releases, we usually talk about the big new features — things like prototyping or performance upgrades. But sometimes, that means the smaller details can get overlooked. Over the years, we’ve added all kinds of neat little tricks to the Mac app to make it easier and more intuitive to use. So now we thought it was time to pull out a few of the best. Whether you’re a newcomer or a seasoned pro, we hope there’s something in here that surprises you. 1. Drag to delete Styles Let’s start with a quick, simple trick. If you want to remove a Style property (like a blur or a fill), you can simply drag and drop it out of the Inspector panel. It’s not the most revolutionary thing in the world, but it’s a time-saver. Also, that little ‘whoosh’ is far more satisfying than just unchecking it and clicking the trash icon. 2. Resize layers with the arrow keys When it comes to design, every pixel counts. And when you’re adjusting fine details in your project, clicking and dragging a layer with your mouse can be really disruptive — and imprecise — when you want to make only tiny changes. So why not just resize the layer using a keyboard command? ⌘ arrow keys Expand or contract by 1px ⇧ ⌘ arrow keys Expand or contract by 10px These commands are life-savers when you’re making final edits to a project and want to make sure every layer is perfectly sized. 3. Customize your preferences So now we know that using Cmd and the arrow keys lets you resize layers. And of course, you can hit an arrow key on its own to move a layer 1px, or hold Shift to move it 10px. Simple. But did you know that you can also customize these nudge distances by changing your nudging settings? Head to Sketch › Preferences, then choose the Canvas tab. There, you can adjust how far your layer moves when pressing the arrow key. This can be particularly helpful if you’re working with a grid system, as you can set your distances to perfectly match your layout. No more constant nudging — just a single press and your layer is exactly where you need it to be. Here’s another handy Preferences tip if you find yourself duplicating a lot of content. In the Layers tab, you can disable the option to offset duplicated layers (so they’ll appear directly over the original). You can also disable the automatic renaming of the layer — so your duplicate will be named the same as the original. This one won’t apply to everyone, but it’s handy to know. 4. Update opacity and gradients with the keyboard We know that sometimes, you need more precision than you can get using your mouse. It can take a lot of fine movements to find exactly the setting you want for things like layer opacity. So we made it easier to be precise. Rather than clicking and dragging (and undoubtably landing on some random percentage), you can simply select the layer, then type the percentage opacity you want. You don’t need to click anywhere — just type. Single numbers will set a rounded percentage value (e.g. type 5 to get 50% opacity), while typing two numbers gives you more precision. Hit 0 to return to 100%. The number keys are also handy when you want to apply a gradient to an object. You can place gradient points at different intervals with the 0-9 keys to give you a more precise gradient layout. And if you want to add a gradient point exactly between two other points, you can just hit =. 5. Rasterize layers faster If you’re bringing assets from Sketch into another application, this could be a game-changer. Exporting complex groups of layers into different apps at the right size and with the right name can be time-consuming. One option is to export the asset, then re-import it as one flat image. But there’s a much faster way to do this. We’ll leave it to our friend Joseph to explain: By making your asset exportable and giving it the right filename suffix, you can drag the layer onto the Canvas (while holding the Option key) to place a bitmap image version into your design. In doing that, you’ll get a flat bitmap, at the right resolution, with the right name, in seconds. 6. Right click › Replace With This one can be a huge time-saver when making changes to layers in your design. If there’s a Symbol in your project that you’d like to swap out, simply right-click on it and hover over Replace With. The menu will show you all the Symbols in your document and you can choose the one you want with a click. 7. Customize your toolbar We set up the Sketch toolbar to put the most commonly used tools within easy reach. For beginners, especially, this makes it even easier to get to know the app. But we know that once you’re more comfortable in Sketch, you may find you’re using some tools much more than others — and you’d prefer easy to access to them from the toolbar. The good news is, that’s totally possible. Right-click on the toolbar and select Customize Toolbar… The menu will let you drag and drop tools in and out of the toolbar, so you can create your perfect Sketch setup, with only the tools you need. 8. Use math in the Inspector Our Inspector is smarter than you might think. You probably know you can adjust the size of a layer by typing its dimensions into the Inspector. But did you know you can also use math to resize those layers based on the dimensions that you’ve already set? That means that if you need to double the size of a layer, you can simply add *2 to the end of the current dimensions — and the Inspector is smart enough multiply the size by two. You can also use letters after these values to tell Sketch which edge of the shape to expand from when setting dimensions. For example, if you wanted to expand downwards from the top, you could type *2t. To expand left from the right-hand edge, you could write *2r . The same trick applies for adding (e.g. 50+10), subtracting (e.g. 50-5), and dividing (e.g. 50/2). You can use it to calculate circles, too — trying using pi in your calculations, for example. You can even type a percentage in the size fields to reize the layer relative to the Artboard it is on (e.g. 100% makes the layer width the same as the Artboard) or relative to the largest item of the group it is in. Say goodbye to doing mental calculations and let Sketch do the hard work for you. Who became a designer to do math, anyway? 9. Read the documentation We promise the people who wrote the documentation didn’t make us put this here. But our docs do contain a goldmine of cool tricks and shortcuts for Sketch — so you’ll definitely want to give them a read. How else would you know that you can swap an image for another one after you’ve already styled the layer? Or reduce an image’s size inside Sketch, without having to leave the app? Or select multiple layers simply by holding down the Shift key? You get the point. Did we miss a handy trick that you use every day? Let us know on Twitter. And for more timesaving tips, take a look at our guide to the essential Sketch keyboard shortcuts, too. Tell us your own tips and tricksRead our documentation View the full article
  12. Putting people are the heart of your projects can help users connect with your designs. But a lot of the time, the visuals we encounter both online and in the physical world simply don’t reflect the reality of the world around us. Often, that means you’ll see icons, illustrations, and avatars primarily featuring able-bodied white people. Representation matters. And here at Sketch, we want to help you create inclusive designs that are accessible to everyone. So we’ve gathered together some awesome resources you can use to make sure your projects are as diverse as the world around us. Black Illustrations Created by designer John D. Saunders, Black Illustrations is a series of digital designs featuring people of color. You can download collections that feature illustrations of Black people in a range of scenarios, from health and fitness to education. Plus, packs such as the Office Hustle collection are completely free, and you can use them wherever you like — in both personal and commercial projects. Diversity Avatars Sometimes great design is made even more powerful by the story behind it. That’s certainly the case for Diversity Avatars. Created by two friends — Ramy and Scott — the project was borne out of a desire to provide tools for designers to depict equality and diversity. The goal was to create 1,000 avatars. Now at 900, the final 100 avatars will be dedicated to Black Lives Matter, commemorating those who have lost their lives due to racial injustice. Humaaans This mix-and-match library from Pablo Stanley lets you rotate different elements to create unique ‘humaaans’! You control everything from their clothing, hairstyles, skin color and poses to create your own characters. The library also includes customizable backgrounds to help you set the scene. Open Peeps Another great design resource from Pablo Stanley, Open Peeps lets you personalize your characters in a similar way to Humaaans. You can switch up clothing, hairstyles, poses (including standing and sitting), and even emotions to create a unique group of Peeps in different scenes. Black Lives Matter This graphics collection features Black Lives Matter resources to help you spread the message. You can download the collection from Sketch App Sources to use in your Sketch designs. We want this list to keep growing. So if there are any other design resources you use to make sure your designs are diverse, let us know! Tell us about more awesome diverse design resources View the full article
  13. When we announced version 67 of the Mac app, we put a lot of focus on the performance improvements it brought. Our team worked hard behind the scenes to streamline things and make the whole app feel a lot smoother and more responsive. Take a look at our announcement post to find out more. Now, we want to give you a look at our approach to speeding up Symbols. This is the first in a new series of posts where we’ll dive a little deeper into the technical side of the app. Stay tuned for more in future. We spent a lot of time working on Sketch 67’s performance — to make the Mac app faster. We’ve improved a number of things, from how we render background blurs with saturation, to how we time our display updates to stay closer to the screen’s refresh rate. We’ve tried to make working with Symbols feel smoother in general, too, and a few people have asked how we went about this. While the answer isn’t some crazy story involving advanced computer science or math, there also wasn’t just one thing that made all the difference. But we do think there are a few interesting things we can share that might also ring true for other developers. What makes a Symbol? When we introduced Symbols, we started with a basic foundation. Symbols consist of two parts; a Symbol master, which is like an Artboard, and contains multiple layers (such as text layers, groups and shapes), and a Symbol instance, which is a regular layer that just contains a reference to the master. Whenever we need to draw an instance to the canvas, we find the Symbol master and draw that in its place. A Symbol instance can also contain overrides, which is a set of derivations from the values in the master. Text overrides are the most common. Before Sketch 67, if an instance had overrides we would make a full copy of the master, update the text layers with the overrides values, and then draw that copy. Finding focus When we first released Symbols, they only supported text overrides. Since then, we’ve added more types of overrides — nested Symbol overrides, style overrides, resize rules, Smart Layout and more. Having a growing team working on these presented challenges, and while we always try to document our code and share knowledge, we’re not a hive mind. We had a nagging feeling we could be doing better. As features evolve, the basic assumptions that they were built on may no longer hold true, and the architecture you put in place on day one may no longer suffice. But rather than rewrite it at the first sign of trouble, it usually makes more sense to stretch the system a little further. After all, we can’t rewrite every line of code every time we create a new feature. Eventually, though, you hit a breaking point, and we reached one while developing Smart Layout. We used to render Symbol instances as copies of Symbol masters, but that had to change so we could deal with layout adjustments affecting nested symbols. Now we render Symbols as detached groups — a Symbol instance is turned into a group that contains a copy of all those layers, recursively down into all the nested symbols. After we shipped Smart Layout we felt we needed to take a step back and assess our whole approach. Unsurprisingly, we found assumptions that no longer held true — and inevitably, where multiple developers had been working on different assumptions, there was now conflict. We discovered, for example, that we had two caches for storing calculated Symbols, and we were spending a lot of time filling up one of those caches in advance — without ever actually using them where it mattered most. Pulling Symbols into shape We also decided to take a good look at how we were calculating the final Symbol instances that we render after applying overrides, scaling, Smart Layout etc. As I mentioned, these used detached groups, and we found that we were creating too many intermediary copies of (deep) object trees. We managed to cut this right back. I described earlier how we make copies of the master to apply overrides. While this is fine for most Symbols, it becomes exponentially worse with more complex and deeply nested Symbols. What made this worse was the double tree structure we use in our model — a mutable tree that lets the UI layer easily make changes, backed by a lockless immutable model that we can safely pass between threads for doing things such as rendering the canvas across multiple threads. In short, we were creating many intermediate copies and throwing them away again. There was no magic answer to this — it was just a case of finding ways in which we were going from one tree model to another and trying to eliminate them. On any decent-sized Symbol we managed to eliminate at least half a dozen intermediary copies using this method. This had all kinds of other knock-on effects, too. For example, it meant we could better utilize a cache that was based on identity. Making an intermediary copy caused a cache miss, which could cause relatively expensive things like shadows to be calculated all over again. Less work, more speed Another big win was discovering that we were drawing too much when a Symbol master changed. Drawing fast in a typical macOS app is achieved by drawing as little as possible. This has two benefits: By telling the system the smallest area of the screen that has changed, we can push fewer pixels back to the screen We don’t need to redraw pixels that haven’t changed, so you can skip over logic that traverses layers, draws paths, shadows etc. We found that editing a Symbol master actually caused the entire canvas to redraw, which had something to do with how we track changes in our document — by calculating diffs on a series of immutable trees. We’ll talk about the bigger benefits of this in a future post, but suffice to say that this was a worthwhile fix to make. A blueprint for the future If there’s a lesson to take from this, maybe it’s that it’s important to stop once in a while and investigate what you already have. It’s easy for little inefficiencies to creep in, and because they happen between other constant changes to the codebase they can be easy to miss. Making Sketch as responsive and reliable as possible is a priority for us, and it’s something we’ll continue to make efforts towards going forward. For now, though, if you haven’t tried Sketch 67 yet and your documents have a lot of Symbols, I hope you’ll give it a try and see the difference it makes. Find out more about Sketch 67Let us know what you think View the full article
×
×
  • Create New...