How to improve your design workflow with Zeplin and Sketch?

Designers and developers work hand in hand to create beautiful products with UI components in code and UI libraries in the design system. In design, these UI libraries might be composed of components or symbols from Sketch, Figma, or Adobe XD. In code, these components might be built in React, React Native, or Preact.

The designers need to transfer their ideas or designs of a digital product for development. Tools, such as Zeplin enable this handover, while also supporting design tools like Sketch.

In this article, we will be guiding you through how the winning combination of Zeplin and Sketch can improve the transition of design towards development. This is also a get-started guide of using Zeplin to share your design assets made in Sketch.

Where do Zeplin and Sketch fit in your workflow?

The answer is — during the handover of the designs and components from your design system.

Zeplin is the main bridge between designers and developers. We use it for the final Sketch (or other design tools) designs and components ready to be developed.

We can export frames and components, as well as color and text styles from Sketch to Zeplin in a couple of clicks. And in Zeplin, developers and other members of your product team can automatically generate accurate specs, assets, and code snippets. Moreover, we can see exported assets directly in Zeplin’s style guides.

Let’s say we’re currently involved in 2 projects — one for iOS, and one for Android. They might have very similar screens, with minor changes, mostly from a native perspective like status bars, some icons, etc.

Inside each project, we use sections to organize the artboards and apply a specific naming convention. This may be created as per the main entry points of the app:

Home

Search

My bookings

My profile

There may be many more sections, which are organized accordingly in Zeplin. The same goes for the style guides. We can have the base, with 95% of all elements, and then 2 branches for iOS and Android with their unique components.

Inside the UI Component Library, we can break down the components into 3 sections: Atoms, Molecules & Organisms. Inside each one of them, we have multiple groups also reflecting its naming convention, which is used in the Sketch library.

The design handoff workflow often looks like this:

• The designer creates a mockup of the design in a screen design tool.
• The designer sends the mockups to a design handoff tool.
• Stakeholders look at the design and make comments if needed.
• The designer fixes any issues, then sends an updated version.
• The developer then inspects the finished design, layer-by-layer.
• Design handoff tools translate each layer into code, and the developer can then use this code as the basis for developing the app or website.

Without design handoff, developers are left with only one alternative: guessing. This eventually leads to inaccuracies — for example, the wrong colors being used, or an interaction behaving incorrectly — which in turn impacts user experience.

Working with Sketch and Zeplin: Steps and Tips

Zeplin facilitates the handoff by taking designs from Sketch, Adobe XD, Figma, and Photoshop and exporting them into a format that can easily generate code snippets, style guides, specs, and assets. It is focused purely on improving the collaboration between product designers and development teams, and needs.

1. Get started with Zeplin+

• Create a Zeplin account if you don’t have one already. You can sign up for free: https://app.zeplin.io/register
• Download the Zeplin desktop app for Mac or Windows.

You can use the app-based or web-based version of it. While creating your designs, you can decide what kind of project you are going to create: is it web, iOS, Android, or experimental?

2. Prepare your Sketch file for seamless export to Zeplin

When you download the Zeplin app, their plugin will automatically appear in your Sketch file.

In Sketch, organize your assets and layers using consistent naming conventions. If collaborating with other designers, determine conventions that work for everyone on your team.

Depending on what type of project this is (e.g., iOS, Android, or web), Zeplin will automatically adjust the assets’ naming convention, making exporting them a one-step process.

Create symbols for common elements and assets within the Sketch. This will allow you to set up components in Zeplin.

Save colors into your “Document Colors” palette and fonts as “Text Styles” in your Sketch file. These will show up in your Zeplin-generated style guide.

Note: You should have separate projects for iOS and Android, even if the designs are identical. This is because Zeplin will generate different code based on the type of project.

Select the project resolution which matches your Sketch artboards (e.g., 1x, 320px).

3. Export and Organize the Sketch artboards to Zeplin.

From Sketch, highlight all artboards that you would like to export to Zeplin.

Go to Plugins > Zeplin > Export Selected…

Now that your Sketch artboards are in Zeplin, let’s organize artwork into sections.

From the Dashboard view of your project, select similar screens to group into categories. Once highlighted, right-click and select “New Section from Selection.” Repeat this until your Zeplin file is properly organized.

The side panel has also the option to create your style guide by adding elements to it.

Perhaps one of Zeplin’s most useful features is the ability to organize assets into component libraries. This is important when a project’s designs are developed for multiple platforms by different team members

4. Annotate your designs in Zeplin

Adding notes to designs is easy with Zeplin. From the detailed view of a screen, select the add note icon and pin your note to a component.

You can add a note by holding down Cmd (Ctrl for Windows and Linux users) and clicking anywhere on the screen. You can even mention other teammates with “@” and they will receive a notification.

5. Collaborate, share, and use version control

Now that your Zeplin file is ready to share with your team, invite users via their email address, or send them the project URL.

Continue to update your Zeplin file by exporting artboards from Sketch. Zeplin will automatically version control your files and you can continue collaborating with team members using this dynamic “source of truth.”

Conclusion

The amount of time saved in creating redlines for every single component, and in-depth documentation on its behavior is incredible.

Plus, developers have a view of designs earlier in the process. And designers can see the front-end code. This helps us all identify the similarities between projects more quickly to help plan out how code or designs should be managed.

Or, if we’re seeing design theory or assets trending in a new direction, this helps us identify potential code challenges earlier in the design process.

About Galaxy Weblinks
We specialize in delivering end-to-end software design & development services. Our UI/UX designers and front-end developers are creative problem-solvers with a decade of experience in all facets of digital and interactive design. We create compelling and human-focused experiences delivered through clean, and minimalist UI. Contact us here!