# Zeplin

Con Zeplin conseguimos estrechar el gap entre diseño y desarrollo.

Para garantizar que lo que está en Zeplin es el diseño final, únicamente subimos los archivos que están en la rama *Master* del proyecto en Abstract.

## 1. Crear un proyecto nuevo en Zeplin

Los proyectos en Zeplin se crean de acuerdo a la siguiente nomenclatura para mantener la consistencia entre los nombres de los proyectos en las distintas herramientas.

```
[id proyecto][Nombre del proyecto][Plataforma]
```

* El campo de plataforma es opcional. Nos sirve para concretar si los artboards que contiene dicho proyecto son de web o de app iOS o Android .

Por ejemplo, si crearamos un nuevo proyecto en Zeplin para exportar el diseño de Playtomic Web:

* id proyecto → 19
* Nombre del proyecto → Playtomic
* Plataforma → Web

```
19_Playtomic_Web
```

{% hint style="info" %}
✏️ Para conocer más sobre como nos organizamos y cual nomenclatura de archivos que seguimos puedes encontrarlo en [**1. Cómo nos organizamos**](/organization.md).
{% endhint %}

## 2. Preparar Sketch para subir a Zeplin

Marcar elementos necesarios como exportables para desarrollo. Estamos hablando de los assets del proyecto como los iconos o las imágenes.

## 3. Exportar los *Artboards* o *Frames*

La forma de exportar las vistas dependerá de si trabajamos con Sketch o con Figma.

**Sketch**

Si estamos trabajando con Sketch, al descargarnos Zeplin se nos ha descargado un plugin de Sketch, el cual utilizaremos para realizar la exportación.

**Figma**

Para exportar los *Frames* desde Figma debemos activar Zeplin dentro de Figma y posteriormente utilizar el comando Option+E con los *frames* que queramos exportar seleccionados. Este comando activará la activación a Zeplin de forma automática.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://designhandbook.mendesaltaren.com/tools/zeplin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.