The Font Book is not as exiting, but useful nonetheless.
#ZEPLIN DESIGN PDF#
The Color Palette has names for each of the colors and the correct color codes as CSS variables (no more opening the pdf the designer sent you and using the color picker in !). Press ALT+S to open the styleguide for easy access to Color Palette and Font Book with CSS for both. well, let's call it less than pixel perfect. At least if your implementation of the design is. It's awesome and heartbreaking at the same time. Pop designs out using the button ↙️ or Alt+O.
#ZEPLIN DESIGN WINDOWS#
Pop out is now available on the Windows app! Quickly compare your apps with the designs. Drag it over your web page and compare it with how it actually is supposed to look like. This is the reason I started using the desktop installation instead of the web app.Ĭlick Alt + O and a semitransparent window pops out. This removes some of that hurdle and even if it's a small thing it's a huge value add. I've spent more time waiting for icons than I'd like to admit. Zeplin by default creates three sizes for the png.
This makes the asset downloadable as png and svg. The designer can mark assets as exportable. Likewise, you could go back down using the down key. Press the up key to cycle through parent elements. Sometimes Zeplin doesn't quite get the right element to use as parent. All sizes are now magically percentages instead of pixels. Instead press the alt key after selecting something. You could calculate this yourself using the information Zeplin gives you, but that would be slow and awkward. This is handy, but most of the designs we use are based around relative sizes. By default, it gives them as pixels for HTML. In addition Zeplin draws distances to stuff around the thing you clicked. When clicking on something in Zeplin you get a list of properties for stuff like colors, font type and sizes. If you use Slack, consider activating the integration, especially if you find it hard to keep up with what the designers are adding and changing. In my experience Zeplin greatly reduces the handover time between design and development, causing less friction.
It allows designers to use the tools they normally use (I assume) and then communicate their intent using Zeplin instead of images or PDFs.Īt the same time, it allows me, the developer, to quickly get the information I need about the design in a way that makes sense to me. It can also be used for iOS/Android development.
We used Zeplin for a web app with HTML5 and CSS. Keep reading to find out why I changed to the desktop app.
#ZEPLIN DESIGN INSTALL#
You can either use Zeplin as a web app or install it on macOS or Windows.įor most of the project I had no need for anything but the web app. Īfter I spent some time with it I came to the conclusion that Zeplin lives somewhere between magic and Microsoft FrontPage, but in a good way. Or to be more precise I was given a link to a project in Zeplin and a piece of string. It all started when a new designer was brought on to a previous client project I worked on and introduced us to Zeplin. I'm not a designer, but for a brief period of time I got to feel like I knew how it feels to be one.
0 kommentar(er)
