No artboard selected zeplin как исправить

No artboard selected zeplin как исправить

Сейчас можно намного проще!

• Выбрать язык отображения стилей: CSS/Sass/Less/Stylus, Swift, Objective-C и др.
• Скопировать текст или набор свойств.
• Оставить комментарий в нужном месте на макете, если нет связи с дизайнером.
• Скачать исходники с иконками или картинками, что устраняет процесс подготовки графических элементов вручную. Сначала дизайнер должен в настройках исходника указать экспорт конкретного ассета.

• отключить отображение базовых стилей
• задать формат отображения цвета (HEX, RGB, HSL)
• добавить в Style Guide цвета и параметры шрифта, чтобы проще ориентироваться и быстрее задавать такие же стили к другим элементам

• Photoshop выбираете инструмент “монтажная область”, выделяете макеты и отправляете в Zeplin (Window > Extensions > Zeplin)
• Sketch выдеялите все артборды, которые нужно передать разработчику, нажимаете Cmd + E (⌘E) или Plugins > Zeplin > Export Selected Artboards. Выбираете нужный проект и нажимаете Import
• AdobeXD выбираете артборды, нажимаете Cmd + Option + E (⌥⌘E) macOS / Ctrl + Alt + E Windows, либо меню >Export > Zeplin. Выбираете проект и нажимаете Import
• Figmaуже имеет встроенный функционал для работы с сервисом Zeplin. Чтобы включить экспорт открываете меню >Integrations > Zeplin. Потом выбираете артборды, нажимаете Option + E (⌥E) / Alt + E либо нажимаете кнопку экспорта (в правом верхнем углу) и выбираете Export to Zeplin и нужный проект

• слишком нагруженный интерфейс (показываются слои и их нельзя скрыть, переключатели режима и многое другое, что не зачастую не нужно простому разработчику)
• неудобная навигация по макетам
• нельзя растянуть панель стилей
• нет формата HSL(HSB) для цветов, зато есть UIColor для apple разработчиков

1. Подключив учетную запись Dropbox и выбрав оттуда необходимый файл
2. Загрузка дизайна непосредственно с компьютера

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

Andreia Paralta Carqueija Apr 25, 2016

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

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

Andreia Paralta Carqueija Last updated Apr 25, 2016

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, поэтому загрузка проектов — это однократная работа.

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

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

В 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 — отличный способ для дизайнеров гармонично сотрудничать с разработчиками. Моя команда любит работать таким образом — я бы хотела услышать ваши мысли и опыт, которые накопились при работе с этими инструментами!

Tutorial: How to use Zeplin to automatically generate measurements, styles, and assets from your Sketch files

Zeplin is a well-designed program that feels lightweight but is actually quite robust. I’d say it’s fair to call it the industry standard for handing off designs to engineering. Here’s a quick walkthrough.

1. Download Zeplin and create an account

Head over to zeplin.io to create a Zeplin account and install the Mac app (which also includes a Sketch plugin). You get 1 project for free.

2. Start a new project in Zeplin

Once you’ve installed Zeplin on your Mac, choose your project type (Android, iOS, and Web).

3. Choose your pixel density

If you’re working with the standard iPhone artboard in Sketch, you’re working in 1x. I’ll do another blog post about pixel density some other time.

4. Export your artboard from Sketch to Zeplin.

With the artboard selected, se the easy-to-remember shortcut (⌘E) to export the artboard to Zeplin.

5. View your mockup in Zeplin.

Do you see this magic? In Zeplin you can click on any element in your design to get all of its properties: position, spacing, color, text styles, etc. They even give you a nice «copy» button so you (or a developer or product manager) can easily grab the exact copy you’ve written, removing any room for error in spelling or punctuation.

6. Share the specs with your developer

If you’d like to share a single screen, you can quickly grab a link from the right-hand panel when viewing an individual screen in Zeplin:

However, I’d recommend going back to the Project Dashboard view in Zeplin, where you can invite the developer to the project using their email address (on the right-hand side panel)

Those are the basics of Zeplin, and frankly there’s not much else to it, which is great. Try it as a free account and see if it helps your workflow. I have a paid account and have found it to be the best way to send accurate specs that get implementation as close to pixel perfection as possible.

Zeplin also has a Slack integration that will notify channels when new designs are added or changed. I’ve found it to be a bit overkill, but if you’re into that sort of thing, then go for it!

Zeplin.io – interaction service for designers and developers

Zeplin is a new and pretty promising service. Its purpose is to make friends and speed up the interaction of designers and other developers. Currently, the service has come out with beta testing and is already tested in action. Sketch support is already out of the box, and Photoshop will appear a little later.

Recently, we launched Zeplin 1.0 with the most awaited source export feature, Sketch! Here is a small guide to efficiently use this opportunity.

Here is a quick introduction to Sketch’s source export to Zeplin

Zeplin.io is a desktop application that helps interface designers and front-end developers to work effectively in a team, saving their time. The program takes the design file and then generates the style guide, source code and specifications that developers need. For more details – visit the official website.

With the help of the new option of exporting sources, you do not need to prepare graphical sources manually. Moreover, you don’t even have to think of their sizes for export. Developers get access to all the necessary sources directly online with single-click ease.

“Make Exportable”

After selecting the layer in your Sketch file, select the “Make Exportable” option in the lower right corner of the screen:

… and actually, that’s all! You do not even need to select specific sizes and choose suffixes. Zeplin will select the necessary settings depending on the type and density of your project. Now you can just export artboard to Zeplin, as you usually do. Use Cmd + E combination or use the “Plugins> Zeplin> Export Selected Artboards …” menu.

When the export is complete, the program will display the finished source. Here’s what it looks like:

The sources are in Zeplin!

Use the “Make Exportable” option if you want the source to be the same size as the corresponding layer. It is a simple and convenient function.

Sources with a transparent background

Quite often, you may need to add padding around the icons. Let us assume that you have a 36×36px icon, but you need to export it to a 48x48px image with a transparent background.

Thus, here comes the “Slice” option in Sketch:

Draw a slice around the icon.

Group icon and slice.

Here is the coolest part: Select the slice and the “Export Group Contents Only” option:

Select “Export Group Contents Only”.

The slice is now exported as a 48×48px image (with a transparent background). Here’s what it looks like in Zeplin:

Finally, the sources have padding.

Remember: by default, slices also have an artboard background color. Make sure the “Include in Export” option is disabled for the artboard background color:

Adjusting the parameters of the artboard background colour.

Maintain the unity of style groups

Zeplin.io normally displays all layers of a sketch file, even if they are grouped. You may want to manage some groups of layers as a single one. It is possible in ver. 1.0! Just add “-g” flag- at the beginning of the layer name. There is also a small plugin that helps to do the same:

“Plugins > Zeplin > Utilities > Exclude Sublayers ”or use the“ Cmd + Shift + X ” hotkeys.

“Exclude Sublayers” plugin (excludes sublayers).

Let’s now test it on the icon that has 8 different layers.

Zeplin.io icon in Sketch.

Now we apply the “Exclude Sublayers” option. It automatically adds “-g-” flag at the beginning of the layer name: