Design in Sketch & Animate in Tumult Hype
In this quick video I’m going to show you how to keep your designs you create in Sketch synced with your animations in Hype we’re going to talk about exporting artboards, slices, exporting groups of slices. We’re also going to talk a little bit about custom CSS that Sketch generates. Alright let’s get started: So from Sketch the quick way to export your full artboard is to use the export button at the top. This gives you all your slices but if you have your artboard selected you can get that entire artboard on your computer. This is a great way to get the entirety of your design and you can then drop it into Hype and match up your elements in Hype. Sketch’s real strength is working with vectors so let’s get some websafe vectors out of Sketch and drop them into Hype. So if you select a symbol or group and you’d like to export an SVG just click “make exportable SVG” and then export. This gives you a filename that uses the group or symbol name and creates an SVG file which we can see right here if you wanted to animate those two elements separately in Hype so you wanted two separate files you can do the exact same thing when you have those two files selected and export the layers, and then that gives you instead a triangle and a circle. So to get those elements into Hype, let’s say we want to put a play button here on this first album you would just drop the complete export into Hype and place it. And then you can size it. So what this does is it creates a new entry in our resources library here you can see it selected and creates a link with this file that we exported in this folder. If we were to make a change in Sketch and then re-export with the same file name, Hype will ask you if you want to update. So let me just show you how that looks. Let’s change the fill color to a blue and then we can export that symbol again with the same filename. Switching back to Hype, if you click update that will replace your version in the resource library with the new file. It’s the same method for bitmap images, with one thing to keep in mind: if you’re designing for the iPhone 6 Plus you’re going to need 3x but in most cases you’re going to want 2x, so this creates a PNG with your layers name and drops it in your recently exported folder. If you’ve made a lot of changes to your layers in Sketch and you want to quickly reexport everything, just click the export button at the top and it will show you all the slices you’ve defined in your document. You can export all of them by using this toggle button and then you just click export and it saves your different elements as either SVG, PNG, or JPEG, or whichever file format you’ve determined for that slice. That will drop everything in this folder. Switching back to Hype you’ll see maybe a longer list here if you’ve done a huge reexport of which elements you want to update or keep so you want to update them all and now we’re all set. So that’s the basic workflow for keeping your layers and your slices and your regular images in sync with Hype. Right now I’m going to show you a little extra bonus stuff about text. If you were to select this element and just hit edit copy or command C and switch over to Hype what you’re going to get if you paste is image data. Now sometimes that’s useful but it’s not very high resolution and not really what we want. If you double click within this element and hit ‘command C’, what you’re going to get if you paste into a Hype text element is the actual CSS that Sketch outputs. You can see here we have we have fonts, we have font sizes, and we have the color. That can be super useful. Another nice thing about copying CSS that Sketch does is if you have an element that is grouped with a couple different things and you select the top layer element, you can copy the CSS attributes for that entire element, switch into Hype and add it straight to your head CSS. Here we have both the code for that rectangle and then the other element which is the text element Now we can create a new text element and edit the inner HTML of that element. And create a button. We can also use that class we defined within a regular button. You can set a class on any element by using the class name field in the identity inspector. Because we have a text color defined on this button already, it might not pick up all the CSS functions you set. I hope this has been helpful for your design and animation workflow! If you have any questions please comment below.