Динамические кнопки с иконками на основе символов Sketch

Как сделать символ кнопки с иконками с возможностью повторного использования.

Прокрутите вниз, чтобы скачать Sketch файла.

Я люблю Sketch. После долгой работы с Photoshop и Fireworks, Sketch поменял рабочий процесс многих дизайнеров. Мне очень понравились последние апдейты Sketch, которые включали вложенные символы, опции переопределения символов и опции ресайза. Все эти опции очень упростили жизнь дизайнеру. Но тем не менее, я хочу от них большего! В моем случае, я хотел создать кнопку с заголовком и иконкой. Конечно, это должен быть символ с переопределением. Я хотел иметь возможность дублировать эту кнопку и переопределять как иконку, так и заголовок, при том, что все это должно располагаться в центре кнопки и вместе. Сначала, я пытался достичь этого путем размещения иконки в правой части заголовка. Редактирование текста символа при помощи переопределения Структура и настройка символа. Не забудьте установить выравнивание по-центру! Это заставило меня задуматься. А что, если сделать тоже самое но с иконкой слева. Должно быть довольно просто, но не так быстро. Когда вы меняете текст, расширение заголовка влияет только на объект справа по определенной причине. Результат разочаровал меня и я практически сдался. Редактирование символа при помощи Overrides не сдвинет положение иконки...

...

Но потом меня осенило!

А что, если “обмануть” Sketch? Что если перевернуть группу “Label” (-180°), что тогда произойдет? Это именно то, чего я ожидал. На шаг ближе! Теперь я получил то поведение, которое хотел. Единственное, что остается сделать, это перевернуть (-180°) обратно, так же? Да, это оно!

Бонус

• Если иконка переворачивается “с ног на голову”, вы можете перевернуть ее (-180°) так же, как и текст…
• Замените иконку символом с фиксированным соотношением сторон. Затем вы сможете легко заменить иконку при помощи секции Symbol Override.
• Ширина/высота кнопки можно менять.

Структура и настройка символа

Успех

Все остается на своих местах... ... и его можно ресайзить!

Осторожно

Если вы работаете с Zeplin, у вас могут возникнуть проблемы с направляющими. Zeplin не очень хорошо работает с элементами, которые ротировались. Посмотрите на файл примера и экспортируйте его в Zeplin. Конкретно для моей команды это не является большой проблемой. Я не знаю, как новые обновления SKetch повлияют на этот хак. Я не убеждаю вас, что это правильно. Если у вас есть другой способ, поделитесь, пожалуйста! Я очень хочу, чтобы эту фичу корректно внедрили в Sketch в будущем, но на данный момент, она мне очень помогает в таком виде!

Скачать

Вы можете найти мой файл Sketch тут. Вы можете взять его за основу для своих кнопок.

Заключение

Это моя первая попытка в написании инструкции, если ее так можно назвать. Дайте знать, если у вас есть какие-либо замечания или предложения! http://ux.pub/kak-ispolzovat-resajz-simvolov-v-sketch-po-polnoj/

Перевод статьи Aleksandr Pasevin