A coworker approached our team and asked if there was something lighter than photoshop (and less expensive) that we knew of that he could use to annotate mocks and mark some grid lines etc. - it sounds like mainly to show the difference between mocks and what's been coded. I'm sure there's something that makes sense for this that I've seen before but nothing comes to mind.
I'm a dev and this is one of the best paring solutions i've seen.
Try avacode, it is even better
Not sure if it answers your question, but https://zeplin.io is great for developers to use to see accurate positioning of elements, colors and fonts.
Supports Android, iOS and web. Works great with Sketch. Developers love it.
I totally support designers knowing how to code, but I don't think this answers the question. Even though I'm great at HTML/CSS, that doesn't mean it's the most efficient place for my organization to have me spend my time as a designer.
Plus lots of us work with iOS and Android native apps more than websites these days.
This is actually a developer making the request. He already has provided mocks in hand, so this isn't going to help him.
It's not the trendiest solution, but I've gotten some great results from a solid InDesign template and a set of good JPGs/PDFs.
If you use Photoshop, there's also Specctr https://www.specctr.com/
Avocode is exactly what you need
This. We have been using it with our latest project and the devs love it.
I'll often use Invision to layout specs for designs. In addition I also use it to give tiny feedback on screens or flows ( move this over a pixel or two etc... ). As far as I know I don't think there is a really great solution out there for this.
If you're already using photoshop for your designs, I would argue that specking (http://www.wuwacorp.com/specking/) is more toward what you are looking for. It allows you to select your assets and provides detailed specs like font specs, attributes for size, position and distance between to items. Even allows you to adjust based on the screen density.
Also worth mentioning is PNG Express (http://www.pngexpress.com/) that does that plus some more. It's primary function is exporting assets for all types of use but it also has a specking feature for detailing the assets.
We use both of these here depending on the artist's preference but they take the guesswork (and man hours) out of figuring this stuff out and organizing it to hand off.
If you just want to annotate things, I would recommend Notable http://www.notableapp.com/. This isn't a photoshop plugin but allows you to annotate things and for them to provide feedback and questions as well.
You could try Sketch for design. And just teach your dev simple Sketch stuff. And bam! just hand your .sketch doc to dev and they can export assets or get dimensions. For the description side of things use sketch in combination with Invision.
I use clarify (http://www.clarify-it.com/) for this type of thing. Whenever I need to annotate screens and explain behaviour, functionality or even typography specs, it's pretty awesome.
You can import screens by dragging into the sidebar, or screenshot. Its screenshot capabilities are really helpful (especially the ability to reuse previous capture areas).
Exporting is good too. You can either customise the styling of a PDF, or upload to clarify-it like this: http://richardsison.clarify-it.com/d/rrex69
So yeah… obviously I'm a pretty big supporter of this software. I use it all the time.
Give it a try as there are a heap of features hidden in there. But even if all you do is screenshot, markup and export, it's super helpful. Very low barrier to entry.
InvisionApp with component breakdowns showing specs and how the component works at various viewport sizes.
Markly for speccing in Photoshop - http://marklyapp.com
I just saw it's available in Sketch.
Has anyone tried it in Markly with Sketch?
SpecKing is great. Just used it takes a minute or two to spec an entire page / app screen
Skitch is super useful for this.