I try to do as much for them as possible.

• All images exported to all required sizes in the format needed.
• All strings in the format needed by the platform, or at the very least, a text file.
• Pixel perfect mockups of each main screen. Not necessarily for all devices though — one phone and one tablet set is usually enough.
• GIFs or prototypes of all non-standard animation.
• We work out file naming convention together, but I name all the files.
• A list of fonts and sizes used.
• A list of the colours used, in the correct format for the platform.
• If possible, it's great to have access to the Git repo, so I can make image changes myself.

I'm always happy to hand over working files, but there's no way I would want a developer to need to make any image changes. That’s my job and there's a lot that can go wrong if they do it. Plus, I like to keep all the export documents well maintained, and that can't be done if lots of people are making changes without understanding the process involved.

If something has been cut up or named incorrectly, I'll make the change. I see all of the above as an important part of my job. I am not a fan of just sending over full design documents. That feels really lazy to me.

Sketch + Invision + Invision Sync

Invision Sync has been working really well for me. I love not having to go to Invision and upload screens.

http://adminblog.invisionapp.com/sketch-meet-rapid-hi-fi-prototyping/

Dead simple now for me.

The asset handoff is real time and automatic.

If you use the right naming conventions, Invision will automatically, sync, extract (at what you want, ex., 1x, 2x) PNGs, if you use the right naming conventions. Just end those group names or element names in .png.

The devs can download them all in one zip file.

From the top, when we're ready for visual design, here is what I do:

1. Set up a new Sketch document.

1.1. Set styles on one page. Separate artboards for text styles, symbols, layer styles and so on.

1.2. IMPORTANT: Put a minus sign (-) in front of the name of these artboards. This way Invision Sync will not pull these artboards into Invision for review.

1.3. Set up a page for the layouts.

1.4. Set page/ screen attributes for the artboard based on our wireframes, ex., grid, layout, rulers, etc.

1.5. Create an artboard for every screen in the spec we have to design.

1.6. IMPORTANT: Initially, put the minus sign (-) in front of the name of your artboard. Again, this way it won't sync. When the screen is ready for review, remove the minus sign and it will show in Invision for review.

1. Set up an Invision Project.

2.1. Drop the Sketch file in the Invision > Project Name > Source - directory.

Invision handles on the versioning for you. Thus, the only working file in the source folder is always the single source of truth and most up to date (in theory) - if it is syncing.

You can go back in time and download older versions.

I'm old school and still download, backup locally and also backup in Dropbox.

The other beauty of Invision is you can create a "Tour" - that walks both stakeholders and developers through the design rationales on various screens.

This of course is not perfect.

Depending on the type of project, it is and/ or may still be better to hand off using a specialized plugin in Sketch.

There are specialized plugins for exporting Android assets for example and they may be needed.

Zepelin is a nice stop gap if you want to share a design in there so the developers can extract deeper attributes.

Keep in mind, they do not have a Windows version, and the web version is not as full featured as the Mac app.

Thus, that kind of kills the point for me.

If they're on a Mac, just have them get Sketch.

Avocode is making headway in this space, albeit, seems a bit pricey. They do support Windows, Linux, etc., locally, and seem to be more full featured. I haven't used them though, so I can't comment.

http://avocode.com/

--

Hope that was helpful.

I've been testing out a new system with our engineering team.

We support iOS and Android so we're creating assets for multiple teams. To keep things organized we talk between the iOS, Android and Product team to plan how assets will be usedcl before we start production (5 minute whiteboard gets everyone on the same page).

Dropbox repository for the project contains:

• Company UI Styleguide
• Project mockups for both Android and iOS
• Annotations for each screen (every engineer is different and I've come to understand what works best for my team)
• Exported assets for all resolutions
• Prototype to help communicate motion if needed

Github:

• Each designer has access to the GitHub repository for their respective team/project
• The design branches and uploads their own assets (this prevents issues with naming conventions and acts as a way to double check that all assets are accounted for)
• An engineer does a PR and pulls in the updates

This is the new part of our process that we're slowly rolling out to the company... still in beta mode. I've found it to be a bit of a learning curve, but our engineers LOVE it. It empowers our design team and encourages our engineering team to venture into the design world as well.

Our engineers bring the work to life, I want to be in tune with their process. This has been a great first step in that direction. Not to mention it speeds the process up x10 if something needs to be updated.

Recently, designing most of my work with SketchApp led me to try and see if giving them the raw Sketch file would work... which had varied results. Then you have using an online tool such as Invision to provide the high fidelity visual with comments as information, this seemed like way to much additional work. I've recently been using the Zeplin.io beta app and finding that to be extremely useful, so far.

Then the actual assets (that they can not currently extract) can be provided to the team using them and they use all the size/color information from the Zeplin app.

As a developer, a minimal list of things that I want when I start working on a project: - List of fonts - List of colors - NOT having all the mockups in a single .PSD, rather splitting everything. Otherwise after a few weeks you end up with a 1-2Go+ PSD that takes ages to load and open. - When it applies, some margin indicator to show which item is aligned with which — it can makes sense in your designer mind but not for someone opening the file for the first time. - All small icons/assets in illustrator format, or photoshop dynamic shapes so I can easily export it, or SVG.

I'd like to try Sketch tho.

Avocode is my go to tool. It supports PSD files and Sketch.

I usually share a Dropbox folder with the developer. In that folder, I organize subfolders with assets, specs, screens and animations.

I export assets and create detailed specs using a single Photoshop Extension called PNG Express (http://www.pngexpress.com) I can't express (pun intended) how much PNG Express made my workflow simpler. Their exports are just superb.

I use Marvel to create semi-functional mockups (all developers I worked with LOVED Marvel mockups)... and to show more detailed animations I usually create small videos using After Effects.

REGARDING SKETCH

I tried to use Sketch on some recent jobs. Every single time that happened I ended up changing my mind and going full Photoshop in the middle of project — which is infuriating. I WANT to love Sketch, but the app is just not there yet.

• Artboards are just TOO SLOW — or maybe I'm just working on bloated apps. Once you have 10 to 12 artboards, it's spinning rainbow hell.
• Working with photos on Sketch is a pain. I know Sketch is supposed to focus on this flat design trend, but once you're working on an app that needs a lot of photos, it sucks.
• Layer management is weird, buggy and (again) slow. Maybe I'm just too organized (all my Photoshop layers haver names and respect a strict hierarchy defined by folder level and color). I could do some of that on Sketch if the layer management was less broken.

I’m the creator of Gemba, a Mac app that attempts to streamline the asset integration process between designers and developers. I talked to many designer/developer teams as part of my market research, so I can contribute to the discussion with some data points:

• Most teams were using a Dropbox folder for getting assets (and screen mockups) from designers to developers.
• Some teams used JIRA or similar issue trackers and attached assets (in addition to mockups or specs) to issues.
• Many teams had worked out a naming convention, i.e. the assets had the same name from PS/Sketch layers all the way to source code.
• In only a few teams were designers pushing changes to the Git repo themselves.

Almost every iOS/Android developer I’ve spoken to very much wants their designers to integrate assets directly, but only the best designers care about the benefit of making changes in the end product themselves (case in point: Marc Edwards) and many designers find Git scary.

So with Gemba, I made it super-easy for designers to literally drop exported assets into their target app, without needing Xcode or Git. It also warns you if assets have mismatching pixel dimensions.

If you’re working on an iOS/Mac app, try out the Beta at http://gemba.io and help shape the tool that YOU want to use. I’d love to hear your thoughts.

Biggest fear for a developer is when the assets are updated. Did the designer keep the same names? Do images have the right dimensions/DPI? Maybe I have been unlucky in the past but the answer was often "no" in my case. So I couldn't blindly import new assets, I had to check. That means time and most of all stress. I feel the need of a "compiler" or "unit tester" for assets. Is there such a thing? If not I am gonna build it :)

Sympli.io : PSD / Sketch plugins to automatically generate assets, styles, fonts, positioning, etc. Xcode & Android Studio plugins to drag & drop / one click import assets, styles, fonts, positions, etc. into the development environment. Also, design versioning, visual diff tools for design versions, notifications, slack integration, and much more. Give it a shot - saves tons of time / cycles on projects.

We export all the UI components by Sketch Measure https://github.com/utom/sketch-measure (awesome & free) and Also use Seafile for sharing files with developer and jira for issue tracking.

Use http://zeplin.io

Love this discussion. So many helpful tips.

Provide all the assets yourself. It's a little extra work in the export step but it will always, always result in a better result. Don't trust the FED to know what to do and it absolves you of the need to send a source file (for example, will s/he even have a purchased copy of Sketch?). Just zip up a folder of 2x PNG/JPG assets.

I share the PSD with my front end person and we assess what they'll "draw" in code and what I'll slice as bitmaps for them.

We'll identify assets that are the same shape and size but different colors and if there's a lot of color themes in the app/feature I'll slice those out once in black and front end person will specify the colors for those in code, to match the color themes.

We'll identify which slices will require transparent padding and which ones don't. Same goes for 9 patches.

I'll make a "slice sheet" PSD that contains all of the slices so we know what I have and haven't sliced. All of the layers in the slice doc are named per the end file name that front end person will use in the app. This makes re-slicing and keeping account of every asset easy.

All of my slices go out in their respective folders per screen density, etc.

So, in the end, we do a lot for each other to make it work best for the app, and the both of us in the long run.

EDIT: you also asked about "do you use a plugin?": I use the photoshop extract assets as much as possible. It really useful for automating out all of the different assets for different screen densities.

I don't just transfer to a dev, I have a quick sit down chat. Should things be super obvious? Of course, but I believe that you shouldn't just throw things and then go back to your desk and hope you don't hear angry dev footsteps later that day.

I been using generate in all my photoshop documents lately and it has been an ultra time saver. I try to keep my workflow so Photoshop is already kicking out the assets as I'm creating them and keeping them updated in the process.

Beyond just image assets, I make sure to have a color palette with hex values, fonts with size all laid out in a separate file that resembles a style tile, but with all the info. I have been known to put the pixel dimension next to folders of entire sections to give an idea what the total size is, but I've stopped doing that.

I'm thinking about creating a small css file with all the things needed in terms of fonts/colors so they can copy and paste as needed. Anybody else have thoughts on that? Or too much?

Specifications with zeplin, assets exported from sketch, a google docs gathering links and everything inside a folder in drive.

Photoshop : I design on canvas of 640*1136 px with 326ppi which i more comfortable while showcasing to my client.

Cut n Slice www.cutandslice.me : A panel to export assets from photoshop. To resize for iphone 4, 6 n 6+ change the PPI (ctrl+alt+i). Export files similar way of exporting web assets in Cut n Slice panel.

I'm designer and simply share them using Dropbox. I have a shared folder with developers separeted by person, inside each folder theres another for a project and so on.

I'm a developer. I don't even have Photoshop installed on my computer. The designers in my company have started using Sketch, and I've been the pilot developer for adopting Zeplin. Zeplin is the greatest tool for designer/developer asset sharing by far, hands down, no question. In my opinion, obviously. Still a little buggy, and I think its pretty beta and invite only, but amazing.

First of all, I usually share a high-fidelity prototype with the team, either on Marvel App (if it's a static prototype) or, more recently, Hype 3 for more complex animations/interactions. That way they know what to do with the assets. If needed, I would create documentation pointing out sizes, spacing, hex codes, etc and put it up on trello or our wiki page.

For vector assets I export them to SVG. For pixel assets I use PNG. If it's for iOS then PDF is your best choice so you don't have to export all the different sizes.

I highly recommend creating a font on icomoon for your single-color icons/assets.

I hope that helps a bit :)