Как начать работать в Sketch на Mac: первый макет экрана

Sketch устроен проще, чем кажется: одно окно, одно полотно и панель свойств справа. Разобраться с основами хватает одного вечера. Шаги ниже проверены на свежей macOS; на более старых системах отличается только оформление окон.

Проверьте систему и скачайте программу

Сначала посмотрите версию macOS: меню Apple в левом верхнем углу, пункт сведений о компьютере. На странице загрузки Sketch указано, какая система нужна последнему выпуску. Если ваша старее, разработчик предлагает загрузить предыдущую версию — она тоже работает, просто без новых функций.

Скачайте архив с официального сайта. Файл весит немного — это настольное приложение, а не редактор в браузере.

Установите приложение правильно

Распакуйте архив двойным щелчком и перетащите приложение Sketch в папку «Программы». Это важно: если запускать его прямо из «Загрузок», обновления будут срываться, а macOS начнёт каждый раз спрашивать разрешение.

При первом запуске система предупредит, что приложение скачано из интернета, — подтвердите запуск. Затем Sketch предложит войти в аккаунт или начать пробный период: для этого понадобится адрес электронной почты, на него придёт письмо с подтверждением.

Создайте документ и артборды

Нажмите создание нового документа. Чтобы появился первый экран, вставьте артборд — в панели справа сразу предложат готовые размеры устройств: iPhone, iPad, настольный экран, формат печати. Для мобильного приложения берите размер современного iPhone, для сайта — ширину 1440 точек.

• артборд — клавиша A;
• прямоугольник — R;
• овал — O;
• текст — T;
• перемещение полотна — пробел с зажатой мышью или двумя пальцами по трекпаду.

Поставьте рядом два-три артборда: главный экран, экран со списком и экран подробностей. Так сразу видно весь путь пользователя, а не отдельную картинку.

Наполните первый экран

Нарисуйте шапку прямоугольником, добавьте заголовок текстом и блок описания. В панели справа задайте точные размеры, отступы и скругления — вводите числа, не подгоняйте мышью. Выравнивание помогают держать направляющие: Sketch сам показывает подсказки, когда элементы встают по одной линии.

Сохраните основные цвета и шрифты как стили: выделите элемент, в панели заливки или текста выберите сохранение стиля и дайте ему понятное имя — «Основной», «Фон», «Заголовок». Дальше достаточно выбирать стиль из списка, и оттенки не расползутся по макету.

Соберите кнопку символом

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

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

Свяжите экраны прототипом

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

Выгрузите картинки и отправьте макет

Выделите иконку или артборд и в нижней части правой панели добавьте варианты экспорта: PNG в одинарном и двойном размере для экранов с высокой плотностью, SVG для векторной иконки, PDF для печати. Нажмите кнопку экспорта и выберите папку — все варианты сохранятся за один раз.

Чтобы показать макет коллегам, сохраните документ в рабочее пространство Sketch и отправьте ссылку: получатель откроет его в браузере, оставит комментарии и скачает нужные картинки. Если командной подписки нет, передайте сам файл документа или выгрузите экраны в PDF. Готово: первый макет собран, иконки выгружены, прототип работает.

Если что-то пошло не так