zeplin io что это

Deliver on the promise of design

Designers have published 6,860,867

Leading product teams use Zeplin

Publish designs for development

Go beyond specs. With Zeplin, you can publish finalized designs from Figma, Sketch, Adobe XD and Photoshop.

Developers get a «locked» design to build from, while designers can iterate on the next great release.

Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.

Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.

Bring together the multidisciplinary team

An accessible workspace that is friendly to non-designers including developers, product managers, copywriters and more.

Zeplin also helps the team collaborate by providing much needed organization and structure to native design files.

Zeplin provides an inclusive workspace where team members from varying disciplines like product managers, UX writers and more can come together to deliver on designs.

Zeplin provides an inclusive workspace where team members from varying disciplines like product managers, UX writers and more can come together to deliver on designs.

Источник

Zeplin.io – способ подружить дизайнера и верстальщика

Zeplin – это новый и очень перспективный сервис, цель которого подружить и ускорить взаимодействие дизайнеров и других разработчиков. На данный момент сервис вышел с бета тестирования и уже его испытать в действии. Поддержка Sketch уже есть из коробки, а Photoshop появится немного позже.

Промо ролик говорит сам за себя:

Недавно мы запустили продукт Zeplin 1.0 с самой ожидаемой функцией экспорт исходников Sketch! И вот небольшое руководство по максимально эффективному использованию этой возможности.

Вот небольшое введение в экспорт исходников Sketch в Zeplin

Zeplin.io – это десктопное приложение, которое помогает дизайнерам интерфейсов и фронт-енд разработчикам эффективно работать в команде, экономя свое время. Программа берет файл с дизайном, а затем генерирует руководство по стилю, исходники и спецификации, которые нужны разработчикам. Для детального знакомства перейдите на официальный сайт.
Благодаря новой опции экспорта исходников вам не нужно готовить графические исходники вручную, и даже не надо думать о том, в какие конкретно размеры нужно их экспортировать. Разработчики получают доступ ко всем нужным исходникам прямо онлайн всего в один клик.

“Make Exportable”

После выделения слоя в вашем файле Sketch, выберите опцию “Make Exportable” (сделать экспортируемым) в правом нижнем углу экрана:

Сделать слои “экспортируемыми”. zeplin

…и собственно, это все! Вам даже не нужно выделять отдельные размеры и выбирать суффиксы. Zeplin сам выберет необходимые настройки в зависимости от типа и плотности вашего проекта. Теперь вы можете просто экспортировать артборд в Зеплин, как вы обычно и делаете. Используйте Cmd + E или воспользуйтесь меню “Plugins > Zeplin > Export Selected Artboards…”.

Когда экспорт закончен, программа отобразит готовые исходники. Вот как это выглядит:

Исходники в Zeplin!

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

Исходники с прозрачным фоном

Во многих случаях может понадобиться добавить отступы вокруг иконок. Скажем, у вас есть иконка 36×36 px, но вам нужно экспортировать ее в изображение размером 48x48px с прозрачным фоном.

И тут на помощь приходит опция “Slice” в Sketch:

Теперь слайс экспортирован как изображение 48×48 px (с прозрачным фоном). Вот как это выглядит в Zeplin:

Исходники с отступами!

Помните: по умолчанию слайсы тоже имеют цвет фона артборда. Убедитесь, что опция “Include in Export” (включить в экспорт) отключена для цвета фона артборда:

Настройка параметров цвета фона артборда.

Сохраняем единство групп стилей

Zeplin.io нормально отображает все слои файла Sketch, даже если они сгруппированы. Возможно, вы захотите управлять некоторыми группами слоев, как одним слоем. В версии 1.0 это возможно! Просто допишите “-g-” в начале имени слоя. Также есть небольшой плагин, который помогает сделать то же самое:

“Plugins > Zeplin > Utilities > Exclude Sublayers” или используйте горячие клавиши “Cmd + Shift + X”.

Плагин “Exclude Sublayers” (исключить подслои).

Давайте протестируем его на иконке, в которой 8 разных слоев.

Иконка Zeplin.io в Sketch.

Применим опцию “Exclude Sublayers”. Она автоматически добавляет “-g-” в начале имени слоя:

И вот как экспорт выглядит в Zeplin, как один слой:

Источник

Зеплин — причина переходить на Фигму

Любопытное услышал от Ветрова. Команда Меил ру готовится переходить на Фигму. Одна из основных причин этого решения — Зеплин использовать слишком дорого. Это было для меня неожиданно, но затем я понял, что всё логично. С такими же проблемами сталкивался и сам в банке.

Коллективный аккаунт Organization 129$ стоит в месяц. Он не ограничивает количество проектов, но позволяет пригласить в команду лишь 12 бойцов. Каждый новый боец утяжеляет счёт на 10$ в месяц. Команда какого-нибудь крупного банка может насчитывать до 100 человек или больше, включая аналитиков, разрабов и тестирование. А ещё могут быть подрядчики.

Ошибка в модели монетизации

Дополнительную десятку Зеплин берёт не только за каждого нового редактора, но и за обычного зрителя, и именно это делает Зеплин неадекватно дорогим. Управлять командой можно через страницу Organization, на которой можно удобно протегать всех и таким образом раздать именно те доступы, которые должны быть. Например, есть тег, который даёт доступ на просмотр только веб-проектов, а другой тег даёт полный доступ на всё.

Конкретные цифры

Для команды из 100 человек Зеплин стоит 843 000 ₽ в год.

Доступ для чужих

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

Проблемы управления доступом

Но если чужому нужно получить доступ на несколько проектов, нужно заходить в каждый и вставлять почту чужого в поле для отправки инвайта. Это быстро превращается в адок. Теги им раздавать нельзя, а значит, чтобы добиться порядка, нужно ещё вести учёт, кто на какой проект имеет доступ и по какой почте. Если сотрудник увольняется, в нормальной ситуации его надо лишать доступа. Если он использует Зеплин через личный меил, его не всегда возможно отследить, потому что меил может называться как-нибудь вроде konfetka666@mail.ru. Попробуй запомни, кто это. В Фигме у аккаунтов видны имена, а не только адреса почты или логин.

Другой способ обхода

Есть грязный костыль, который позволяет экономить на доступах. При этом корпоративный Зеплин будет течь как решето: можно сделать один обезличенный командный зеплин-аккаунт c именем вроде all_access_hellobank. И давать один логин и пароль от него всей команде. Никакого контроля доступов, зато дёшево и сердито. Если сотрудник увольняется, вся команда со вздохом меняет пароль и перелогинивается, либо мирится с тем, что уволившийся не теряет доступ.

Фигма выгоднее

Берёт 12$ за каждого нового редактора, зрителей же можно добавлять бесплатно. Итого, на нашу команду в 100 человек может быть 7 человек тех, кому реально нужно иметь право на редактирование. 84$ в месяц, 1 008 (67 000 ₽) в год.

Я веду телеграм-канал и сайт /designer о дизайне интерфейсов и инструментах.

Источник

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

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

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

Пару слов о Sketch

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

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

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

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

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

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

Zeplin

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

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

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

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

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

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

Работа с Zeplin

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

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

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

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

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

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

Источник

Deliver on the promise of design

Designers have published 6,860,867

Leading product teams use Zeplin

Publish designs for development

Go beyond specs. With Zeplin, you can publish finalized designs from Figma, Sketch, Adobe XD and Photoshop.

Developers get a «locked» design to build from, while designers can iterate on the next great release.

Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.

Zeplin is the source of truth for finalized designs, if it’s not in Zeplin it won’t be in the shipped product.

Bring together the multidisciplinary team

An accessible workspace that is friendly to non-designers including developers, product managers, copywriters and more.

Zeplin also helps the team collaborate by providing much needed organization and structure to native design files.

Zeplin provides an inclusive workspace where team members from varying disciplines like product managers, UX writers and more can come together to deliver on designs.

Zeplin provides an inclusive workspace where team members from varying disciplines like product managers, UX writers and more can come together to deliver on designs.

Источник