Zeplin

With Zeplin we narrow the gap between design and development.

To ensure that what is in Zeplin is the final design, we only upload the files that lie in the Master branch of the project in Abstract.

1. Create a new project in Zeplin

Projects in Zeplin are created according to the following naming system in order to keep the consistency between project names throughout the different tools.

[Project id][Project name][Platform]
  • The platform field is optional. We use it to specify the platform the artboard is going to be being created for: web or app (iOS or Android).

For example, if we created a new project in Zeplin to export the Playtomic Web design:

  • Project id → 19

  • Project name → Playtomic

  • Platform → Web

19_Playtomic_Web

✏️ To learn more about how our team is organized and how we name our files, please refer to our section on 1. How we organize ourselves.

2. Prepare Sketch files to upload to Zeplin

Mark required elements as exportable for development. We're talking about project assets like icons or images.

3. Export Artboards or Frames

How you export the screens will depend on whether you work with Sketch or Figma.

Sketch

If we are working with Sketch, when we download Zeplin for the first time we automatically download its Sketch plugin. We will use this plugin to upload our files to Zeplin.

Figma

To export Frames from Figma we must activate Zeplin inside Figma and then use the Option+E command with the selected frames we want to upload. This command will automatically activate Zeplin.

Last updated