What is Reddit's opinion of Zeplin?

From 3.5 billion Reddit comments

So, without getting into a flame war ... just no on Axure Team share, I'm sure it's got great points and everyone is welcome to tell someone else all about them.

Sketch allows us to quickly and rapidly create/deploy prototypes etc. with Invisionapp. (curious about studio)

We can also take the same file we used for wireframing, and then do the color comp if necessary without recreating the wheel. Black and white blocks become styled.

Handoff to developers the Zeplin files

We use Notebook Premium to annotate our wireframes and designs. Quick and easy.

This is an oversimplification, but you get the gist.

I use Abstract and honestly I don't know how I ever got by without it. Basically GitHub for sketch files: Version control and collaboration. Sketch files are saved locally while working and then on the cloud once you save changes. I manage the design of an app with well over 20 unique screens and keep things organized by having one sketch file for the component library & styleguide, one for screens splits into many pages, and one for mapping user flows. As far as performance issues, you need to reduce the use of high res images in the sketch files as much as possible to keep file size down. For handoffs Zeplin is a lifesaver, let's developers view sketch files, export assets if need, grab color pallets, even generates css styles.

The best tools for the job for a design / development agency are always changing, but the ones that I find currently to be best are:

• GitHub - Code storage / version control as well as issue management
• Slack - Communication
• Sketch - Design
• Zepplin - https://zeplin.io Awesome tool for design handoff to devs
• Cosmic JS - https://cosmicjs.com CMS API that allows you manage content as well as deploy apps directly from GitHub for multiple projects. (Disclaimer: I'm the Co-founder).

Let me know if you have any questions.

Hope this helps! Good luck!

Why would you need to run Photoshop as a front-end web developer? Wouldn't using a tool like Zeplin.io be much better for the most common use-case (viewing designs that the designer, who is using Photoshop, uses)? I ask this as a front-end web developer on a Mac (though I've also developed on Linux and Windows) who's never even considered installing Photoshop.

On the rare occasions that I need to do some image manipulation myself, I use GIMP, which for a developer is more intuitive, much cheaper (free), multi-platform, and has every feature from Photoshop that I could feasibly need.

I recently installed macOS on my PC and have been working only on macOS for the past 2 weeks or so. Did web dev (frontend and UI design) on Windows for 3 years before that.

If you do UI design, you're not gonna wanna move from Sketch. I used Sketch for the first time just now when I installed macOS, and holy fuck I'm in love. There's nothing like that on Windows from what I know. Maybe Adobe XD is something similar but I haven't gotten around to trying it out. If you only need it for opening designs, your team should start using Zeplin right now.

If you do only coding, the best editors are on Windows as well. You mentioned Visual Studio. If you're talking about the full-fledged IDE, you don't need it, unless you're doing .NET or C# stuff (I might be getting this wrong, not very familiar with that ecosystem). If you were talking about Visual Studio Code, then yeah, it is available on Windows and works great. I personally use Sublime Text 3, and have tried to move to every editor out there without any luck.

For the command line, you're going to want cmder. It accepts both bash and DOS commands, and it's pretty great. Obviously, you can install Nodejs, Ruby and all of that, just like on macOS.

For package management, I'm not really sure to be honest. There is chocolatey, but I've never really used it myself. I can't say whether it's good or not.

All in all, I'm really happy with my move to macOS for web dev and design. You said With the way things are going with Macs lately. If you mean hardware-wise, you can always install macOS on your PC, or build a separate Hackintosh with matching hardware. If you mean software-wise, I don't really know what you mean because Sierra has been great for me so far.

That's why I set up a [Zeplin](https://zeplin.io) project for the Monero wallet designs. I can push screens directly from Sketch to Zeplin (via a plugin), and then any developer can easily export files, pick colors, inspect fonts, etc via the Zeplin web interface.

All designers should start living and breathing https://zeplin.io/ After using this I've never looked back to double check a measurement as it's always there in Zeplin and everyone is getting the same measurement.

• stetho as cool alternative to adb that allow you to inspect db on device (include 5.0 devices), view hierarchy etc. and runs in chrome http://facebook.github.io/stetho/
• zeplin that simplifies communication with designers https://zeplin.io/

Every place I've worked either didn't care that much about great design or hired designers to do it, then I painstakingly recreate their design.

At my current workplace the designers use Zeplin which provides some CSS snippets that do help a bit but it is not quite copy/paste, there is still a lot of HTML and CSS to write to get the correct end result. But at least having the design to work from makes implementing it more of a mechanical than creative process.

You can try zeplin for the breakdown, also it can help you with coding small amounts of css code out of the box. Photoshop is becoming way to crowded today and the designs are hard to navigate and work with, also it's slow even on high end machines.

I usually just ask what they want. Things like Zeplin can come in handy if the developer want to use it.

Just don't forget to check with the developer when they are almost done. Sometimes you can point out small details.

There are plugins for this. Sketch Measure is one of the more popular ones.

https://github.com/utom/sketch-measure

Zeplin is also designed for showing specs. It's in beta right now, but product hunt users can get in through this link

https://zeplin.io/product-hunt.html

There are a few approaches to hand off:

- The designer gives you the design file or figma mock link. You can click on stuff to see attributes like color, font size, etc. You translate that into html/css.

- The designer somehow annotates all of those details (color, fonts, padding, whatever) on top of the design and you just follow those as you do the html/css.

- There are tools like https://zeplin.io/ that automatically annotate designs to make everyone's life easier.

Also, what's nice is when the designer has a set of colors and fonts that they use. You can add these to your project as variables or into your theme, so when the design says it uses "cool-gray," you know exactly which color name to use in the code.

I might open gimp and cut an image when needed or something but I don't do any design. All designs are created by the design team and handed over to us via Zeplin.

For side projects I just use Bulma since it's a CSS framework with no JavaScript opinions. I don't care what it looks like much, it's not interesting for me.

zeplin is the one i use. With the extension Flutter Extended Doesn’t generate all the code, but helps a lot with “leaf” widgets, asset exports and overall styling and dimensions. And can import from photoshop/sketch/figma and adobe xd...

Supernova provides almost complete code generation with navigations and internationalization support, but i believe it support only Sketch files.

Yessss!!! I loved Fireworks. Sketch in a way, is like a new version of Fireworks. Very clever, simple to use, nimble file sizes.

Sorry to hear about your dev team only using Photoshop. Have you tried Zeplin? Link: https://zeplin.io/ Developers love this tool.

> It's likely that the designer did not communicate important things like specific colors or fonts and this can take hours for the FED to figure out, since you likely didn't have the designer first create a style guide for the developer to follow.

There is an online tool called Zeplin that was used on my last job. It allows the Graphic Designer to essentially upload and comment PSD files, and the Frontend Dev gets a nice list of styles (colours, borders, margins, paddings, sizes, fonts, etc.), can hover over elements to get details, and so on.

Your requirements are a bit confusing, because you're talking about local files, not using the cloud (I'm not sure if you specifically mean 3rd party servers here, or no servers at all), and sharing with others all at once.

Also I'm not sure that a browser plugin makes sense for any of those things.

Also what you're talking about actually sounds like more work than looking through folders, but I'm not sure I really understand it to begin with.

You can upload images to Trello cards, and it'll show them on the main board page. That's pretty useful, seeing it basically ties into an existing task tracking system that you can also use for all your non-image tasks too. So maybe rather than looking specifically for something that only does images, use some kind of task tracking / collaboration system that includes it as one of many features.

I used https://zeplin.io/ recently (I was the webdev, the other person was the designer). That lets you export images from whole-page designs. Not sure if that's relevant to what you're after.

Instead of focusing so much about building the app, you should focus on user stories, use cases, mockups (Zeplin is pretty good for this), etc.. Understanding how and when everything comes together will help in the fact that you won't be doing potential rework and if some team were to build it out, they would use these artifacts to create what you're looking for.

Between $0 and $10 million.

Seriously though, this question lacks substance and there is a variety of factors here.

We have an application being developed for our company and are paying a blended rate of $115/hour. When you use the term design, it’s vague, as workflow/processes could be attributed to this. I’d say probably 60-80 hours was spent specifically on designing layouts and making the mock-ups for what we needed. Further, the adage “form follows function” holds true. Your design can evolve based on how the product is to be used.

Their UX person presented us mock ups on Zeplin and that was the first time I had heard of this tool. Something like this may be worth your time.

OK this is starting to make more sense. So you just use Illustrator to open .ai files and do measurements etc (that's at least how i work). Have you tried tools like https://zeplin.io/? I always try to get the designer to make the designs into a move dev friendly format than .psd or .ai files

It looks like this particular designer builds their design in Sketch and then either develops it in code or passes it off to a developer who will build it in code.

There is a plugin for Sketch called Zeplin that allows you to push a Sketch file through the plugin and it will allow the team to see exact specifications on each element, as well as leave notes for things like animations/transitions, etc.

Not sure exactly what you mean...

So you designed your assets/mockups in Sketch, right? HTML/CSS is a development tool that simply allows you to "code" your mockups into a reality.

Given that explanation, I would use Zeplin (you need to download a sketch plug-in) and export your Sketch artboard to Zeplin. Zeplin is nice because it "redlines", or gives you the exact spacing/sizes of elements you created. From there, you can generate the CSS properties of the assets you've designed, which is useful when actually writing your own CSS.

Hope this helps.

In addition to written stuff like user stories, export your artboards from Sketch to Zeplin. Developers can login to the dashboard in their web browser and see distances, fonts and colours super easily.

You can link to individual Zeplin screens in your project management tool of choice (Trello, Jira, whatever) if you need to refer to them directly too.

There is also a commenting feature so you can collaborate or get feedback, although I haven't used that feature too much so I'm not sure how good it is compared to InVision or something like that.

The best way is to design at 1x and then export the other sizes. The main reason for that is that you're getting rid of the half pixels since everything scales up perfectly. Then you can use tools such as Zeplin or Sympli to deliver assets to the developers and not worrying about other densities since these tools export that automatically.

I personally start designing for iPhone 6 at 1x. I'm constantly testing the design on a device while designing. Sometimes you'll have to design a screen for smaller devices as well (iPhone 4/5) since the content may get a bit squeezed. Usually it depends on what size are you targeting. So if you're targeting iPhone 6 then you should start by designing iPhone 6 and optimize for other screens.

@ZakTaccardi Yep! May be you listen about Zeplin. It can present sketch file with design information for developer. So Sympli the same but provides as AS plugin.

If you are designing for a responsive website then deliver a desktop, mobile and tablet mockup. I've been using this https://zeplin.io/ with my devs and they love it. You should let them know what grid system you use, whether it's full screen or boxed.

No problem! Yeah, I think it's fairly new. The heard about it through our designer. There are also some new collaboration tools coming out that support it, one called Zeplin (https://zeplin.io/) that could become useful in the future.

I haven't created a stylesheet for a client yet, I use an app in conjunction with Sketch called Zeplin (https://zeplin.io/) it allows the developer to view the Sketch file online and see the distances between elements, font sizes, colors etc.

Thanks.