With its Sketch format and multiple PNG sizes, you have the flexibility to use these icons in any project you choose, whether it’s personal or commercial.

And the best part? You can download and use these icons for free. So why wait? Download the Gallericons Icon Set today and start creating your next project!

Gallericons Icon Set Preview

Download the Free Gallericons Icon Set

The post Gallericons – 30 Free Rounded & Colorful Icons for Sketch appeared first on Speckyboy Design Magazine.

Its popularity has soared in recent years. As a result, numerous resources that cater specifically to Sketch users have become available, which helps make the UI design process faster and more efficient.

This collection features some of the best free mobile UIs and wireframe kits available for Sketch App. They can be used as a starting point for your next mobile UI designs or as inspiration to fuel your creativity.

H1 Free Mobile UI Kit (Free)

The H1 Free Mobile UI Kit comes with an impressive number of elements that are sure to get your creative juices flowing. You’ll find 470 different elements spread out over 130 templates. You can use this kit for both Android and iOS devices.

Chameleon UI Kit (Envato Elements)

This fresh and stylish mobile UI kit includes more than 120 unique screens. The kit can be used with both Photoshop and Sketch and also comes with 15 unique themes, 70 icons, and hundreds of neatly organized components.

Fusion Free UI Kit for Sketch (Free)

The next kit on the list is a perfect choice for designing a shopping app. This template comes with 13 screens with layered and neatly organized elements that are easy to edit. Photoshop and Sketch formats are available.

Free Mobile eCommerce UI Kit for Sketch (Free)

Try this Mobile eCommerce UI kit if you need an elegant design for a shopping app or a mobile store. You’ll find eight different app pages and a web page to accompany the mobile app design.

Momento Free Mobile Sketch UI Kit (Free)

If you need a kit for a social media app, look no further than this template. It contains several different screens with all the elements you’ll need to create a powerful social media app.

Profile Mobile UI Collection (Envato Elements)

The Profile Mobile UI Collection is a set of 15 mobile screens that are fully customizable, well-organized, and designed with iOS devices in mind. The standout feature of this template collection is the flat design style.

Rodman Mobile UI Kit (Envato Elements)

Rodman is a gorgeous mobile UI Kit with a clean and light design. It comes with 80+ layouts in 7 categories and can be used to design any type of app.

Free Material UI Kit for Sketch (Free)

If you love Material Design, don’t miss this Material UI kit. Packed with various screens and icons, you’ll be able to knock out a mobile app design in no time with this kit.

Mobile Wireframe Kit (Envato Elements)

Try this Mobile Wireframe Kit for your next design. Packed with 90+ mobile screens, a collection of 16 categories, and hundreds of elements, this kit works with both Sketch and Illustrator. It also includes a handy collection of tools and flowchart templates.

Free iOS iPhone GUI (Free)

If you need an iPhone GUI mockup, check out this free Sketch kit. The kit was designed by Facebook’s design team and includes all the elements you need to create a stunning mobile app.

Vera Block for Sketch (Free)

Vera Block is an impressive collection of mobile screens and components with a trendy design. You can use them in a variety of projects, and the kit comes in Sketch and Photoshop format.

Zoomie – Social Media Mobile App for Sketch (Envato Elements)

The Zoomie kit is another excellent choice if you’re working on a social media app design. This kit contains a grand total of 15 screens and features a modern design.

Music Mobile App Kit (Envato Elements)

This kit is the perfect starting point for mobile music-related apps. It comes with 30+ carefully designed mobile screens that will help you to prototype, design, and build any music-related app.

Relate – Clean & Simple UI Kit for Mobile (Free)

The Relate kit features a modern and minimal design with 45 unique templates, 19 categories, and more than 99 various elements. The template follows the material design best practices, so don’t miss it if you love material design.

Crypto Wallet Mobile App Concept Template (Free)

Consider this Crypto Wallet Mobile App template if you need to design a mobile wallet app. The template contains neatly organized files for the dashboard, the trading screen, and the currency trend.

Messagly Free UI Kit for Sketch (Free)

This UI kit is a perfect choice for a social messaging app. The template comes with 13 screens and dozens of unique elements to help you get started with your design.

Harmony Free UI Kit for Sketch (Free)

This UI kit was designed with a hiking app in mind. It features a clean and fresh design with over 10 iOS ready core screens designed in vector and based on symbols.

Material Design Wireframe Kit v_02 for Sketch (Free)

This collection is perfect for any lover of Material Design. It contains an impressive number of more than 40 screens and the designers keep adding to it so don’t miss this one.

iPhone Wireframe Template for Sketch (Free)

If you need to design an iPhone app, this wireframe template is an excellent choice. The kit comes with everything you need for an app design, including screens, buttons, headers, alerts, input fields, and more.

With so many fantastic Sketch UI kits and wireframes, you can quickly prototype and design any type of app. Use the kits in this collection as your starting point or simply as an inspiration for your next design project.

More Free UI Resources

The post 20 Free Mobile UI & Wireframe Kits for Sketch App appeared first on Speckyboy Design Magazine.

If you’re an experienced Sketch user, then the chances are you already use or know about these plugins, but if you’re new to Sketch and not quite sure where to start, this collection will have you up and running with the thirty most essential free plugins in no time.

And to help you even further, we’ve previously published a huge collection of UI kits and templates for Sketch that you can freely use as well.

Before you start downloading these plugins, you will need to install Sketch Toolbox, the plugin manager for Sketch that makes it super-simple to find, automatically download and install all of the below plugins, and many, many more.

Slinky

Slinky is a powerful plugin that allows you to export your Sketch designs as HTML email templates.

Compo

The Compo Sketch plugin helps to make it much easier to work with interface components.

Lunacy – Sketch for Windows

Lunacy is a native Windows app that opens, edits, and stores .sketch files.

Sketch Syntax Highlighter

Sketch Syntax Highlighter automatically highlights the syntax of any code snippet, right within Sketch.

Looper

The Looper Sketch plugin that helps automate duplication of groups and layers.

Sketch Material

Sketch Material is a free Sketch plugin that will help you generate complex material design components like tables, chips, forms etc.

Logodrop

Logodrop is a Sketch Plugin to get brand logos right into Sketch App.

Mirr.io

Mirr.io is a lightweight tool to bring your designs to life without leaving Sketch.

Fluid for Sketch

Fluid is a free Sketch plugin for creating more constraint-based, responsive layouts.

Click-Thru Prototype

Click-Thru Prototype is a Sketch plugin that creates a HTML click-through prototype of a website design so you can give your clients an idea what the website will look like.

CSSketch

CSSketch is a plugin that allows you to edit and quickly mockup your designs by attaching a stylesheet. Supports Less.

Blade

The Blade Plugin will automatically generate HTML from your designs.

Social Artboards

Social Artboards will add artboard presets of common social media image sizes.

Sketch Data Studio

Sketch Data Studio is a time-saving plugin that will convert tables and charts by pulling data directly from a CSV file.

Day Player

Day Player will allow you to add placeholder images from some of the most popular services into any Sketch doc.

Sketch Iconfont

Sketch Iconfont is a useful plugin that allows you to use icon fonts (like these) in your documents.

Export Assets

The Export Assets Sketch Plugin allows you to export assets for Android, iOS, Windows Phone in Sketch.

Pixel Perfecter

Pixel Perfecter will identify all pixel imperfect layers and show you a total count of them, allowing you to then fix them all at once.

Style Inventory

Style Inventory will give you an overview of all of the styles you have used and allows you to merge similiar ones together.

Sharpen Images

Sharpen Images will easily add Unsharp Mask filters to image and shape layers with image fills in Sketch.

Generate GIF

Generate GIF is an awesome Sketch plugin that will generated animated GIFs from a sequence of artboards.

Dynamic Button

Dynamic Button allows you to create buttons with fixed paddings regardless of the number of text characters you use.

Lorem Ipsum

Lorem Ipsum is, as the name suggests, a plugin that will quickly create and add Lorem Ipsum generated text to your document.

Marvel Plugin

The Marvel Plugin will allow you to quickly create prototypes from your designs by sending your Sketch artboards directly to Marvel.app.

Icon Stamper

Icon Stamper is a super-simple, yet really useful, plugin that will quickly create multiple sizes of iOS icons.

Content Generator

Content Generator will create dummy data such as avatars, names, geo location data, and much more.

Sketch Palettes

Sketch Palettes allows you to quickly and easily save and load colors into the color picker.

Measure

The Measure Sketch Plugin for getting your designs just perfect.

If you’re looking for something, in particular, to make your Sketch experience that little bit easier, or looking for something that will save you a little bit of time, you should take at the unofficial Sketch Plugin Directory, there are hundreds of plugins, for almost everything, freely available.

The post 25 Essential Free Plugins for Sketch App appeared first on Speckyboy Design Magazine.

If you’re looking for HTML and CSS dashboard templates, you might like to take a look at these Bootstrap-powered Dashboard templates. Or, if you’re looking for some admin panel design inspiration, try this post. But if you’re looking for dashboard templates in PSD or Sketch formats, then stick around, this is the collection for you!

All of the below dashboard templates are free to download and use, and are available in Photoshop or Sketch formats. Hopefully, they will give you some fresh ideas for your own designs.

The post 20 Free Admin Dashboard UI Templates for Photoshop & Sketch appeared first on Speckyboy Design Magazine.

We have previously covered some great plugins for Sketch​; today we will discuss Mac apps that significantly improve your general workflow when designing in Sketch.

Zeplin

Sketch is great for designing in isolation, but it offers no solution for design hand-offs. Enter Zeplin: a collaboration tool that helps developers implement your designs. Devs can inspect design specs to quickly find fonts, HEX colors, pixel-perfect spacing between elements, and more. They can easily export assets, too! It saves time for everyone, and moves you to launching your app quicker.

You’ll be doing a great favor to your team by using Zeplin. Trust me: I’ve used it as both the designer and developer in several projects.

Jumpshare

(Full disclosure: I work at Jumpshare).

Jumpshare is a fast file sharing app that doubles as a set of handy tools for designers. You can instantly share designs from Sketch by using the ‘Jumpshare Hotkey’​. Just press ⌥​D (Option+D), and a shareable link is immediately copied to your clipboard, ready to be pasted wherever you’re collaborating with your team. Previews show inline in Slack so you can discuss your designs in context. ⌥​D also works great for sharing designs from Photoshop if you still prefer Adobe’s suite of apps.

This, of course, is in addition to Jumpshare’s ability to share screenshots (with annotations), record screencasts, and voice clips. Indispensable!

CheatSheet

Sketch is a comprehensive app, so it helps if you use keyboard shortcuts for regularly used tools. Being able to switch between these tools, or performing different actions without lifting your hand from the keyboard is not only faster, but also more comfortable!

Now I usually search for keyboard shortcuts online and then forget to use them when the time comes. That’s where CheatSheet comes in! I discovered CheatSheet when I moved from Windows to Mac earlier this year. It shows you a list of all keyboard shortcuts available in the current app. All you have to do is press and hold the ​⌘ key for a few seconds. I have significantly improved my workflow in Sketch thanks to all the shortcuts I’ve quickly learned!

ImageOptim

Sketch designs usually have dozens of images in them that can add up to large file sizes that, in turn, really slow you down when you need to send them to your team or clients.

I strongly recommend including ImageOptim in your design workflow to compress your images, and hence your design files. I have seen it reduce image file sizes by as much as 60-70% without any noticeable loss in quality!

RightFont

RightFont is the sort of tool you don’t know you need until you start using it. It is a font management app à la Font Book, but it’s faster, and includes actual​ ​font management features. With RightFont, you can sync your fonts across multiple computers and within your team over Dropbox or Google Drive.

Regularly used fonts can be marked as favorites for quicker access, and collections of fonts (say, based by projects) can be organized into lists. Crucially, it works really well with icon fonts, too! Search for icon fonts from within the app, and just drag & drop them into Sketch! This alone can save you up to a minute for each icon font.

If you’re looking for Sketch App templates, you might like to take a look at this post: Free UI Kits and Templates for Sketch

The post 5 Fantastic Sketch App Tools Every Designer Should Use appeared first on Speckyboy Design Magazine.

There is still the debate running through the design, and development community of “Have we hit a saturation point? When is enough?”. I personally think there is no problem with having all this choice. Do we complain about another Puzzle Based game being added to the App Store? Not really, and at my last count there were 15,489 in that genre (I made that figure up, but I know there’s a lot. Double points to anyone who has the specific figure).

Just choose one that eases into your workflow, and feels the most comfortable fit for the project at hand. Some folks (myself being one of them) have a preference for desktop based tools, others side more with a cloud-based platform (which are gaining in popularity).

I will be covering just a handful of prototyping tools that I use on a regular basis, and have spent a great deal of time with, as well as those that I’ve at least given a good run-out when looking for that suitable companion tool for Sketch.

Flinto

Flinto for Mac allows you to create small interactions, and animations, all the way through to building comprehensive flows for multi-screen apps. It follows a similar aesthetic to Sketch, and even offers up similar tools to what you can find in the aforementioned tool. Heck it even has some of the same keyboard shortcuts. It’s as though they were cast from the same mould, and that’s always a bonus.

It’s intuitive for beginners, and a breeze to use when you’ve become accustomed to it, with menus, tools, and options kept to a minimum. Enough to enable you to create impressive prototypes, and avoid venturing into the world of ‘feature-overload’ which becomes an unwelcome distraction.

The key feature with Flinto is the Transition Designer. If you’re the kind of designer who has an aversion to timelines, and programming, the Transition Designer will bring a very big smile to your face. It’s powerful beast, and the precise control you have over each layer enables you to create some very complex transitions, which are then reusable throughout your project. Interested? Well, in a later chapter I’ll be showing you how to put this tool to the test.

Principle

Principle shares many similarities to Flinto. The first, and most obvious of those is the Sketch aesthetic that it mirrors. Even more so than Flinto. That’s always a plus in my book, and just enables the transition between Sketch, and a tool like this a little less daunting.

Principle is one of a few prototyping tools that have focused more on the ‘timeline’ route of creating transitions, and interactions between your Sketch screens. Some folks enjoy that method of working, others prefer to use a more visual approach with something like the Transition Designer in Flinto, or the Auto-Code approach inside of Framer, either way, out of the ‘timeline’ focused tools I’ve tested, Principle makes it the most intuitive.

The tool allows you to easily create flows for multi-screen apps, or just focus on micro-interactions, and it is very competent at both. It lacks a little polish compared to some over the other tools in this list, but it’s a much newer member to the prototyping family, and these things take time.

Framer

Framer is a little different from the tools that came before it. The key reason being that you’re going to have to get your coding hat on (to a point) to achieve results inside of it. But even if your role is solely as a designer, don’t go running for the hills right away, as Framer is an approachable prototyping tool even for the uninitiated.

With Framer, designers can create, and manipulate objects with ease, while still retaining the power and flexibility of what hand-coding can bring you. It truly excels is in its ability to allow you to create the most detailed of interactions for designs that you’ve created in Sketch. The depth of the interactions you create inside of Framer are only limited by what you can imagine, and puts it a few rungs up the ladder compared to prototyping tools that are more linear in their nature. And with the inclusion of the recent ‘Auto-Code’ feature, the entry level to Framer has been lowered considerably.

The thing I love about Framer is that it can actually help teach designers how to code, or at least give a much better insight on how your manipulations affect the code, and vice-versa. This I feel, allows a designer to have a much stronger affinity to their work, when they can control their project to a much later stage in the development process.

Now they have the Framer for iOS app available, the workflow between iterating, and testing has just become a whole lot more enjoyable.

Marvel

Marvel was one tool that I skirted around the fringes of for quite some time. I had heard about them many times via the usual channels, and had viewed their site, and promo video countless times (there site is just so gorgeous, I couldn’t help myself).

The thing that drew me to Marvel initially, was not a client project, not working alongside a developer to bring my designs to fruition. No, it was working on a tutorial series, where I was looking for something a little more lightweight, and beginner friendly to squeeze into my short tutorial series, and Marvel was there to greet me with open arms.

It’s not the most ‘feature-rich’ of the tools out there, but what it does, it does very well, and probably one of the easiest tools in this list to just pick up and run with from the off. Like Atomic (which I touch on below), you also have the ability to create screens directly in Marvel, with it’s simple, but intuitive editor called Canvas. Is this feature of Marvel a Sketch contender? No it’s not, but having the option there can prove extremely useful if you want to iterate even faster.

Proto.io

Unlike the prototyping apps I mentioned earlier, Proto.io is completely browser-based, which is not to everyone’s liking. I’m more of a Desktop based application kind of guy, but that’s not to say that I didn’t find Proto.io to be robust for being a ‘browser-based’ solution. If you’ve a solid, speedy internet connection this could be very much the app that floats your prototyping boat.

It’s a very powerful tool, and probably the most feature-rich tool in this list, but it can also seem a little overwhelming at first compared to those other tools.

The UI is not the prettiest thing in the world (although this has been improved in Version 6), and a little on the cluttered side, which I feel has the potential to distract when working on a project. Keep it stripped back. Leave the extraneous features at home. Let people focus on their designs, and the transitions, or interactions happening in the editor.

Atomic

Atomic is another prototyping application that is purely browser-based. At this current time, Sketch importing is not the most streamlined of features available, but that is changing with a dedicated Sketch plugin coming to an update near you very soon. It has arrived, and it rocks!

Of the ‘Cloud-Based’ tools I’ve had the pleasure of using, Atomic is the most polished out of the bunch, and feels like a ‘pro’ tool from the get-go. From the ability to not just prototype, but design your application in Atomic through to something a simple as the History slider, which allows you to scrub back through iterations of a project with ease (think Undo on steroids).

The UI is very slick, and a pleasure to navigate around. Think Sketch in ‘dark mode’! Which as I’ve mentioned before always makes the transition from design, to prototyping feel much more fluid.

The collaborative aspect of Atomic is very strong, and allows you, and the rest of your team to seamlessly work on the same project, and share design files with ease. This is an invaluable feature for when you’re working on prototypes for your app, and Atomic absolutely nails it.

Finished!

As well as the tools I’ve touched on in this article, there’s many more out there such as InVision (which I really need to spend more time with), Pixate, and UXPin, and that’s not forgetting Origami Studio by the team at Facebook, which is putting in an appearance later in the year, as well as the Craft Prototype plugin from those awesome folks at InVisionLabs.

Find something that fits your workflow, and run with it. You can switch between them, depending on the project at hand. They all have their pros, and cons, and one size never fits all, remember that.

Looking for the fastest, most practical way to learn Sketch?

My new guide ‘Sketch App Essentials’ is the perfect resource to help you realise the full potential of this amazing application.

Use the Offer code MEDIUMESSENTIALS25 to receive 25% OFF any of the Packages.

Grab the guide here.

The post Why Sketch is More Powerful with a Prototyping Buddy appeared first on Speckyboy Design Magazine.

Quick Note: We will be keeping things relatively simple. Not everything is going to be clickable in this tutorial. But, honestly, once you’ve had a play around with Flinto and discovered how user-friendly it is, you’ll be ready to make the app interactive in every spot imaginable.

Installing & Setting up Flinto

If you haven’t already, go ahead and grab the Free Trial of Flinto (for Mac) and don’t forget to download the Sketch plugin too.

Install Flinto, and the Sketch plugin, and then we’ll be ready to create some proto-goodness.

Firing up Flinto

After opening up Flinto, you’ll be presented with the splash screen, where you can go ahead and click on New Document. This, in turn opens up the New Document window (Yes, I know, the obvious has well, and truly been stated).

From there, set the Device Type to iPhone 6, and click Create.

Once you have your New Screen displayed, you can use the same Keyboard Shortcuts as Sketch…

• Zoom In Cmd + (+)
• Zoom Out Cmd + (-)

…to easily zoom in, and out on your screen until it’s displayed suitably for your setup.

Quick Note: Again, the same as Sketch, you can move around the canvas by holding Space, and clicking and dragging.

We of course, won’t be needing the screen that has just been created, as we’re importing the screens from Sketch. So delete that screen either by pressing Delete, or right-clicking on the screen, and choosing Delete.

Remember to quickly save the new document, and give it a name, for the Sketch plugin to reference very shortly.

Jump back to Sketch, and with all your Artboards (screens) selected, choose Plugins > Send to Flinto from the Menu bar, or use the Keyboard Shortcut Shift + Ctrl + Cmd + F.

From the popup window, the plugin knows to scale the artwork up (to 2x) for the iPhone 6 Retina screen, so you can leave all the settings as they are, and click Send.

In the next window, check that the Flinto file you saved earlier is selected, and click Merge.

Back in Flinto, you will see all your screens have been imported into the application. From the Layers Panel you will see that all your Layers/Groups have been imported, just as they were in Sketch, and that any Vectors have been converted to Bitmaps to increase the speed of your prototypes. Awesome!

Quick Note: If (in the Layers Panel) your screen names are not in the same sequence as they were in Sketch, you can easily click, and drag to re-order them correctly.

You will find there is a lot of similar actions, and keyboard shortcuts to those that you use in Sketch. Flinto does make the transition between the two applications feel very familiar, which I love!

Welcome Screen

With the Welcome screen being, of course, our Home screen, we need to let Flinto know that. So with that screen selected, select the Home Screen option from Screen Properties in the Inspector Panel.

You will now see a little Home icon appear on both your screen, and in the Layers Panel.

Now, we’re going to add a timed transition from the Welcome screen, to the Viewfinder screen. So select Timer Link in the Inspector, and enter the following settings (or whatever you choose):

• Timeout: 1000ms
• Target: Viewfinder
• Transition: Fade In

Now would be a good time to fire up the Preview window. I know there’s not much to see just yet, but from here on in you have the ability to view your changes as they happen. Click on the Preview icon in the Toolbar, or use the simple shortcut Cmd + P.

Quick Note: If you haven’t already, you can also grab the Flinto App from the iOS App Store.

Viewfinder Screen

From the Viewfinder screen, we’re going to do a simple transition (via the folder icon) to our Image Gallery screen. We’ll be sticking with the default transitions, but please feel free to go wild, and click on New Transition to add one of your own if you so desire.

So, select the folder icon, and click F to create a new link. Drag out the orange thread across to the Image Gallery screen, and click to bring up the Gesture/Transition window.

From here choose the Gesture that you require. Tap would be the sensible option for this type of link. Then choose a Transition. I’m going with Slide Up. Then click Done. Transition all set. Test it out in Preview, or on your iOS device!

Decide a certain transition is not really rocking your kasbah? No problem, just jump over to the Inspector Panel, and edit the transition from there.

Image Gallery Screen

So, firstly, we have the Navigation Bar at the top of the screen with the Back button that we created in Sketch, and we want to easily navigate back to our Viewfinder screen. Let me show you how to do that:

Firstly click D to draw out a Link Hotspot around the back button, and then simply drag the Link Thread back across to the Viewfinder screen, and choose a Gesture, and Transition.

Quick Note: In this instance we wanted the back button to go back to the Viewfinder screen, and that screen only. Later in this tutorial I’ll show you how to set a back link that will take into account that you may have entered a certain screen from different access points.

Now remember, in the first part of the tutorial, when I mentioned about our image thumbnails sitting outside of our Artboard? You do, cool. This was so we could test out the Scroll Group functionality of Flinto, which is pretty awesome! Let’s set that up on this screen:

So firstly select the image thumbnails layer (which you will see has been converted into a simple Bitmap layer for us to use inside of Flinto).

You will see that once it has been selected, that it will show the overlap outside of the Artboard, making it easy for us to reference in the next step.

Choose Scroll Group from the Toolbar, or use the shortcut Alt + Cmd + G to turn this layer into a scrollable area. If you look at the Layers Panel, you will see our thumbnails layer is now inside of a scroll group folder.

Go ahead, and test this out in Preview, or on your device, and you will see the thumbnails scroll on the screen, and up underneath the navigation bar. Nice!

We’ll keep our Scroll Group with the default settings, but please feel free to have a play around with the many options available to you in the Group Options section in the Inspector Panel.

For our first thumbnail, we want this to link through to our next screen (Choose Filter), so again, draw a link hotspot (D) around the thumbnail and then set a link to the next screen.

The first thing you may notice about Choose Filter screen is that we don’t have a back button!! The horror! But how do we get back to the previous screen if we need to?

Let me show you:

Click (D) to draw a link hotspot, and have it the full height of the screen, and about 220 in width, and place this at the left side of the screen. Then simply link this back to the previous screen, and for the Gesture choose a Right Swipe, and for the Transition choose Pop Right. Now you can easily navigate back to the previous screen with a Swipe Gesture. Problem solved!

Go ahead and do this for the Filter Applied screen too.

Transition Designer

One of the best features (amongst many others), is the Transition Designer. Up until now I’ve just shown you the default Transitions that are available. But once you decide on trying a transition of your own, that is where the Transition Designer comes into play.

Hopefully you can see from our Choose Filter, and Filter Applied screens we want to have a transition where one of the filter options is chosen at the bottom of the screen, and in turn the large image is changed to reflect this.

We’ll keep it pretty simple. The far right image thumbnail is clicked on to change the large image to one with the gradient applied (as shown on the Filter Applied screen), and then to switch back to the default image when the thumbnail on the far left is clicked. Let’s get this type of interaction up, and running with the Transition Designer.

On the Choose Filter screen draw out a link hotspot (D) on the last thumbnail, and connect it to the Filter Applied screen. Then click on New Transition…

…and, boom! We’re into the Transition Designer.

You will see the 2 screens that we want to transition between, and you will see these marked accordingly in the Layers Panel (Start Screen, and End Screen)

To achieve the effect that we require, go ahead and drag the End Screen (Filter Applied) on top of the Start Screen (Choose Filter).

Quick Note: You can select the whole screen by clicking on the red border around the screen, and then dragging it on top of the other screen. Take note of the red guidelines to align it perfectly.

Of course, you may now be thinking ‘hang on, I don’t want to show the filter applied at the start of the transition‘. Of course you don’t. So select the gradient layer (on the End Screen) in the Layers Panel:

And then from the Inspector Panel, reduce the Opacity of that layer down to 0%. And that’s it.

You can click the Play controls at the top of the Canvas area to see the transition in action, then, once you’re happy click on Save & Exit to go back to the main window.

We want to have the ability to also go back to the image with no gradient applied. So similar to before, draw out a link hotspot (D) on the far left thumbnail of the Filter Applied screen, linking back to the Choose Filter screen, and choose New Transition from the popup window.

Back in the Transition Designer, drag the Start Screen (Filter Applied) on top of the End Screen (Choose Filter). We want to be still showing the gradient at the start of our transition, so select the background image layer of the End Screen (Choose Filter) and reduce the Opacity down to 0%.

Click Save & Exit, and why not give it a quick test with Preview Cmd + P.

Now in this part of the tutorial, I’ve only skimmed the surface of what the Transition Designer can do. It’s a powerful tool, and bags of fun to play around with, so for the last screen in this tutorial we’ll push it a little further. ‘Push it real good’ as Salt-N-Pepa once sang!

Information Screen

With this screen we have 2 points of access (via the shutter link), one from the Choose Filter screen, and the Filter Applied screen.

Let’s deal with the Choose Filter screen first.

Draw a hotspot link (D) on the Choose Filter screen, and choose New Transition, which will bring you back into the Transition Designer.

From the following image, you can see that on the End Screen (Information) I have pulled out the logo, and buttons from the screen in a staggered manner, so when this Transition is used those elements will slide in one at a time. That’s the great thing about Flinto. You can try so many different transitions and Flinto will fill in the animation for you (all without the aid of a timeline).

I also tweaked the Timing settings for those layers (logo, and buttons). Changed it to Classic, and increased the Duration to 700ms.

Give your Transition a name. I called this one Stagger Slide. And then Save & Exit.

You can now go ahead and create another Link Hotspot (D) on the Filter Applied screen, and choose the Transition you just created from the available options.

To finish up, we want the back link on the Information screen to take into account that we have entered this screen from different access points. So draw out a Link Hotspot (D), and drag the Link Thread to the orange arrow which appears at the top of the Information screen. This will create a Back Link which is not set to a specific screen.

And I think we’re all done here!

I’ve only touched on a small portion of what is possible with the Transition Designer, but I’ll leave you to have fun with it, and explore some more.

I hope with this tutorial you can see how Flinto is such a great companion application to Sketch, and one that deserves some attention on your next project.

You may also like to take a look at my previous Sketch tutorials:

• Designing an iOS App in Sketch
• Prototyping with Marvel and Sketch

Looking for the fastest, most practical way to learn Sketch?

Sketch App Essentials is the perfect guide to help you realise the full potential of this amazing application. Take a look here.

Use the offer code MEDIUMESSENTIALS to receive 20% OFF any of the Packages.

The post How to Prototype an iOS App with Sketch and Flinto (Part 2) appeared first on Speckyboy Design Magazine.

Ok. Fire up Sketch! Don’t have a copy to hand? You can download the free trial here.

There are a few things that you may want to grab for this tutorial (if you haven’t already) first:

• Iconjar: I have raved about this app before. It’s perfect for storing, and referencing your icons. A must have, and one that we can put to good use with the icon set below.
• Craft Plugin by InVision LABS: The perfect plugin to enable the use of real-data in your projects, and more. One of the now, essential plugins for using with Sketch.
• Google Fonts: Download Raleway and Open Sans.
• Zeiss (Lite) Icon Set: Feel free to download the icon set.

All cool? Everything installed? Sweet! Let’s get to it!

Designing our Screens in Sketch

In the 1st part of this tutorial we’ll be creating the screens for our application. Nothing too testing. We’ll keep it simple, with 6 screens for a fictional Photo Editor iOS App called ‘Zeiss‘. Carl Zeiss invented the modern day camera lens. He deserves an iOS photo app named after him, don’t you think?

As I mentioned, we’ll be creating just 6 screens (It’s the ‘Lite’ version after all) for various parts of the app:

• Welcome Screen
• Viewfinder
• Image Gallery
• Choose Filter
• Filter Applied
• Information

Let’s make a start on the first of those screens:

Welcome Screen

Create a new Artboard (A), and choose the iPhone 6 option from the Inspector panel on the right.

Draw out a Rectangle (R) to cover the Artboard (375×667), and then from the Craft panel on the right choose the Photos tool.

Select the Unsplash option, and click the Place Photos button.

Quick Note: You can toggle the Craft panel on/off with Cmd + P, and if you want to quickly cycle through (random) Unsplash images use Shift + Ctrl + 3.

Let’s add a gradient overlay to sit over our image. Draw out a Rectangle (R) the same dimensions as the image, and then choose a Gradient Fill from the Inspector panel.

Make the Gradient go from Top Left, to Bottom Right. And add the following colour values:

• Top Left: #348AC7
• Bottom Right: #7474BF

And select Smooth Opacity in the Fills panel.

Quick Note: As we will be using this gradient again on other screens in this tutorial, it would make sense to add it to the Document Gradients in the Fills panel. So do that now. Click on the Gradient in the Inspector Panel, and then click the plus (+) icon in the Document Gradients section to add it.

Now time to drop in our shutter icon. If you haven’t downloaded the icon set yet, you can grab it here.

Open up IconJar, and click the plus (+) icon at the top of the app to add a new set. Give the set a name, and then browse to the (unzipped) folder where the icons are.

You will now see your icon set inside of IconJar, from where you can easily select an icon, and simply drag & drop it into your Sketch project. Boom!

Drag the shutter icon into Sketch, keep it at the same size, but change the colour of the icon to #FFFFFF. Make sure you have the shape layers selected, and not the actual folder.

Add in a couple of Text Layers (T). One for the app title, and the other for the subtitle.

For the title, I used the following settings:

• Typeface: Raleway
• Weight: Bold
• Color: #FFFFFF
• Size: 48
• Alignment: Center

And for the subtitle:

• Typeface: Open Sans
• Weight: Light Italic
• Color: #FFFFFF
• Size: 14
• Alignment: Center

Group the icon, and text layers together (Cmd + G), and then use the Alignment Tools to center this new group on the Artboard.

Nice work. One screen down, five to go!

Viewfinder

Create a new Artboard (A), and again, choose the iPhone 6 option from the Inspector panel on the right.

Like we did with the Welcome screen, draw out a Rectangle (R) to cover the Artboard, and then from the Craft panel on the right choose the Photos tool.

Select the Unsplash option, and click the Place Photos button.

Quick Note: You can pull in any random photo from the Unsplash site, but for the next few screens, and just to keep a little uniformity, you will see I have chosen one of the categories (‘Nature’) this time.

Now onto the Control Bar for our Viewfinder screen.

Draw a Rectangle (R) 375 x 120px and place this at the bottom of the screen. Give it a Fill Color of #303030 and reduce the Opacity to 95%.

Onto the controls:

Firstly, drop in the folder icon from IconJar, and give it the colour #FFFFFF.

Then, for the shutter button, select the Oval tool (O), draw out a circle 58 x 58px, change the Fill Color to#FFFFFF, and remove the border.

Duplicate that shape by holding down Alt, and dragging it to duplicate. Then increase it’s size to 70 x 70px, add a 2px white border, and remove the Fill Color.

Quick Note: Remember to hold the Shift key when drawing out the circle, to keep proportions.

With both layers selected, use Align Horizontally, and Align Vertically to align them correctly to each other.

Then finally, for the small image thumbnail, select the large background image we inserted previously, right-click and choose Copy Style. Then draw out a small Rectangle (R) 60 x 60px with a Radius of 1, and right-click on this layer and choose Paste Style.

Group all 3 elements (folder icon, shutter button, and image thumbnail) together, and then use the Alignment Tools to line everything up correctly.

Image Gallery

Let’s add in a Navigation Bar for our Image Gallery screen.

Draw out a Rectangle (R) 375 x 50px and give it a Fill Color of #303030, and place this at the top of the screen.

Drag in the arrow icon from IconJar, and colour this #FFFFFF.

Insert a Text Layer (T), change the wording to ‘Back‘ and then give it the following settings:

• Typeface: Open Sans
• Weight: Regular
• Color: #FFFFFF
• Size: 12
• Alignment: Left

Align the icon, and text layer together, and then group the two elements. Holding Alt (to show the measure guides) align this new group with the background layer you created before.

As we will be using this element again we’ll convert it to a Symbol. So with our Navigation Bar selected, choose Create Symbol from the Toolbar.

Now to put the Craft plugin back into action! Where, again we will be using the Photos tool (combined with the Unsplash images), and also the Duplicate tool. Good times!

Draw a Rectangle (R) 125 x 125px and place this to the left edge of your screen, and directly under the Navigation Bar.

Then, with the shape layer still selected, choose the Duplicate tool from the Craft panel, and select the Specific Count option.

Check both the Vertical, and Horizontal options, and then for the Vertical Item count, enter 7, and for the Horizontal Item count, enter 3. Leave both Gutters at 0, and then click Duplicate Content.

Then select all those shape layers (there will be 21 in total) from the Layers List, and choose the Photos tool in Craft to propagate each of the layers with images from Unsplash (please bear in mind it may take a little while to fill each layer).

Before we finish up this screen, replace the first thumbnail with the image from the previous screen, just so the flow is not broken.

Now you may be asking ‘But why are two rows of thumbnails sat outside of the screen?’. When we move onto the 2nd part of this tutorial all will be revealed! Mwah, ha ha!! (A bit too much? Less ha, more mwah, yeah?)

Choose Filter

Firstly, draw out a Rectangle (R) to cover the whole screen, and then using right-click, copy/paste style (like I showed you before), paste in the image from the Viewfinder screen.

Now, let’s add in a Navigation Bar for our Choose Filter screen (a little different from the one we created previously, so don’t use that Symbol just yet).

Draw out a Rectangle (R) 375 x 50px and give it a Fill Color of #303030, and place this at the top of the screen.

Then, from IconJar, drag in the shutter, camera, and share icons.

Change their colour to #FFFFFF, and then use the Alignment Tools to space them out correctly, with the shutter, and share icons sat 20px from the Artboard edge. Group the 3 icons together, and then align them correctly against the background you created before.

As you may use this element again, go ahead and convert it to a Symbol. So with the Navigation Bar selected (icons, and background), choose Create Symbol from the Toolbar.

Now onto the Control Bar for our Choose Filter screen.

Draw a Rectangle (R) 375 x 120px, give it a Fill Color of #303030 and place this at the bottom of the screen.

Add a Text Layer (T), change the wording to ‘Choose a Filter:’, and apply the following settings:

• Typeface: Open Sans
• Weight: Light Italic
• Color: #FFFFFF
• Size: 12
• Alignment: Center

Then align this correctly inside of the background layer.

Draw a Rectangle (R) 60 x 60px with a Radius of 1, and then copy/paste the style across from the background image you inserted at the start of this section.

Duplicate this layer 4 times, either holding Alt and then dragging to duplicate, or using the Duplicate option from the Craft panel. I’ll leave that one up to you! (You can even use the Make Grid feature inside of Sketch, but that may be a little overkill for this part of the tutorial).

Then, and following similar steps to above, create four more squares using the Rectangle (R) tool (using the same dimensions, and radius as the image thumbnails), and place these over images 2, 3, 4, and 5.

Remember that Document Gradient that we saved before? Cool. Let’s put this to good use again (but tweak it slightly as we go along).

So, starting with the thumb 5, add the Document Gradient to our new shape layer, and then do the same for thumbs 4, 3, and 2, reducing the opacity by 20% as you move along.

Filter Applied

This section will not take up too much of our time I promise you. Just a quick Duplication of the previous screen, colour tweak, and name change. Yup that simple!

So, on your Canvas area, click on the name of the previous screen, ‘Choose Filter’ (or whatever you named it) to select the whole Artboard, and then holding Alt, click and drag to duplicate it.

Change the name in the Inspector Panel. Something like ‘Filter Applied’ would be tip-top.

Then, create a Rectangle (R) to cover the new Artboard, apply the Document Gradient that we saved previously, and then place the layer correctly using the following keyboard shortcuts:

• Bring Forward Alt + Cmd + ↑
• Send Backward Alt + Cmd + ↓

And then, to finish up, quickly change the wording of the Text Layer to something like ‘Gradient Filter’.

And that’s that screen all sown up!

Information

Onto our final screen.

Like we did with the previous screens, draw out a Rectangle (R) to cover the Artboard, and then from the Craft panel on the right choose the Photos tool.

Select the Unsplash option, and click the Place Photos button.

Draw another Rectangle (R) to place over the image, and apply the Document Gradient that we saved previously.

Then, from the Symbol icon in the Toolbar, choose the Navigation Bar Symbol that you created earlier, and place this at the top of the Artboard.

From the Welcome Screen Artboard, copy, and paste across the logo that you created there, and then align this correctly on the Information Artboard.

Now, let’s add 3 buttons to appear on this screen:

• Take the tour
• Settings
• About

Draw out a Rectangle (R) 180 x 50px with a Radius of 100. Remove the Fill Colour, and give it a Border of 1 with the colour #FFFFFF.

Insert a Text Layer (T), change the wording to ‘Take the tour’, and then apply the following settings to that layer:

• Typeface: Open Sans
• Weight: Light Italic
• Color: #FFFFFF
• Size: 20
• Alignment: Center

Then, with both the shape and text layer selected, use the Alignment tools to align them together.

Quick Note: Remember you can use Alt to check that everything is lining up nicely.

Duplicate this button twice, and change the wording accordingly.

Time for a few Social Icons to put in an appearance, yeah?

From IconJar, drag across the instagram, pinterest, twitter, and facebook icons. Change their colour to #FFFFFF, and align them correctly on the Artboard.

Quick Note: Always remember, when working with elements like this, to put those Alignment Tools to good use!

To finish up this screen, we’ll add in a Feedback bar/button to appear at the very bottom.

Draw out a Rectangle (R) 375 x 45 px with a colour of #303030. Add in a Text Layer (T), change the wording to ‘Send Feedback’, and apply the following settings:

• Typeface: Open Sans
• Weight: Regular
• Color: #FFFFFF
• Size: 12
• Alignment: Center

Then, from the Menu bar, choose Type > Uppercase.

Align the shape, and text layer:

And that’s a wrap for this screen, and the first part of this tutorial.

In the second part of this tutorial, we’ll be exporting our Artboards from Sketch (using their nifty plugin) and into Flinto to breathe a little life into them!

You may also like to take a look at my previous Sketch tutorials:

• Designing an iOS App in Sketch
• Prototyping with Marvel and Sketch

Looking for the fastest, most practical way to learn Sketch?

Sketch App Essentials is the perfect guide to help you realise the full potential of this amazing application. Take a look here.

Use the offer code MEDIUMESSENTIALS to receive 20% OFF any of the Packages.

The post How to Prototype an iOS App with Sketch and Flinto appeared first on Speckyboy Design Magazine.

All those moving pieces come with a cost, though, in the form of meetings, emails, and file versioning—all things we do in order to stay on the same page.

One such practice on the design side that’s proven itself time and time again is the style guide, a collection of agreed-upon brand decisions (like colors, typefaces, brand imagery, etc).

A style guide is what allows everyone to use the right color blue, every single time. A style guide is what allows a developer to crank out a simple page without having to loop in a designer. In short, a style guide is what keeps your brand looking good.

Craft Styles by InVision Labs

Recently the folks at InVision Labs launched Craft (check out our post here), a collection of free tools for the design workflow of the future. It lets you design layouts with ease and design with real data. And the latest update brought a new tool, Styles, that lets you create a living style guide with a single click.

Like everything in life, I think the awesomeness here can best be explained with GIFs. Styles can automate a bunch of tricky design tasks, all of which used to require major manual labor.

Let’s take a look at the greatest hits…

A Living Style Guide

Styles is able to create a living style guide from your .Sketch document in just a single click.

Skeptical? There’s a GIF for that:

The tool is able to sniff out every single color, font, and type style in use throughout your document.

And the living part? It’s just as easy to update your style guide as it was to create the first time around. Simply make a change in your document, click the “Sync Styles” button, and your style guide will fall in line.

Let’s take a quick look at how the Styles panel works, which is located in the Craft toolbar along the right side of the Sketch interface.

Styles comes ready to track 3 things automatically: your color palette, your fonts in use, and your text styles (things like size, weight, color, etc.).

Clicking that blue “Sync Styles” button is what triggers the magic. Every time you make a change you want to show in your style guide, simply click that button. Change orange to red? Sync and your style guide will show it.

See those dotted lines, the slots ready to be filled? Those are for custom symbol groups, allowing you to manually select which elements you’d like tracked in the guide.

Symbols are perfect for little chunks of repeated design: icons, cards, modules, headers, etc. If you’re going to use it again and again, you’ll want it to be a symbol. Oh, yeah—and I have a GIF for you:

In the above demo, we’re grabbing a bunch of custom icons and adding them to a symbol group called “icons.”

Creating these custom groups is a great way to present an organized list of components across your design. Through the power of Symbols, all these elements stay in sync wherever you use them and update whenever you feel like making changes. Speaking of changes…

Making Sweeping Changes

There’s not a design task more tedious than changing the color of specific buttons across 19 PSDs. Head? Meet desk.

Styles makes executing a sweeping set of changes about as easy as it’s gonna get. The style guide even syncs in both directions (meaning you can make changes in your design or in your style guide, then apply them file-wide).

Let’s take that original example of making a sweeping color change, for when your boss decides he wants the purple to “be more purplier.”

Let’s unwrap the GIF above. The entire file is designed with a light purple color, which shows up in the style guide generated by Styles. Instead of changing each item using the color manually (woof), we hop into the style guide and make the change there.

With the new purple in place, a simple “Sync Styles” is all it takes to apply the new swatch file-wide. The boss changes his mind later? Swapping it back will be just as easy.

This example shows a simple color change, but it works the exact same way with everything else inside the style guide. Rounded button needs hard corners? Sync! Your headline font looks better condensed? Sync!

Finding (and Fixing) Inconsistencies in Your Design

One of the great things about letting a plugin generate your style guide is you can rest assured it’s not going to miss anything. And that includes those 4 different shades of green you thought were identical.

Even the best designers can sometimes make mistakes (shocking, I know). With a generated style guide, finding and fixing them is a snap.

Like the example above, we’re going to keep it simple, fixing an accidentally duplicated color (it was just a few shades off). Also, like the example above, this works with anything in your style guide: fonts, text styles, symbols—anything!

After noticing two similar swatches in the palette, I simply selected the second green and used the eyedropper to match it to the original green (the correct one). After clicking “Sync Styles,” the offending green disappears because it’s no longer used in the document (yep, Styles is smart enough to match exact duplicates and combine them).

An automated style guide will catch things that your eyes won’t. Find four text styles that are identical in every way except line-spacing? Change them to match, click “Sync Styles,” and watch inconsistency fly right out the window.

A Better Handoff

No matter how much prep work you do, the handoff from design to development is a complex process. Traditionally we try to ease the handoff with notes, build documents, and, yes, style guides (all created manually!).

If you’ve never developed a front-end, you might not know how manual that process can be. It’s almost like translating a design file into written word: look at the design file, investigate the attributes, transcribe what you see into CSS (or whatever build language floats your boat).

Another thing developers do? Avoid duplicate code. Just like we use Sketch’s symbols and styles to keep things in sync, developers code flexible and extendable modules, because no one likes doing the same thing over and over.

With Styles, you can easily highlight and organize your design’s most-used patterns. It’s like an inventory of reusable bits your developer’s going to need to code.

Once you’ve got a slew of interface symbols added to the style guide, not only will your document be more organized for handoff, you’ll be ready to make any last minute changes at scale (you know, because of the living style guide thing, at the risk of sounding like a broken record).

It’s Dangerous To Go Alone! Take This

A style guide is the secret weapon of a well-oiled brand (and the team that creates and maintains said brand). It keeps your entire team, even outsiders, on the same page with a simple set of rules and common elements.

As design systems grow larger than ever, keeping track of decisions and changes is becoming a real challenge. Like lots of things in the modern product era, it sure is nice to have a plugin handle the heavy lifting for me.

To give Craft a try, simply head over to the InVision Labs site to download. It’s free, it’s fast, and it’s evolving.

The post Consistency Please! Style Guides in Sketch appeared first on Speckyboy Design Magazine.

Oh no. After just a couple of minutes, it put a huge ‘Cheshire Cat’ style grin across my face, and that’s the correct response to the frequently asked question ‘but, is it any good’? Damn right it is.

Even at this stage, everything about Silver feels as though it has been a part of Sketch from the beginning. That was the first thing that struck me on my initial venture into the application, was how native it feels. It has Sketch DNA running through it’s prototyping veins.

“The easier it is to make a prototype, the less attached I am to it, making it that much easier to discard if I realize it isn’t the best approach”.

Which is the great thing about how Sketch and Silver work together. Your design and your prototyping are all walled into one application, enabling you to make those design decisions instantly. No back and forth. No need for time-consuming application switching. You design, you prototype, without leaving the comfortable surroundings of Sketch. Hi-Ho Silver!

Enough Small Talk, Let’s See Silver in Action…

Either connect your iOS device via USB or WiFi, where you can choose to preview changes to your current Artboard (goodbye Sketch Mirror, not that I’ve had anything against Mirror, always seemed to work fine for me, but Silver does render it surplus to requirements now). Or preview any Screen Flows you’ve created (and the reason you installed Silver in the first place).

From playing around with the Beta, I can say the response time with both USB and WiFi was pretty darn quick. With there, of course, being a slightly faster response time via USB. It’s quick, it’s stable, it just works, and works well.

Another great feature is the ability to preview your Flows from the Xcode iOS Simulator. Yes you should always test on a real-world device, but for those times that you don’t have your device to hand (that does sometimes happen, doesn’t it?) it’s a handy little feature to have.

Please Note: There are limitations on what the iOS Simulator can do, for example composing SMS, or Email. But as I mentioned before, you should always be testing on an actual device anyway.

The moment it dawned on me about the power of Silver used in conjunction with Sketch was when I was zipping through screens on my iOS device (via the Silver iOS app). Screens that I had just created in Sketch, and had added Flows to. I had not had to jump to another application. I had quickly made a change to my design inside of Sketch, added a quick transition between screens, and instantly tested that out on my mobile device.

The feeling of making that quick edit in Sketch, and then testing it out on my device felt so good. Wait until you have Silver (the public Beta is coming soon) working inside of Sketch, and the iOS app installed on your device, and I guarantee it will have you high-fiving fellow Sketch users in your office (shades of Anchorman there, I admit. But why not!).

Silver is a real pleasure to use. Easy to become familiar with, and as I touched on before, it feels as though it ahs always been a part of Sketch, which is a win-win in my book. Hey, it’s not even out of Beta yet, and already I’m looking forward to what Aby and Andrey bring to Silver in 2016. This is just the beginning folks.

Quick Note: Silver is currently for prototyping iOS apps. Speaking to Aby and Andrey, they are working on Android and Desktop versions for a future update. So be patient folks!

I’ve only touched on a portion of what is available with Silver (I’ll cover it in greater detail once the public beta is available), but I hope you can get an understanding of how much of a game changer Silver has the potential to be.

If you still haven’t had chance, you can sign up to the Public Beta here.

You might also like to read: Sketch.app & Craft: A Match Made in Real Data Heaven.

The post Ready to Prototype from within Sketch? Then Say Hello to Silver! appeared first on Speckyboy Design Magazine.