Sketch для разработчика
Освоиться и не облажаться
Однажды это происходит с каждым фронтенд-разработчиком. Вместо привычного psd-шника дизайнер присылает файл с расширением .sketch и предлагает скачать триал приложения.
Статья на примерах поможет верстальщику, фронтенду, ю-нейм-ит освоиться со Скетчем. Я расскажу, как узнать размер текста, измерить отступы, экспортировать ассеты.
Разделы не связаны, читайте по порядку или переходите к нужному:
- Совместимость
- Параметры текста
- Измерение размеров и отступов
- Образец цвета
- Скрытие и блокировка слоев
- Экспорт графики
- Советы и хитрости
1. Совместимость
Скетч работает только под OS X. Если у вас Windows или Linux, экспорта в фотошоповский формат нет.
2. Параметры текста
Хитрость: зажмите Cmd, чтобы одним нажатием выделить слой с текстом внутри группы. Другой способ попасть внутрь группы — дабл-клик.
Свойства выделенного текста ищите на панели справа. Панель называется Inspector. Вам нужны поля Size и Line — размер и интерлиньяж, в пикселях.
Другой способ: правый клик → Copy CSS Attributes. CSS-код попадет в буфер обмена.
3. Измерение размеров и отступов
Ширину, высоту и координаты левой верхней точки выделенного объекта ищите справа в Инспекторе.
Чтобы узнать расстояние между объектами, выделите один и с зажатым Alt наведите курсор на другой. Когда курсор в области холста, Скетч показывает расстояние до границ макета.
В случае с текстом, Скетч показывает расстояние до прямоугольника высоты строки. Приятно, что эта высота идентична line-height в CSS — не придется ничего пересчитывать.
4. Образец цвета
Подавите желание найти привычный Color Picker. Выделите объект и нажмите на образец цвета на палитре Fills Инспектора — поле Hex.
Чтобы выбрать слой сквозь группы, зажимайте Cmd.
P. S. А пипетку вызывают шоткатом Ctrl+C или Edit → Pick Color. Только в Скетче ее используют чтобы перекрасить выбранный объект.
5. Скрытие и блокировка слоев
Скрытие. В панели Layers List (слева) наведите курсор на слой или группу, рядом с названием появится глазик.
Блокировка выделенного слоя переключается по Cmd+Shift+L или правый клик → Lock/Unlock Layer.
Как скрыть заблокированный слой? Сколько не наводи на замочек, глазик рядом не появится. Чтобы скрыть, придется разблокировать ¯\_(ツ)_/¯
6. Экспорт графики
Экспорт ассетов — сильная сторона Скетча. Выделите слой или группу и нажмите Make Exportable в Инспекторе (внизу). В панели Export с помощью иконки плюса добавьте варианты экспорта, программа запомнит их. Дальше проблем быть не должно.
7. Советы и хитрости
- Зажимайте Cmd, чтобы выделить слой внутри группы.
- Чтобы увидеть выделенный объект максимально крупно, нажмите Cmd+2. Вернуть Actual Size — Cmd+0.
- С большими файлами Скетч подвисает. Отключите анимацию зума: Preferences → Canvas → Animate Zoom и станет легче.
- Если контуры объекта вдруг стали мыльными, значит вы случайно сдвинули его или холст на дробное количество пикселей. Если отмену делать уже поздно, лучше не сохраняя закройте и снова откройте макет.
- Еще о сохранении. Если открываете макеты из общего Дропбокса, отключите автоматическое сохранение файлов OS X или делайте копию. Иначе рискуете испортить оригинал.
Задавайте вопросы: @romanshamin
