UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Использование Sympli для взаимодействия с разработчиками
Редакція
Редакція

Опубліковано • Оновлено

Использование Sympli для взаимодействия с разработчиками

Взаимодействие с дизайнеров и разработчиков должно быть простым и понятным обеим сторонам. Мы расскажем вам, как тысячи разработчиков и дизайнеров оптимизируют взаимодействие между командами и экономят время на передаче и имплементации дизайна используя https://sympli.io.

Что такое проекты и базовые разрешения в Sympli?

Для того, чтобы начать работу в Sympli прежде всего нужно создать проект. Помимо макетов, проект содержит в себе информацию о платформе и базовое разрешение.

На данный момент, Sympli поддерживает iOS, Android и Web проекты(в обозримом будущем список будет расширяться).

Sympli поддерживает iOS, Android и Web проекты

Sympli поддерживает iOS, Android и Web проекты

Что такое базовое разрешение, лучше всего показать на примере:

Допустим, вы рисуете макеты iOS приложения для iPhone 6. У вас есть следующие варианты размеров артбордов: 375x667, что соответствует разрешению @1x; 750x1334 для @2x; и 1125x2001 для @3x соответсвенно.

Мы рекомендуем рисовать макеты в @1x (или mdpi для Android), к тому же все стандартные шаблоны артбордов в Sketch сделаны как раз в @1x. На тему рисования макетов в @1x есть отличная статья от Brad Wrage, где он подробно описывает почему именно это хорошо и правильно.

Экспорт артбордов в Sympli

Открыть Sympli можно через меню Plugins-Sympli-Export или через сочетание клавиш ⌘+Y. Чтобы экспортировать только определенные артборды, выделите их в рабочей области или в дереве слоев(можно выбрать любой элемент внутри артборда). Или сбросьте выделение для того, чтобы экспортировать все артборды на странице.

Выберите проект из списка или создайте новый проет, и Sympli автоматически сгенерирует визуальные спецификации и ассеты.

Вариант сортировки артбордов: расположите артборды рядами, и в Sympli они отобразятся в “Естественном порядке”, как на вот этой картинке:

Вот так отсортируются в Sympli макеты, расположенные рядами

Вот так отсортируются в Sympli макеты, расположенные рядами

Для ускорения работы, после первого экспорта Sympli запоминает связь между файлом с макетами и проектом, поэтому при последующих экспортах вам не нужно будет выбирать проект из списка, а всего лишь нажать ⌘+Y и потом Enter.

Экспорт ассетов

Экспорт ассетов в Sympli делается очень просто: просто пометьте слой или группу как “Exportable” или сделайте Slice.

На заметку: Для того, чтобы сделать ассет с прозрачными отступами, сделайте Slice, поместите его в группу со слоем или слоями, входящими в ассет и отметьте флажок “Export group contents only”. В таком случае, все слои, не входящие в группу не будут включены в этот Slice.

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

Взаимодействие с командой

После экспорта макетов, вы можете пригласить новых участников в проект по email, указав их адреса через пробел или запятую, либо отправив им ссылку на проект.

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

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

Пригласить новых участников в проект можно не покидая Sketch

Пригласить новых участников в проект можно не покидая Sketch

Так, а дальше?

Дальше, в веб приложении Sympli можно обсуждать макеты с помощью аннотаций — дискуссий, привязанных к конкретной точке макета.

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

В последующих статьях мы расскажем о том, как Sympli помогает разработчикам быстрее имплементировать и поддерживать в актуальном состоянии дизайн в приложениях, используя Sympli плагины для Xcode и Android Studio.

Топ коментарі (0)