Экспорт объектов символов из Sketch в Zeplin

Если вы создаете слой, экспортируемый в Sketch, Zeplin будет генерировать необходимые ресурсы (в разных форматах и масштабах) в зависимости от платформы, над которой вы работаете. Это довольно просто. Хотя, есть несколько советов и трюков, которые могут помочь вам получить максимум от символов в Zeplin.

Делая символы экспортируемыми

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

Одним из самых больших преимуществ использования символов является то, что объекты будут экспортироваться с прозрачным фоном. (Обычно для этого нужно использовать нарезку.) Это отличный способ организовать ваши иконки многократного использования, чтобы разработчики всегда работали с нужным размером.

Подобно всем другим экспортируемым слоям, имя символа становится именем объекта в Zeplin. Если вы используете / для группировки символов, то будет использоваться только последняя часть названия: /some/long/path/icCameraSelected становится icCameraSelected .

Вот, как выглядит элемент экспортируемого символа в Zeplin, в iOS проекте:

Используя вложения

Во вложенных символах, ресурсы также работают при наложении друг на друга. Вот образец вложенного символа, в котором мы используем одну из иконок выше:

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

Теперь при использовании этого символа в своем дизайне вы можете наложить иконку на другую, с правой панели в Sketch.

Без дополнительных усилий ресурсы всех трех иконок теперь должны быть доступны в Zeplin. Вот, как они выглядят в iOS проекте: