Zeplin export to android

Developing Android projects using Zeplin

Zeplin automatically generates resources, including measurements, assets, and code snippets tailored to platform needs.

Here’s a list of features that will help you develop Android projects:

Measurements are in dp/sp.

Assets are available as:

PNGs and optimized PNGs (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)

SVGs and optimized SVGs

JPGs and optimized JPGs (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)

WebPs (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi)

Vector Drawables are on the way!

XMLs from project color palette and text styles, from the project Styleguide.

TextView code snippets from text layers.

When you first export assets into a res directory of your project, assets are placed in the appropriate directories. Next time you export another asset, you can simply select the project.

☝️ If you’re working on the Windows app, you can change the folder which your assets will be downloaded to by just clicking on the “Exporting to . ” text on the right panel.

Источник

Downloading assets

To be able to download assets, designers need to set layers as «exportable” before publishing them to Zeplin. Then, Zeplin will automatically generate resources, including assets, tailored to the platform needs.

You can download the assets of a layer from your screen. Click on the layer in the screen, then you’ll see the available assets on the right panel.

Downloading all available assets in a screen

To download all of the available assets of a screen at once, you can select the Assets tab (🔪) in the screen’s right panel and click the download button near your preferred asset format.

If you don’t need to download all assets in a screen, you can select multiple assets by using Cmd/Shift button to download at a time.

Downloading the assets of a component

You can view and download the available assets of a component from your styleguide. To do that, go to the styleguide that you’ve exported your components to and click on a component. Then, you’ll see the download button near the asset formats under Assets on the right panel.

Zeplin generates multiple scales for your bitmap images. You can download 1x, 2x and 3x scales of your PNG, JPG and WebP assets.

☝️ Available PNG scales are mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi in Android projects.

If you don’t need all the scales of your bitmap assets, you can disable them from the settings menu of Assets under the «Bitmap Scales» option.

Источник

Sketch и Zeplin: помощь дизайнерам и разработчикам в сотрудничестве

Russian (Pусский) translation by Marat Amerov (you can also view the original English article)

Сотрудничество между дизайнерами и разработчиками имеет важное значение для успеха веб-проекта, и это показатель успеха команды. Хотя использование одного и того же рабочего пространства неоценимо, использование онлайн-источника, помогающего в этом сотрудничестве, невероятно полезно. В этой статье мы рассмотрим Zeplin и то, как он работает в сочетании с Sketch, чтобы объединить команды.

Пару слов о Sketch

Около шести месяцев назад, когда я переехал на работу, мне было предложено попробовать Sketch. Самое замечательное в этом программном обеспечении заключается в том, что оно специально ориентировано на создание интерфейсов и дизайна иконок; от артбордов с конкретными размерами для веб, мобильных и иконок, до функций, которые помогают улучшить процесс проектирования, Sketch является обязательным для дизайнеров.

Кроме того, кривая обучения, если вы являетесь промежуточным пользователем Photoshop или Illustrator, близка к нулю.

Вот несколько примеров, которые дают вам обзор того, что вы можете сделать с помощью Sketch:

1. Создавайте страницы для организации вашего контента (например, мобильные проекты, десктопные проекты) и артборды внутри этих страниц для макета вашего продукта (например: создайте пошаговое путешествие клиента).
2. Используйте Inspector, чтобы найти все сведения о конкретном объекте (размер, расположение, цвета, стили шрифтов, прозрачность и многое другое).
3. Используйте функцию Export для экспорта артбордов или отдельных объектов в определенные форматы файлов (PNG, JPG, PDF и т. д.).

«Я разработчик, я никогда не использовал Sketch!»

В последние годы дизайнеры научились сотрудничать между собой, используя инструменты, такие как InVision, но на этой платформе все еще не хватает функций, которые позволяют быстро организовать команды разработчиков.

Мы не должны просить разработчиков быть опытными в тех же инструментах, которые используют дизайнеры для макетов. Тем не менее, мы не должны требовать от дизайнеров отказаться от того, что они делают лучше всего: дизайн! Построение «документа спецификации» каждый раз, когда они передают дизайн, далеко от «agile» и может отнимать много времени впустую между передачей проектов и необходимостью итерации при необходимости.

Zeplin

Здесь Zeplin выходит в сцену.

Zeplin — это инструмент совместной работы для разработчиков пользовательского интерфейса и front-end разработчиков. Он выходит за рамки рабочего процесса проектирования и помогает командам с компоновкой дизайна.

Это позволяет дизайнерам загружать свои каркасы или визуальные проекты прямо из Sketch и добавлять их в папки проектов в Zeplin. Хорошая вещь? Аннотации автоматически добавляются к проектам (размеры, цвета, поля и даже CSS-предложения для определенных элементов), которые предоставят вам онлайн-репозиторий, в который можно добавить свою команду.

«Zeplin отлично работает как единственный источник истины, когда он используется как таковой.

Кроме того, поскольку он доступен как автономное приложение, так и веб-приложение, вы можете получить доступ к нему практически в любом месте. Можно легко проверяет дизайн и параметры, такие как расстояние, размеры, цвета и т. д. — Daniel Setas Pontes, Javascript-разработчик @NOW TV, Sky

Экспорт проектов из Sketch в Zeplin

Zeplin работает как плагин в Sketch, поэтому загрузка проектов — это однократная работа.

Вот как начать проект:

Запуск Zeplin проекта

1. Загрузите и установите Zeplin (доступен только для Mac). Разработчикам не нужно будет запускать OS X, так как им нужно будет получить доступ только к веб-версии, чтобы получить доступ к контенту.
2. Создание проекта.
3. Выберите платформу, для которой вы разработали дизайн.
4. Назовите проект (убедитесь, что вы выбрали имя, знакомое всей команде).

Экспорт из Sketch

В Sketch выберите отдельные объекты и сделайте их экспортируемыми. Это позволит вашей команде разработчиков экспортировать каждый элемент из Zeplin позже. Вот как это работает:

1. Затем выберите артборды, которые вы хотите загрузить в Zeplin.
2. Перейдите в раздел Plugins > Zeplin >Export Selected Artboards.
3. Выберите проект, в который вы хотите загрузить свои дизайны, затем нажмите Import.

Работа с Zeplin

В Zeplin вы можете перемещаться между проектами и легко изучить все компоненты внутри них. Выяснение характеристик некоторых элементов также интуитивно; выберите нужный элемент, тогда вся соответствующая информация появится в столбце справа.

Разработчики: вот как это работает, как только вы открыли веб-инструмент и залогинились:

1. Выберите объект, который вы хотите проверить.
2. Посмотрите на столбец с правой стороны, чтобы получить подробную информацию, такую ​​как стили шрифта, цвет и т. д. (Информация будет отображаться в соответствии с выбранным вами объектом).
3. Скопируйте предлагаемый CSS.

Если команда дизайнеров разрешала экспортировать элементы при импорте проектов в Zeplin, команда разработчиков должна иметь возможность экспортировать отдельные ассеты. Ассеты будут доступны для загрузки в формате SVG и трех разных размерах PNG.

1. Здесь вы можете добавлять примечания и комментарии к проектам.
2. Здесь вы можете скопировать и поделиться ссылкой на проект, возможно, даже интегрироваться с каналом Slack команды, чтобы получать уведомления или приглашать членов команды для совместной работы!

Почему ваша команда должна сделать движение в эту сторону

Работа с Zeplin имеет много преимуществ, вот несколько примеров:

• Вы избежите создания документации спецификаций; что не является ни гибким, ни легким для обновления.
• Создавайте мгновенно аннотированные проекты со всей необходимой информацией для разработчиков и других дизайнеров.
• Вы можете создавать экспортируемые проекты, поэтому разработчики получат быстрый доступ к отдельным ассетам.
• Создайте столько проектов, сколько хотите, затем загружайте и обновляйтесь всего несколькими кликами.
• Создайте руководства по стилю, которые помогут команде разработчиков оставаться в курсе актуальных стилей и правил.
• Воспользуйтесь интеграцией Slack, не уведомляя свою команду каждый раз, когда есть обновление.

Попробуйте это!

Работа с Sketch и Zeplin — отличный способ для дизайнеров гармонично сотрудничать с разработчиками. Моя команда любит работать таким образом — я бы хотела услышать ваши мысли и опыт, которые накопились при работе с этими инструментами!

Источник

Moving Layout from Zeplin to Android Studio

Zeplin is an awesome desktop application that can be used as a tool for collaboration between UI designers and front end developers. It can help the developers in building pixel perfect mobile apps.

Zeplin itself calculates all the pixels in DP so you don’t have to worry about PX to DP conversion to make it apply in your layout .xml files. It also can convert the image assets for all needed densities and resolutions like mdpi, hdpi, xhdpi, etc.

During the installation of Zeplin, it will ask you if it wants to install Zeplin plugin for Photoshop. This is required by Zeplin since it can upload your design directly from Photoshop to Zeplin.

First things first! Once everything is setup, You need to define densities of the PSD designs which you are going to import to Zeplin. This is the most important step since Zeplin needs to know the current pixel density. Hope you know the difference between ‘PX’, ‘DP’, ‘DIP’ and ‘SP’ in Android.

Once you finalize the density of your design, log in to Zeplin, and create a new project under Designer profile. It is recommended you choose the Designer profile, because only the project owner will be able to upload the designs in a free version of the application.

Be sure you have Zeplin plugin installed in your version of photoshop. Now open the design file.

Select the layers you need to import. You can choose the layers by turning On / Off the visibility of the layers.

Since the Zeplin Plugin can only import Artboards, you need to create an Artboard before you can import into Zeplin. Also, Zeplin takes everything as a group, so you will need to put all the layers as a group and then import the Artboard.

Zeplin also has the potential to export all images in .png format for each and every pixel densities like mdpi, hdpi, etc,. To utilize this feature of Zeplin, you have to export all images in your PSD layer as separate assets. You can easily export the images by expanding the artboard objects, selecting them and clicking the export button. When the design file is exported at once, you can select any screen and in the image you will get to see the properties of elements such as width and height when mouse is moved over them. It will also display many other properties such as the distance between them in DP.

When images are saved as assets, these get saved to folders namely drawable-mdpi, drawble-hdpi, etc. These folders are ready to be copied to the Project res folder.

Источник