Как сделать дизайн идеальным, а вашего разработчика счастливым? http://ux.pub/kak-podruzhit-dizajnera-i-verstalshhika-zeplin-com/ Одно из фундаментальных преимуществ Sketch состоит в том, что он позволяет создавать макеты в том виде, в котором они будут встроены в код. Все дизайнеры пугаются требований разработчиков: используй тот же отступ, тот же цвет, все элементы должны быть одинакового размера, и т. д. Для выполнения данных требований, нам нужно найти все “одинаковые” элементы и одновременно их править. Очевидно, чем больше ваш проект, тем больше усилий вы потратите на его завершение. Мы разработали свод правил, соблюдая которые, вы можете не переживать - ваш макет всегда будет в идеальном порядке.
Шаг 1. Установите сетку рабочей области
Мы часто используем Bootstrap для веб проектов и стандартную сетку для устройств из шаблона.
Шаг 2. Стандартизация при помощи стилей
Вы должны избегать случайных цветов, шрифтов и элементов. Как это сделать?
Цвета
Прежде всего создайте палитру документа. Это поможет вам придерживаться соответствующих цветов при создании новых элементов. Как переместить палитру из одного документа на другой, вы можете прочесть в предыдущей статье.
Стили шейпа
Стиль шейпа содержит цвет, заполнение, прозрачность, границы, и т. д. Также, я использую стили для сохранения цветов и стиля кнопки. Вы можете изменить цвет всего приложения в один клик.
Стиль шрифта
Работает также, как и для текстового стиля. От чего ваш разработчик будет счастлив, а вы не будете переживать из-за неправильных цветов шрифта? Потому, что он не будет использовать дополнительные инструменты, он не потеряет прозрачность, цвет или тень. Он откроет Zeplin и сделает это: Итак, используйте корректные имена для стилей и используйте стили при создании текста и кнопок.
Шаг 3. Шаблон при помощи символа
Символы дают возможность использовать один и тот же объект в нескольких частях макета и даже создавать шаблон из разных объектов с разным контентом.
Иконки
Лучше всего иметь иконки одинакового размера. Создавайте универсальный набор иконок, меняйте их, изменяйте и просто наслаждайтесь :)Затем сделайте символ экспортируемым и используйте их во всех приложениях. Отныне вам не нужно думать о нарезке. Разработчик сможет скачать вашу прекрасную иконку в svg и в 3-х вариантах размеров - @1x, @2x, @3x:
Элементы UI
Вы можете создавать более сложные объекты, такие как UI-киты, и делать несколько копий символа с разными данными. Упорядочивайте ваши текстовые поля в зависимости от их функций, и наслаждайтесь разнообразием! 
Шаг 4. Создание гайдлайна
Шаг 5. Загрузите в Zeplin
Проверьте имена, размеры и экспортируемые символы 
Перевод статьи Cadabrastudio
Топ коментарі (1)
Добре що є фігма)