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

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

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

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

Как правильно экспортировать объекты с символов в Sketch, символы

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

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

Как правильно экспортировать объекты с символов в Sketch, Zeplin

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

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

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

Как правильно экспортировать объекты с символов в Sketch, наложение иконок

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

Как правильно экспортировать объекты с символов в Sketch, иконки в Zeplin

Надеюсь это помогло! Свободно пишите нам на support@zeplin.io, если у вас есть замечания и предложения. 👋

Идеальный UI при помощи Sketch и Zeplin