Sketch: проектирование интерфейсов и дизайн-систем

Sketch решает задачи проектирования интерфейсов: в нём собирают экраны приложений и сайтов, строят адаптивные блоки, создают библиотеки компонентов, связывают экраны в интерактивные прототипы и готовят макеты к передаче разработчикам. Программа особенно полезна продуктовым и UI/UX-дизайнерам, которым важны точная векторная геометрия, системная работа со стилями и повторно используемыми элементами, а также понятный переход от макета к спецификациям и экспортируемым ресурсам. Для одиночной работы можно хранить документы локально, а командный сценарий строится вокруг Workspace: редакторы меняют макеты в приложении для macOS, а коллеги открывают документы в браузере, комментируют, проверяют размеры и свойства, смотрят версии и скачивают подготовленные ресурсы.

Что именно удобно делать в Sketch

Sketch ориентирован не на обработку фотографий и не на верстку готового сайта, а на подготовку цифрового продукта до этапа разработки. Базовая единица работы — слой: текст, фигура, векторный контур, изображение, Frame, Symbol или другой контейнер. Из слоёв собирают отдельные состояния и экраны, из экранов — пользовательский поток, а повторяющиеся элементы выносят в компоненты и библиотеки. Поэтому программа хорошо подходит для интерфейсов, где один и тот же набор кнопок, полей, карточек и типографики должен оставаться согласованным на десятках экранов.

Другие инструменты: ФотоМАСТЕР.

Практический рабочий цикл обычно выглядит так: дизайнер создаёт Frames нужных размеров, размещает в них контент, задаёт поведение размеров и отступов через Layout и Stack Layout, превращает повторяющиеся блоки в Symbols, связывает их с Text Styles, Layer Styles и Color Variables, после чего на вкладке Prototyping задаёт переходы, Overlays и реакции на действия. Когда макет готов, разработчик открывает тот же документ через Inspect, получает размеры, цвета и CSS-представление свойств, а нужные иконки и изображения экспортирует в заданных форматах. Такой цикл можно вести в одном документе или разделить по библиотекам и продуктовым файлам.

Sketch остаётся векторным редактором: прямоугольники, окружности, произвольные пути и текст сохраняют редактируемость. Это принципиально для интерфейсов, потому что изменение размера кнопки, иконки или карточки не должно превращаться в масштабирование растровой картинки. При этом обычные PNG, JPG, GIF, TIFF и WebP можно помещать в макет как изображения, а SVG — как вектор. PDF импортируется постранично, а AI и PSD открываются с ограничением: содержимое попадает в документ как сведённый слой, поэтому рассчитывать на полноценное восстановление исходной структуры таких файлов не стоит.

В программе есть и локальный, и облачный сценарий хранения. Локальный .sketch-файл удобен, когда документ должен оставаться на Mac или передаваться через собственное хранилище. Workspace нужен для синхронизации, браузерного просмотра, комментариев, версий, библиотек и совместной работы. Это не означает, что основной редактор стал браузерным: полное создание и изменение макетов выполняется в приложении для macOS, а веб-часть сосредоточена на совместной работе, просмотре, инспекции и выдаче ресурсов.

Установка и начало работы

Для актуальных выпусков Sketch нужен Mac. Конкретное требование к версии macOS зависит от выбранного выпуска, поэтому на старом компьютере разумно сначала подобрать совместимую версию приложения, а затем уже переносить рабочие файлы. Разработчик не задаёт фиксированного минимума по оперативной памяти или процессору: реальная нагрузка определяется сложностью документов, количеством больших изображений, эффектов, Symbols и одновременно открытых страниц. Виртуальные машины официально не считаются поддерживаемой средой, что важно для команд, пытающихся организовать доступ к Sketch через удалённый Windows-сервер.

После первого запуска можно начать с пробного периода, войти в существующий аккаунт или использовать лицензию только для приложения. Подписка даёт Workspace и связанные с ним веб-функции; Mac-only license предназначена для работы в самом редакторе и локального хранения документов, без командного Workspace и реального совместного редактирования. Для практики это различие важнее названия тарифа: если макеты должны одновременно править несколько дизайнеров, комментировать менеджеры и инспектировать разработчики в браузере, нужен сценарий с Workspace.

Новый документ создаётся командой File > New или сочетанием ⌘N. В Workspace Window та же операция доступна через кнопку с плюсом. Здесь же видны Recents, Libraries, Templates, Resources, рабочие пространства, папки и My Drafts. Двойной щелчок по миниатюре открывает документ; File > Open from Workspace или ⌘O открывает тот же список из редактора.

Если документ должен жить в Workspace, обычная команда File > Save открывает окно выбора рабочего пространства и папки. После первого сохранения изменения синхронизируются в фоне. Для локального файла используется Save to Your Mac либо соответствующая команда в меню File. Полезно решить это в начале проекта: смешанный процесс, когда часть команды работает с локальными копиями, а часть — с Workspace-документом, быстро создаёт неочевидные расхождения версий.

Что настроить перед первым макетом

В Sketch > Settings имеет смысл проверить как минимум Canvas, Layers, Libraries и Plugins. В Canvas задаётся профиль отображения цветов, поведение масштабирования, шаг nudging и вид направляющих. В Layers находятся параметры Pixel Fitting, импорта PDF, поведения при рисовании и порядок Frames при экспорте в PDF. В Libraries можно включить только те библиотеки, которые нужны текущим проектам: большой список активных библиотек замедляет Insert и Command Bar, поэтому включать всё подряд невыгодно.

Ещё один практический выбор — откуда установлена программа. Версия из Mac App Store имеет ограничения безопасности: в ней нельзя устанавливать и использовать обычные сторонние плагины, а также недоступен импорт файлов Figma .fig. Если в процессе нужны плагины или миграция из Figma, используют сборку Sketch с сайта разработчика. Это не влияет на базовое рисование и редактирование, но влияет на расширяемость рабочего процесса.

Интерфейс: Canvas, Layer List, Toolbar и Inspector

Основное окно Sketch построено вокруг Canvas. Слева находится Layer List, сверху — контекстная Toolbar, справа — Inspector. Canvas не ограничен заранее выбранным листом: на нём можно разложить десятки экранов и рабочих блоков, а для конкретных размеров интерфейса используются Frames. Когда содержимого много, помогает Minimap: он появляется в правой нижней части рабочей области и позволяет быстро перейти к удалённому участку макета.

Layer List отражает структуру документа, а не просто список объектов. Порядок слоёв определяет их наложение; Frames и группы можно разворачивать, вложенные элементы — переименовывать, скрывать и блокировать. На больших экранах особенно полезен поиск слоёв: корректные имена вроде Button/Primary, Card/Image и Header/Nav экономят больше времени, чем ручное раскрытие десятков контейнеров. Имена также имеют значение при handoff и работе с Symbols: небрежная структура макета почти всегда превращается в небрежную структуру спецификации.

Toolbar меняется в зависимости от выделения. Через неё доступны Insert, инструменты фигур и Frames, переключение между Canvas и Components View, масштаб, Preview и действия совместной работы. Если команда в меню запомнилась плохо, её проще вызвать через Command Bar: нажмите ⌘K, введите часть названия команды и выберите действие. Это удобно для редко используемых операций — например, добавления Stack Layout, замены Style или перехода к конкретному инструменту.

Inspector — главный источник точных параметров. Для обычного слоя здесь отображаются координаты, размеры, поворот, настройки Layout, Style, Opacity, Corners, Fills, Borders, Shadows, Effects и Export. Для Frame добавляются свойства контейнера и прототипа; для Symbol instance — доступные overrides; для текста — шрифт, кегль, межбуквенное и межстрочное расстояние, выравнивание и параметры Text Style. Из-за контекстного поведения один и тот же Inspector выглядит по-разному, поэтому при поиске «пропавшего» параметра первым делом надо проверить, действительно ли выделен нужный тип слоя.

У Inspector есть ещё одна важная роль: он показывает поведение размеров, а не только текущие пиксели. Это отличает интерфейсный макет от статической иллюстрации. Например, карточка шириной 320 пунктов может иметь Fixed width, растягиваться Relative относительно родителя или, находясь внутри Stack, использовать Fill. Текст внутри той же карточки может быть Fit по высоте и расширять контейнер. Когда эти отношения заданы правильно, изменение копирайта или размера экрана не требует вручную переставлять каждый соседний слой.

Документ, Pages, Frames, Groups и Graphics

Документ Sketch можно делить на Pages. Это не страницы сайта в буквальном смысле, а крупные рабочие разделы внутри файла. Практичная схема для продукта — отдельные Pages для основных пользовательских сценариев, компонентов, исследований и архивных вариантов. Слишком много Frames на одной Page усложняет навигацию и может замедлять отображение; разработчик Sketch прямо рекомендует распределять крупные наборы экранов по нескольким Pages, если один холст становится тяжёлым.

Frame — основной контейнер для интерфейсного экрана и для адаптивных блоков. Инструмент вызывается клавишей F, через Insert > Frame или Command Bar. Frame может быть верхнего уровня, то есть представлять экран устройства или страницу сайта, а может лежать внутри другого Frame и описывать карточку, панель, область списка или любой самостоятельный блок. В отличие от простой Group, Frame имеет собственные настройки размеров, обрезки содержимого и поведения вложенных слоёв.

Чтобы превратить уже выделенные слои во Frame, используется ⌘F. Если границы контейнера должны точно охватить содержимое, помогает Layer > Size to Fit или ⇧⌘F. Двойной щелчок по границе Frame также подгоняет размер по содержимому для выбранной оси, а по угловому маркеру — сразу по ширине и высоте. Это особенно удобно после добавления или удаления элементов в блоке, который ещё не переведён на Stack Layout.

Group остаётся полезной для простого объединения слоёв, когда контейнер не должен управлять адаптивным поведением. Однако для интерфейсных конструкций Frame обычно предсказуемее: он даёт Clip content, sizing и лучше вписывается в Stacks. Graphics используют для самостоятельной векторной композиции, которую нужно воспринимать как единое графическое содержимое. Выбор контейнера влияет на последующую раскладку: если всё без разбору собирать Groups, позже придётся больше времени тратить на перенос в Frames и настройку размеров.

Позиционирование и точность

Sketch измеряет слои в пунктах macOS; в handoff один пункт обычно соответствует CSS-пикселю на масштабе 1x. Для интерфейсов полезно держать геометрию на целых значениях, особенно для тонких линий и иконок. Pixel Fitting в Settings помогает избегать случайных дробных координат при перемещении и изменении размеров. Если же макет сознательно использует половинные или четвертные координаты, настройку можно изменить — векторный редактор поддерживает разные варианты привязки точек.

Выравнивание не требует вычислять координаты вручную. При выделении нескольких слоёв Inspector показывает Align и Distribute. Для точной проверки расстояния достаточно выделить слой и навести курсор на соседний с удержанием служебной клавиши, а направляющие и rulers помогают держать сетку. Внутри Stack ручное распределение чаще всего вообще не нужно: там позиционированием управляют gap, padding, alignment и distribution.

Векторные инструменты, формы и маски

Для интерфейсного дизайна Sketch даёт два уровня работы с формами. Простые примитивы — Rectangle, Oval и другие базовые фигуры — удобны для контейнеров, кнопок и геометрических иконок. Когда нужна собственная форма, инструмент Vector вызывается клавишей V или через Insert. Клик создаёт точку, следующий клик — сегмент, а клик с протягиванием сразу создаёт кривую Безье с управляющими ручками. Замкнуть контур можно повторным кликом по первой точке.

Войти в режим редактирования готовой формы можно двойным щелчком или клавишей Return. Точки выделяются по одной или с ⇧, а Tab переключает выделение на следующую точку. В Inspector доступны типы узлов: Straight, Mirror angle and length, Independent и Mirror angle. Они определяют, связаны ли ручки кривой и как меняется касательная. Для иконок полезно помнить про Radius у прямых точек: скругление можно задавать без ручного построения дуги, причём у разных углов значения могут отличаться.

Boolean Operations нужны, когда контур проще собрать из нескольких фигур. Union объединяет области, Subtract вычитает верхнюю форму, Intersect оставляет пересечение, Difference — области, принадлежащие не всем фигурам одновременно. Пока результат остаётся Boolean Group, исходные части можно отредактировать. Это предпочтительнее раннего Flatten: сохраняется возможность поменять радиус, положение или размеры исходных фигур. Flatten имеет смысл ближе к финалу, когда нужен единый путь для экспорта или точного редактирования узлов.

Команда Layer > Convert to Outlines превращает обводку в самостоятельную форму. Она полезна при подготовке иконок, если внешний формат или дальнейшая обработка не должны зависеть от параметра Border. Для расширения или сжатия контура есть Layer > Path > Offset: в отдельной панели можно предварительно увидеть результат и при необходимости создать дубликат. Scissors помогает разрезать путь, а Join — соединять открытые контуры.

Маски без разрушения исходного изображения

Маска в Sketch определяет видимую область слоёв выше неё. Для обычной контурной маски создайте форму, расположите её под теми слоями, которые должны обрезаться, и выберите Layer > Mask > Use as Mask. Быстрый вариант — ⌃⌘M. Поскольку маска влияет на лежащие выше слои, её вместе с содержимым лучше сразу помещать в Group или Frame: иначе добавленный позже соседний слой неожиданно тоже может попасть под обрезку.

Если выделено несколько слоёв, Layer > Mask > Mask Selection группирует их и превращает нижний из выделенных объектов в маску. Для изображения есть отдельный вариант Mask Image, удобный для быстрого кадрирования. Когда слой внутри группы должен игнорировать маску, применяется Ignore Underlying Mask. Маски бывают outline и alpha: второй режим учитывает прозрачность самого маскирующего содержимого. Такой подход удобен для сложных вырезов, но требует аккуратного порядка слоёв.

Типичная ошибка — пытаться получить окончательную форму экспортом PNG, а затем возвращать её в документ. Пока задача решается вектором, маской или Boolean Group, редактируемость лучше не терять. Растровый слой уместен для фотографии, текстуры или уже готового изображения; для иконки, логотипного знака внутри макета или геометрического UI-элемента предпочтительнее сохранять вектор.

Текст и типографика

Текстовый слой создаётся инструментом Text. Клик по Canvas создаёт текст, размер которого подстраивается под содержимое; протягивание формирует ограниченную область, внутри которой строки переносятся. В Inspector доступны семейство и начертание шрифта, размер, character spacing, line height, paragraph spacing, горизонтальное и вертикальное выравнивание, подчёркивание, зачёркивание и преобразование регистра. Uppercase и lowercase применяются неразрушающе: исходный текст не переписывается, поэтому регистр можно вернуть без повторного ввода.

По ширине и высоте текст может быть Fit, Fixed или Relative. Fit удобен для подписи кнопки: слой растёт вместе с количеством символов. Fixed нужен для абзаца или карточки, где ширина должна оставаться постоянной, а текст переноситься. Relative связывает размер с родителем. Внутри Stack текстовые слои участвуют в раскладке как обычные элементы, поэтому сочетание Fit для текста и Fit для контейнера позволяет построить кнопку, которая автоматически подстраивается под локализацию.

Если шрифт поддерживает OpenType, дополнительные возможности включаются через Text > OpenType Features. Для variable fonts параметры переменных осей появляются в Inspector. Не все шрифты одинаково ведут себя при передаче документа, поэтому в командном проекте важно заранее определить семейства и допустимые начертания, а не использовать случайные локальные файлы.

Text Styles сохраняют набор типографических параметров и применяют его к множеству слоёв. Создать стиль можно из выделенного текстового слоя через Appearance или в Components View. Для нового Text Style можно решить, должны ли цвет и alignment входить в стиль. Это полезно, когда один и тот же размер и межстрочный интервал используются и для светлой, и для тёмной темы: цвет тогда логичнее оставить Color Variable, а не жёстко включать в типографический стиль.

Если в документе нет нужного шрифта, Sketch показывает Missing Fonts. Открыть управление можно через File > Document Settings и вкладку Fonts. Кнопка Replace… позволяет выбрать замену для семейства и начертания. Пока шрифт отсутствует, текст может отображаться через предварительное представление, но нормально редактировать такой слой нельзя. Если missing font приходит из Library, исправлять его надо в исходном библиотечном документе, а потом обновлять Library в потребляющем файле.

Шрифты можно встраивать в документ, если лицензия конкретного шрифта разрешает такое распространение. Это помогает сохранить внешний вид Workspace-документа для коллег, у которых файл шрифта не установлен. Но встраивание не отменяет лицензионных ограничений и не должно использоваться как способ «раздать» коммерческий шрифт без разрешения правообладателя.

Цвет, заливки, границы и эффекты

В Appearance можно комбинировать несколько Fills, Borders, Shadows и Effects. Для интерфейсного дизайна полезно относиться к этому как к стеку свойств: порядок имеет значение, а лишние эффекты увеличивают вычислительную нагрузку. Solid fill подходит для большинства поверхностей; градиенты дают более сложное распределение цвета; image fill позволяет заполнить форму изображением, не превращая её в отдельный Image layer.

Color Picker принимает привычные значения цвета, а значение можно копировать в разных форматах. На уровне документа Sketch поддерживает sRGB и Display P3. Профиль по умолчанию задаётся в Settings, а конкретный документ можно переключить отдельно. Здесь важно различать Assign и Convert. Assign меняет интерпретацию тех же RGB-значений в другом профиле, поэтому видимые цвета могут измениться. Convert пересчитывает значения, стараясь сохранить внешний вид. При переводе из Display P3 в sRGB часть особенно насыщенных цветов неизбежно выходит за меньший цветовой охват, поэтому такую конверсию лучше делать осознанно и проверять критичные фирменные оттенки.

Shadows и Inner Shadows применяются к слоям как параметры, а не как отдельные растровые объекты. Для современных интерфейсов Sketch также предлагает Effects: Glass, Fade, Layer Blur, Background Blur, Motion Blur и Zoom Blur. Glass создаёт эффект матового стекла и имеет автоматический режим, ориентированный на интерфейсы Apple, а в Custom можно отдельно регулировать blur, distortion, depth, chromatic aberration, brightness, saturation и specular highlights. Fade постепенно снижает непрозрачность по линейной или радиальной схеме без отдельной маски.

Background Blur размывает содержимое позади слоя и подходит для панелей и оверлеев. Layer Blur размывает сам слой. Motion Blur вытягивает изображение в одном направлении с заданным углом, Zoom Blur расходится от выбранной точки. Эти эффекты полезны для визуальной демонстрации состояний, но их не стоит использовать как бесплатный ресурс: несколько больших размытий, наложенных друг на друга, требуют заметно больше памяти и вычислений. Если тяжёлый документ начинает тормозить, именно blur и сложные shadow-цепочки входят в список первых кандидатов на упрощение.

Работа с изображениями

Изображение можно перетащить на Canvas, вставить из буфера или импортировать через команды приложения. После размещения его можно масштабировать, кадрировать, применять маски, эффекты и экспортные параметры. Если геометрия слоя уже настроена, а исходную картинку нужно заменить, удобнее не удалять слой, а вызвать контекстное Replace Image. Ещё быстрее — удерживать ⌘ и перетащить новый файл на существующий image layer или image fill.

Команда Reset to Original Size возвращает исходные размеры изображения. Для тяжёлых документов есть Layer > Image > Minimize File Size, а для пакетного уменьшения встроенных изображений — File > Reduce File Size…. Sketch старается уменьшить данные в соответствии с отображаемым размером. После такой оптимизации не следует рассчитывать на безболезненное увеличение изображения в несколько раз: потерянное разрешение обратно не появится.

Анимированные GIF и WebP импортируются только первым кадром. Это ограничение важно при макетах, где дизайнер пытается показать реальную анимацию через вставленный файл: для поведения интерфейса лучше использовать инструменты прототипирования или отдельный видео/анимационный сценарий в инструменте, который действительно поддерживает нужный тип медиа.

Stack Layout и адаптивные блоки

Stack Layout — основной механизм для блоков, которые должны реагировать на изменение содержимого и размера контейнера. Stack представляет собой Frame с дополнительными правилами раскладки. Его можно добавить к существующему Frame или Group, к набору выделенных слоёв либо создать на пустом Frame. Быстрые команды — ⌘L и ⇧S; через меню используется Arrange > Stack > Add Stack Layout, а в Inspector есть кнопка Add Stack Layout.

В Stack задаются direction, wrap, alignment, distribution, gap и padding. Вертикальное направление складывает элементы в колонку, горизонтальное — в строку. Wrap переносит переполняющиеся элементы на новую строку или колонку, если у контейнера есть граница, относительно которой можно определить переполнение. Alignment управляет положением по основной и поперечной оси, а distribution предлагает Space Between, Space Evenly и Space Around. Padding задаёт внутренние отступы контейнера, gap — расстояние между соседними элементами.

Fixed, Fit, Fill и Relative

Смысл Stack раскрывается через sizing. Для Stack, который не вложен в другой Stack, доступны Fixed, Fit и Relative. Fixed сохраняет заданный размер. Fit растёт или сжимается по содержимому. Relative меняет размер относительно родительского Frame или Group. Если вручную потянуть контейнер, который был Fit, он переключится в Fixed — это частая причина, почему «автоматический» блок внезапно перестал подстраиваться.

Для вложенного Stack добавляется Fill: контейнер занимает доступное место в родительском Stack. Если несколько вложенных блоков имеют Fill, свободное пространство распределяется между ними. У элементов внутри Stack есть Fixed, Fill и Relative; текст может также использовать Fit. Relative задаётся долей оставшегося пространства. Например, после фиксированного сайдбара два блока с равными относительными долями поделят оставшуюся ширину, а не всю ширину родителя.

Для осей без Fixed можно задать minimum и maximum size. Переключатель Constrain Size открывает поля min/max. Это позволяет, например, сделать колонку растягиваемой, но не уже 240 и не шире 420 пунктов. Ограничения особенно полезны для веб-макетов: без них Fill может превратить текстовую колонку в нечитабельно широкую полосу на большом экране.

Параметр Ignore stack layout исключает элемент из обычного потока и позволяет расположить его независимо — аналог абсолютного позиционирования внутри контейнера. Preserve space when hidden оставляет за скрытым элементом его место. Последнее полезно для переключаемых состояний, где соседние элементы не должны прыгать при скрытии и показе одного слоя.

Практика: адаптивная карточка

Создайте Frame для карточки и положите внутрь изображение, заголовок, описание и строку действий. Превратите Frame в вертикальный Stack. Для внешнего контейнера задайте Fixed или Relative width и Fit height. Изображению установите Fill по ширине и фиксированную высоту. Текстовому блоку оставьте Fit по высоте. Строку действий сделайте вложенным горизонтальным Stack: основному тексту или левой группе — Fill, кнопке — Fixed или Fit. После этого длинный заголовок увеличит высоту карточки, кнопка останется справа, а изменение ширины карточки не потребует ручного перестроения всех слоёв.

Если элементы должны переноситься, включите Wrap и задайте ширину контейнера. Проверяйте несколько предельных состояний: короткий и длинный текст, минимальную допустимую ширину, максимум и скрытые элементы. Хороший Stack проверяется не по исходному красивому состоянию, а по тому, насколько предсказуемо он переживает неудобный контент.

Symbols, Components View и Overrides

Symbol — повторно используемый компонент. У него есть Source и instances. Изменение Source распространяется на instances, но конкретный экземпляр может иметь разрешённые overrides: текст, изображения, цвета, стили и вложенные Symbols. Это позволяет держать единый каркас кнопки или карточки и при этом менять содержимое каждой копии без её отсоединения от источника.

Components View собирает локальные Symbols, Text Styles, Layer Styles, Color Variables, Frame Templates и Graphic Templates в одном месте. Переключение между Canvas и Components View выполняется через кнопку слева в Toolbar или сочетаниями ⌃1 и ⌃2. Внутри Components View есть фильтры по типу компонентов и поиск. Для дизайн-системного документа этот экран фактически становится панелью управления компонентами.

Чтобы создать Symbol, выделите готовую конструкцию и используйте соответствующую команду создания компонента. После этого экземпляры можно вставлять через Insert, Components View или Library. Важно продумать структуру Source до массового размножения. Если внутри кнопки случайно осталось несколько лишних групп, ненужные absolute-слои или дублирующиеся фоны, все экземпляры унаследуют эту сложность.

Overrides показываются в Inspector для выбранного instance. Sketch группирует их по типу: nested Symbols и Hotspots, текстовые значения и атрибуты, Layer Styles, изображения и цвета. При наведении на override соответствующие слои подсвечиваются на Canvas, что помогает понять, к какой части сложного компонента относится поле. Если нужно изменить конкретный глубоко вложенный слой, можно выбрать его через ⌘-клик или постепенно войти в иерархию двойными кликами.

Скрытие слоя внутри instance тоже может быть частью варианта. В Layer List достаточно выключить видимость нужного дочернего слоя. Это полезно, когда один Symbol описывает карточку с опциональным бейджем, иконкой или дополнительной строкой. Однако слишком универсальный Symbol с десятками необязательных веток становится труднее поддерживать, чем несколько ясно названных вариантов. Sketch даёт механизм, но архитектуру компонентов всё равно приходится проектировать.

Стили, Color Variables и Libraries

Компоненты решают структурную повторяемость, а Styles и Variables — повторяемость визуальных параметров. Layer Style сохраняет оформление слоя: заливки, границы, тени и другие свойства Appearance. Text Style хранит параметры текста. Color Variable связывает цвет или градиент с именем. Если один и тот же брендовый оттенок используется в десятках компонентов, правильнее привязать их к переменной, чем вручную вводить одинаковый HEX в каждом месте.

Color Variable создаётся из color well в Inspector, из Components View или через Edit > Find and Replace Color. В панели цвета нажмите добавление переменной, задайте имя и сохраните. После применения переменной к Fills, Borders и другим цветовым свойствам изменение её значения синхронно отражается на всех связанных слоях. Переменные можно хранить локально в документе или публиковать через Library.

Именование лучше строить по назначению, а не по текущему оттенку. Text/Primary и Surface/Accent переживают редизайн лучше, чем Gray900 и Blue500, если речь идёт о семантических ролях. При этом для палитры примитивов числовая шкала вполне уместна. В Components View переменные можно группировать, а символ / в имени формирует иерархию. Это же правило удобно применять к Symbols и Styles.

Color Variables доступны и для handoff: разработчик видит связанное имя вместо случайного значения. Из веб-приложения цветовые переменные, Text Styles и Layer Styles можно выгружать как design tokens. Цветовые токены доступны в CSS или JSON, а Text и Layer Styles экспортируются в JSON. Для цвета можно выбрать RGB, HEX или HSL. Такой экспорт не заменяет полноценный токен-пайплайн компании, но даёт согласованный машинно-читаемый источник непосредственно из макета.

Когда нужен Library-документ

Любой Sketch-документ можно превратить в Library. В текущем интерфейсе это делается через File > Add as Library; для уже подготовленного библиотечного документа — File > Enable Library. В Settings > Libraries отображаются Workspace, сторонние и локальные библиотеки. Их можно включать и выключать отдельно. Локальная библиотека — обычный .sketch-файл, который приложение должно уметь найти на диске; если его переместить или переименовать, появится предупреждение о missing Library.

Library имеет смысл, когда компоненты должны использоваться в нескольких продуктовых документах. В ней размещают Symbols, Styles, Variables и шаблоны, публикуют изменения, а рабочие макеты получают обновления. Если Library изменилась, в Toolbar появляется уведомление. Через Component updates можно посмотреть, какие компоненты обновились, снять галочки с нежелательных изменений и применить остальные. Это важнее автоматического «обновить всё»: изменение базового Symbol способно затронуть десятки экранов, поэтому крупные изменения лучше просматривать до применения.

Starred versions помогают контролировать распространение библиотечных изменений. Если потребители настроены на starred version, обычное сохранение новой версии Library не обязательно должно сразу изменить их компоненты; новая контрольная версия публикуется осознанно. В командах это удобно для стабильного канала: разработчики и продуктовые файлы получают проверенные изменения, а эксперименты остаются в промежуточных версиях.

Если связь с библиотекой больше не нужна, Symbol можно сделать локальным. В зависимости от контекста используется Make Local или Unlink from Library. Это не то же самое, что просто отключить библиотеку в Settings: отключение убирает её из Insert и Components View, но уже вставленные instances остаются связаны с библиотечным происхождением. Локализация превращает конкретный компонент в самостоятельный объект текущего документа.

Document Settings

Команда File > Document Settings… открывает параметры, относящиеся именно к текущему файлу. Здесь можно управлять названием и типом документа, встроенными шрифтами и Libraries. Документ можно сделать обычным рабочим файлом, Library или Template. Template полезен не для общих компонентов, а как стартовая структура: например, новый файл проекта уже содержит Pages, базовые Frames, сетки и служебные блоки.

Разделение уровней настроек помогает избегать путаницы. Sketch > Settings меняет поведение приложения в целом, а Document Settings — конкретного документа. Если один проект должен работать в sRGB, а другой в Display P3, это документная настройка. Если хочется изменить глобальный цветовой профиль для новых документов, это уже Settings.

Прототипирование: Links, Hotspots, Overlays и прокрутка

Sketch позволяет превратить набор Frames в кликабельный сценарий без переноса макета в отдельный прототипировщик. Базовая связь — Link: выделите слой, создайте прототипную связь и укажите целевой Frame. Hotspot — отдельная невидимая интерактивная область; он удобен, когда зона нажатия должна быть больше визуального элемента или не совпадает с его геометрией. Для прототипа можно определить несколько Start Points, чтобы запускать разные пользовательские сценарии из одного документа.

Триггеры включают не только обычный Tap. Для Overlays доступны Hover, Press и Toggle on Tap. Это позволяет показать меню по наведению, состояние нажатия или переключаемую панель. Важно не пытаться моделировать сложную бизнес-логику теми средствами, которые предназначены для демонстрации поведения интерфейса. Sketch хорошо показывает переходы, состояния и типовые взаимодействия, но не превращает прототип в работающий продукт с настоящей базой данных.

Overlays

Overlay — Frame, который появляется поверх текущего экрана. Он подходит для модальных окон, dropdown, popover, контекстных меню и уведомлений. Существующий Frame можно пометить как overlay в Prototyping panel. Затем через Aligned to View открывается Overlay Options, где задаются позиция, backdrop и поведение при взаимодействии за пределами оверлея. Второй способ — связать Link или Hotspot с подходящим небольшим объектом вне исходного Frame; Sketch может автоматически оформить его как Overlay.

В Overlay Options доступны Align to View и Align to Layer. В первом случае позиция привязана к области просмотра; во втором — к слою-триггеру. Девятиточечный Origin определяет точку привязки, Offset сдвигает оверлей относительно неё. Backdrop может иметь цвет и blur. В Interactions задаётся, что происходит при клике вне оверлея: ничего, закрытие или разрешение взаимодействия с элементами под ним. Для конкретной ссылки эти значения можно переопределить, не меняя базовые настройки Overlay.

Прокручиваемые прототипы строятся на Frames. Можно создать scrolling area внутри Frame, фиксировать элементы интерфейса при прокрутке и сохранять позицию между экранами. Fixed elements полезны для нижней навигации, верхней панели или плавающей кнопки. Проверяйте, чтобы фиксированный слой действительно находился в правильном контейнере: если он вложен в блок, который сам прокручивается или обрезается не так, как ожидается, поведение прототипа будет отличаться от задуманного.

Предпросмотр и проверка сценария

Prototype можно запускать из Mac app, web app и приложения Sketch — View & Mirror на iOS. Перед показом клиенту стоит пройти сценарий от каждого Start Point и проверить не только «правильный» путь, но и возвраты, закрытие Overlays, длинные экраны и состояния скрытых слоёв. Если прототипом пользуется человек без контекста, названия экранов и комментарии к версии должны объяснять, какой сценарий ему предлагается проверить.

Для сложных интеракций полезно отделять визуальный макет от демонстрационного. В рабочем экране дизайнер может хранить все варианты состояния, а для прототипа — использовать подготовленные Frames с однозначными связями. Иначе десятки служебных Hotspots и линий между экранами начинают мешать редактированию базового дизайна.

Совместная работа и Workspace

Workspace объединяет документы, Libraries, папки, версии и участников. Роли различаются по возможностям. Editor получает доступ к Mac app и редактированию. Viewer может открыть Workspace в браузере, просматривать документы и версии, комментировать, инспектировать и скачивать разрешённые ресурсы. Guest применяется для ограниченного доступа к конкретным материалам. Для продуктовой команды это позволяет не выдавать каждому участнику полноценное место редактора только ради комментариев или handoff.

В Workspace Window документы можно раскладывать по folders, закреплять, перемещать и искать. Веб-приложение показывает те же рабочие материалы в браузере. Папки полезно строить не только по продуктам, но и по состоянию: например, отдельный раздел для активной работы и архив, если тариф и политика команды это позволяют. Главное — не копировать файл при каждом согласовании. Для контрольных точек есть Versions, а не «final-final-3.sketch».

Версия создаётся через File > Create Version или ⌃⌘S. Ей можно добавить описание и звезду. В web app панель Versions позволяет открыть прошлое состояние и вернуться к последнему. Описание версии стоит использовать как запись о содержательном изменении: «утверждена навигация», «обновлены токены темы», «вариант после теста», а не просто «новая версия». Тогда история действительно помогает понять развитие решения.

Комментарии привязаны к Canvas или конкретному Frame. В Mac и web app откройте Comments, создайте новый комментарий и поставьте pin в нужном месте. В сообщениях поддерживаются упоминания, базовое форматирование и ветки ответов. Решённый комментарий можно закрыть, не удаляя историю обсуждения. Это гораздо надёжнее, чем отправлять список «на экране 4 поправить отступ», потому что pin сохраняет контекст.

Для внешнего согласования важно настроить permissions. Если разработчику нужно скачивать ресурсы и Inspect, у документа должна быть разрешена соответствующая возможность. Если доступ только на просмотр, кнопки экспорта могут отсутствовать даже при правильно подготовленных слоях. При проблеме сначала проверяют права документа, затем — действительно ли слой экспортируемый и не открыта ли старая версия.

Real-time collaboration

Совместное редактирование выполняется в Mac app и требует активной подписки. Несколько Editors могут работать с одним Workspace-документом, видеть присутствие коллег и получать изменения. Здесь дисциплина структуры особенно важна: два человека способны технически редактировать один файл одновременно, но это не означает, что им стоит одновременно перестраивать один и тот же Symbol Source. Командные правила по зонам ответственности предотвращают логические конфликты лучше, чем надежда на автоматическое слияние дизайнерских намерений.

Если организация не может сохранять рабочие файлы на внешних серверах, Sketch поддерживает локальные документы, а для отдельных корпоративных сценариев есть ограничения загрузок в Workspace. Однако при отказе от загрузки теряются связанные облачные функции, включая My Drafts и real-time collaboration для обычных Editors. Поэтому локальная политика хранения — это не «тот же Workspace, только без облака», а другой рабочий процесс, который нужно планировать отдельно.

Developer Handoff: Inspect и экспорт ресурсов

Handoff в Sketch строится вокруг режима Inspect в web app. Разработчику не требуется Mac, чтобы измерить слой или скачать ресурс: документ открывается в браузере, затем в Toolbar включается Inspect. Слева появляется Layer List, справа — Inspector. Выделение слоя показывает его свойства, размеры и доступные сведения о компонентах. При наведении на соседние объекты отображаются расстояния относительно выбранного слоя.

Layer List в Inspect помогает работать со сложной вложенностью. Контекстное меню позволяет перейти к слою, открыть Frame, скопировать ссылку, получить CSS или экспортировать элемент. Для Symbol можно перейти к Source и посмотреть его структуру. Если Symbol пришёл из доступной Workspace Library, источник можно открыть и инспектировать отдельно; если библиотека недоступна, имя и происхождение видны, но переход к Source может быть невозможен.

Copy CSS полезен как справочная операция, а не как генератор готовой верстки. CSS отражает параметры выделенного слоя, но не знает архитектуру реального приложения, семантику компонентов, сетку проекта и ограничения вашей кодовой базы. Разработчик всё равно должен интерпретировать макет. То же касается токенов: экспорт Sketch даёт значения и имена, но не внедряет их автоматически в чужую дизайн-систему.

Экспорт отдельного слоя из web app выполняется через Export as. Можно выбрать resolution, prefix/suffix и формат, добавить несколько вариантов экспорта. Если дизайнер заранее сделал слои exportable, web app также может собрать все assets документа. При пустом списке ресурсов надо проверить Mac app: либо слои не помечены Make Exportable, либо нет Slices. Для индивидуального слоя Inspect способен экспортировать его и без предварительной настройки, но массовая выдача зависит от подготовленных export-настроек.

Design tokens экспортируются из Document Details через Export Design Tokens. Цветовые переменные можно получить в CSS или JSON, Text Styles и Layer Styles — в JSON. При необходимости создаётся URL экспорта: он может указывать на последнюю версию документа или на последнюю starred version. Для стабильного production-процесса второй вариант безопаснее, если команда использует звёздочные версии как контрольные релизы дизайн-системы.

Импорт и экспорт файлов

Самый быстрый импорт — drag-and-drop на Canvas или иконку приложения. Bitmap-форматы PNG, JPG, GIF, TIFF и WebP становятся изображениями. SVG сохраняет векторную природу, а SVG-код можно вставить из буфера и получить редактируемый слой. PDF импортируется так, что каждая страница становится отдельным Frame. AI и PSD поддерживаются ограниченно и открываются как сведённый слой; это не способ продолжить послойную работу из Illustrator или Photoshop.

EPS больше не является поддерживаемым импортным форматом после удаления соответствующей системной поддержки в новых macOS. Если старый архив содержит EPS, его лучше заранее конвертировать в SVG или PDF в инструменте, который корректно понимает исходный PostScript, а уже затем переносить в Sketch.

Импорт из Figma

Файл Figma .fig можно открыть через File > Open from your Mac или ⇧⌘O, а также через Finder командой Open With > Sketch. Импортер старается восстановить структуру, компоненты и современное оформление, но сложный документ всё равно нужно проверить после конвертации: названия, layout, шрифты, эффекты и прототипы двух систем не обязаны совпадать один к одному. Версия Sketch из Mac App Store этот импорт не поддерживает, поэтому для миграции нужна сборка с сайта Sketch.

Перенос крупной дизайн-системы лучше начинать с одного репрезентативного файла, а не с массовой конвертации. После импорта сравните ключевые экраны, протестируйте компоненты, Stacks, тексты и экспорт и только затем переносите остальные материалы. Если обнаруживается повторяемая проблема, её дешевле решить на пилотном файле и включить в чек-лист миграции.

Экспорт графики

Чтобы подготовить layer, group или frame к обычному asset-экспорту, включите Make Exportable внизу Inspector. Можно добавить несколько export presets: например, PNG 1x и 2x, SVG для векторной иконки, суффиксы к имени. Команда ⌘E экспортирует выбранный слой, а ⇧⌘E открывает общий диалог Export Assets. Масштаб можно задавать множителем вроде 2x или 0.5x, а также целевой шириной или высотой.

Bitmap-экспорт поддерживает PNG, JPG, HEIC, TIFF и WebP. Для JPG и WebP доступна настройка quality. Save for the web удаляет часть дополнительной информации, включая некоторые метаданные и цветовой профиль. PNG может быть interlaced, JPG — progressive. Эти параметры имеют смысл для конкретной доставки, но не должны заменять оптимизацию ресурсов на этапе разработки.

Векторный экспорт — SVG, PDF и EPS. Он сохраняет пути, однако не каждый эффект переводится в каждый формат без потерь. Например, у PDF есть ограничения для прозрачных градиентов, а SVG не во всех случаях поддерживает внутреннюю и внешнюю границу так, как она выглядит в Sketch. Поэтому сложный эффект нужно проверять в целевой среде, а не считать сам факт выбора SVG гарантией пиксельного совпадения.

Frames можно экспортировать в многостраничный PDF через File > Export > Export Frames to PDF. В диалоге выбираются нужные Frames, при необходимости добавляются их названия и комментарии Workspace. Порядок Frames для PDF настраивается в Layers settings. Комментарии Workspace отдельно экспортируются в CSV — полезно, когда нужно сохранить журнал обратной связи вне сервиса.

Практический сценарий: макет мобильного экрана

Чтобы увидеть логику Sketch в связке, удобно собрать не отдельную картинку, а небольшой мобильный экран с повторно используемыми элементами. Создайте верхнеуровневый Frame через F и выберите подходящий шаблон устройства в Inspector. Назовите его по состоянию, например Catalog/Default. Не стоит называть экраны «Artboard 12» или «Copy 7»: имена потом видны в Layer List, прототипе, истории и handoff.

Внутри Frame создайте вертикальный Stack, который будет главным потоком. Задайте padding по краям и gap между крупными секциями. Первым элементом поместите Header как отдельный горизонтальный Stack: заголовку дайте Fill, правой иконке — Fixed. Если появится дополнительная кнопка, её можно вставить рядом без ручного пересчёта координат. Для списка карточек используйте вложенный Stack, а каждую карточку сначала доведите до устойчивой раскладки, после чего превратите в Symbol.

В карточке изображение удобно держать в отдельном Frame с Clip content или маской. Текстовый блок — вертикальный Stack с Fit height. Заголовок и описание должны иметь понятные правила переноса. Строку цены и действия можно сделать горизонтальным Stack: цене — Fill, кнопке — Fit. Теперь замените текст на более длинный и уменьшите ширину экрана. Если конструкция ломается, исправляйте sizing и min/max, а не возвращайтесь к абсолютным X/Y для каждого дочернего слоя.

После создания Symbol для карточки сделайте несколько instances и задайте разные overrides: изображение, заголовок, подпись и состояние дополнительного бейджа. Если бейдж опциональный, протестируйте и скрытое состояние. Preserve space when hidden включайте только тогда, когда место действительно должно сохраняться. В обычной карточке скрытый бейдж чаще должен освобождать пространство, иначе сверху останется необъяснимая пустота.

Цвета не вводите заново в каждом экземпляре. Создайте Color Variables для фона, основного текста, вторичного текста и акцента. Для заголовка и подписи создайте Text Styles. Даже на одном экране это может показаться избыточным, но при втором-третьем экране выигрыш становится очевиден: изменение акцента или кегля проходит через систему, а не через ручной поиск похожих слоёв.

Для проверки состояния ошибки продублируйте Frame и измените данные, а не Source базовых компонентов. Например, во втором варианте покажите длинный заголовок, пустое изображение и disabled-кнопку. Если disabled — повторяющееся состояние всего продукта, его лучше заложить в архитектуру компонента; если это разовый исследовательский вариант, не стоит усложнять библиотеку ради одного макета.

На вкладке Prototyping свяжите карточку с экраном деталей. Для нижней навигации включите fixed behavior при прокрутке. Если экран длинный, создайте scrolling area и проверьте, что контент не уходит под фиксированные элементы без нужного padding. Затем запустите Preview и пройдите путь как пользователь. На этом этапе часто обнаруживаются ошибки, незаметные на статическом Canvas: недостаточная зона нажатия, оверлей не закрывается, экран стартует не с той точки или прокрутка обрезает блок.

Практический сценарий: дизайн-система в Sketch

Дизайн-система начинается не с количества Symbols, а с правил. Перед созданием Library выпишите минимальный набор основ: цветовые роли, типографическую шкалу, размеры отступов, радиусы, базовые компоненты и варианты состояний. Sketch хорошо хранит эти сущности, но не решает за команду, что является токеном, что — компонентом, а что — единичным оформлением.

Шаг 1. Переменные и стили

Создайте Color Variables сначала для примитивной палитры или сразу для семантических ролей, в зависимости от принятой архитектуры. Если используются обе модели, разделите их именами. Например, базовые цвета могут жить в Palette/Blue/500, а семантика — в Action/Primary. Следите, чтобы продуктовые компоненты ссылались на семантические значения: тогда смена темы не требует менять каждый Symbol.

Для типографики создайте Text Styles: Display, Heading, Body, Caption и их необходимые варианты. Не включайте в стиль свойства, которые должны меняться независимо. Цвет текста обычно удобнее связать с Color Variable. Выравнивание имеет смысл включать в Text Style только если оно действительно часть системного правила. Layer Styles используйте для повторяемых комбинаций оформления — например, поверхности с типовым border и shadow.

Шаг 2. Базовые компоненты

Начните с простых элементов: кнопки, поля, иконки-контейнеры, бейджи. Стройте их через Stacks, чтобы размеры зависели от контента. Кнопке задайте горизонтальный Stack, padding и gap, текст — Fit. Для иконки зафиксируйте размер, но не превращайте всю кнопку в Fixed width без необходимости. Проверьте короткую и длинную подпись, наличие и отсутствие иконки, минимальную высоту.

Не вкладывайте компонент в компонент только ради визуального порядка. Вложенность оправдана, если внутренний элемент имеет собственную семантику и переиспользуется. Иначе глубина Source усложнит overrides. Для сложной карточки лучше иметь понятные вложенные Symbols Button и Badge, но не отдельный Symbol на каждый декоративный прямоугольник.

Шаг 3. Имена и группировка

Используйте устойчивую схему имён. Slash-группы помогают организовать Components View и Insert: Button/Primary, Button/Secondary, Field/Text. Не кодируйте в имени случайный экран вроде CheckoutButton, если компонент общий. И наоборот, не называйте узкоспециализированную вещь абстрактным Card, если она предназначена только для одного доменного блока.

Проверьте Components View как пользователь библиотеки: можно ли быстро найти нужный Symbol, отличить похожие варианты и понять, что вставлять. Если поиск требует знать внутреннюю структуру файла, система организована вокруг автора, а не вокруг команды.

Шаг 4. Публикация Library

После проверки превратите документ в Library и включите его в тестовом продукте. Вставьте несколько компонентов, измените Source в Library и посмотрите Component updates. Это простой способ проверить, какие свойства действительно обновляются и какие локальные overrides сохраняются. Только после такого теста имеет смысл подключать библиотеку к десяткам файлов.

Для важных контрольных выпусков используйте version descriptions и starred versions. Если библиотека обслуживает production, изменение базового компонента должно иметь понятную причину и проверяемый набор затронутых экранов. Sketch показывает обновления, но не заменяет release discipline: описание версии, список изменений и согласованный момент обновления всё равно нужны.

Шаг 5. Передача токенов и компонентов разработке

В handoff проверьте, что переменные имеют осмысленные имена, а компоненты не состоят из анонимных групп. Экспорт design tokens в CSS/JSON полезен для сверки значений. Но не пытайтесь автоматически превратить любую структуру Sketch в кодовую библиотеку: дизайн-компонент и production-компонент могут иметь разный уровень абстракции. Цель — единый словарь и совпадающие значения, а не механическая генерация всей архитектуры.

Практический сценарий: адаптивный веб-блок

Для веб-интерфейса создайте верхнеуровневый Frame ширины рабочего макета и вложенный контентный Frame с ограничением max width. Внутри используйте горизонтальный Stack для двух колонок. Левой колонке задайте Relative или Fill, правой — другой относительный размер либо Fixed с min/max. Такой подход лучше имитирует реальную верстку, чем две группы, расставленные по координатам.

На меньшей ширине можно подготовить отдельное состояние макета, где направление Stack меняется на вертикальное. Sketch не является браузером и не исполняет медиазапросы, поэтому breakpoint-состояния проектируются явно. Зато внутри каждого состояния Stacks позволяют проверить, как ведут себя тексты, кнопки, карточки и вложенные секции при изменении доступной ширины.

Если сетка карточек должна переноситься, включите Wrap. Для карточек задайте относительную или фиксированную ширину с ограничениями. Проверьте ситуацию, когда последняя строка заполнена не полностью. Distribution Space Between может растянуть расстояния неожиданно, поэтому для продуктовой сетки часто лучше фиксированный gap и предсказуемые размеры элементов.

Min/max constraints используйте не только на колонках, но и на контенте. Поле поиска, текстовая колонка и модальное окно обычно имеют разумный максимум. Если поставить Fill без ограничения, макет на широком Frame может выглядеть «адаптивно», но не соответствовать реальному дизайну. Ограничение ширины — часть спецификации, и Sketch умеет хранить её непосредственно в структуре.

Настройки, которые влияют на результат

Settings > Layers содержит параметры, которые могут объяснить разное поведение у двух дизайнеров. Pixel Fitting управляет привязкой к пиксельным границам. New Text Styles определяет, включать ли alignment и color в новые стили. New Layer Styles — включать ли corners. Importing управляет масштабированием больших изображений при добавлении во Frames и импортом PDF как vector data. Frame Export задаёт порядок Frames в PDF.

В тех же настройках определяются особенности Drawing Layers, Editing Shapes и Duplicating. Если один дизайнер получает смещённые дубликаты, а другой — нет, проблема может быть не в документе, а в локальной настройке. Поэтому для командных инструкций полезно зафиксировать критичные Settings, особенно если автоматизация или обучающие материалы ожидают конкретного поведения.

Canvas Settings влияют на отображение и навигацию. Здесь выбирается глобальный Color Profile, включается Animate Zoom, задаётся поведение Zoom in on Selection, инверсия прокрутки, шаг nudging и цвета guides. Небольшой шаг стрелками удобен для тонкой настройки, а увеличенный шаг с ⇧ — для работы по сетке. Если дизайн использует восьмипиксельную систему, шаги можно подобрать так, чтобы большинство перемещений не требовало ввода координат.

Libraries Settings помогают держать Insert и Command Bar быстрыми. Включайте только библиотеки, нужные текущему документу, а для проекта используйте Document Libraries. Автоматическое обновление Library удобно в небольшой команде, но для критичных систем ручной просмотр Component updates часто безопаснее: дизайнер видит, что изменилось, до применения.

Плагины и расширение Sketch

Плагины добавляют функции в Mac app и доступны через меню Plugins. Установка типичного плагина выполняется двойным щелчком по пакету, после чего его команды появляются в соответствующем меню. Возможности сторонних расширений различаются: одни автоматизируют рутинные операции, другие подключают внешние данные, экспорт, тестирование или handoff. В статье нет смысла перечислять конкретные сторонние плагины как обязательные: их совместимость зависит от версии Sketch и поддержки автора.

Управление выполняется через Plugins > Manage Plugins…. Там расширение можно отключить или удалить. Версия из Mac App Store не разрешает обычные плагины из-за ограничений песочницы. Это надо учитывать до внедрения процесса, который зависит от стороннего расширения: если часть команды установила магазинную версию, шаги не будут воспроизводиться одинаково.

Плагин — один из первых подозреваемых при нестабильной работе. Чтобы проверить это, закройте Sketch и запустите его, удерживая ⇧. Safe Mode временно отключает плагины. Если зависание или падение исчезло, включайте расширения по одному до обнаружения проблемного. Такой тест быстрее полной переустановки приложения и не требует разрушать настройки документа.

Расширение не должно подменять базовую структуру. Если жизненно важная операция возможна только через неподдерживаемый плагин, у команды появляется зависимость от стороннего кода. Для одноразовой автоматизации это приемлемо, для долгосрочной дизайн-системы — повод проверить, можно ли решить задачу встроенными Symbols, Stacks, Variables, Libraries или стандартным экспортом.

Производительность на больших документах

Sketch не устанавливает простой лимит «не больше N слоёв», потому что разные слои имеют разную стоимость. Тысячи простых Shapes могут быть легче нескольких огромных bitmap с Blur. Поэтому производительность оценивают по структуре конкретного файла. Если приложение начинает задерживать перемещение, масштабирование или открытие Insert, оптимизация должна идти по источникам нагрузки.

Большие изображения

Фотографии и скриншоты с разрешением значительно выше реального отображаемого размера увеличивают файл и расход памяти. Используйте Layer > Image > Minimize File Size для отдельного изображения или File > Reduce File Size… для документа. Перед уменьшением убедитесь, что изображение не потребуется позже увеличивать. Для повторяющихся картинок разработчик также рекомендует использовать Symbols, чтобы не размножать независимые тяжёлые слои.

Эффекты

Большие Blur и несколько накладывающихся Shadows требуют больше ресурсов. Если экран тормозит, временно отключите тяжёлые эффекты и сравните отзывчивость. Для демонстрации интерфейсной идеи часто достаточно одного аккуратного Background Blur вместо нескольких слоёв с размытием. Особенно внимательно проверяйте полупрозрачные панели, где blur может накладываться на blur родительского элемента.

Слишком много Frames на одной Page

Когда десятки крупных экранов лежат на одной Page, Sketch должен держать и рендерить больше содержимого одновременно. Разделите пользовательские потоки по Pages. Это улучшает не только скорость, но и навигацию. Архивные концепции, которые уже не участвуют в текущем прототипе, не обязаны оставаться рядом с production-макетами.

Libraries и Insert

Очень большие подключённые Libraries замедляют поиск и раскрытие меню. Отключите те, которые не нужны текущему документу, и используйте Document Libraries. Если приложение само работает быстро, но пауза появляется именно при Insert или Command Bar, список активных библиотек — один из первых пунктов для проверки.

Не оптимизируйте вслепую. Сделайте копию проблемного документа, поочерёдно исключите плагины, тяжёлые изображения, blur и неиспользуемые Libraries, распределите Frames по Pages. Если проблема проявляется только в одном файле, это сигнал исследовать его структуру; если во всех — проверить плагины, версию Sketch и состояние системы.

Типичные проблемы и способы их устранения

Не редактируется текст из-за отсутствующего шрифта

Если Sketch показывает Missing Fonts, не пытайтесь «разбудить» текст двойным кликом. Откройте File > Document Settings… > Fonts и посмотрите источник проблемы. Для обычного локального шрифта используйте Replace… и выберите семейство и начертание. Если Replace недоступна, проверьте, не приходит ли шрифт из Library. В этом случае замену или embedding нужно делать в библиотечном документе, затем сохранить Library и обновить её в рабочем файле.

У variable fonts возможен отдельный случай: документ использует нестандартное значение оси, которое система распознаёт иначе, чем установленный файл. Для совместимости можно временно переключиться на стандартное начертание вроде Regular или Bold и проверить, исчезло ли предупреждение. Если команда встраивает шрифт, после обновления самого font file старую встроенную копию приходится убрать и встроить заново.

Library не находится или не обновляется

Для локальной Library откройте Settings > Libraries. Missing Library обычно означает, что исходный .sketch-файл был перемещён, переименован или недоступен. Верните файл в ожидаемое место либо удалите старую запись и добавьте Library снова. Для Workspace Library проверьте доступ к рабочему пространству и не была ли библиотека удалена или отключена администратором.

Если Library видна, но изменения не приходят, посмотрите уведомление Component Updates Available и настройки starred versions. При работе со starred version новая обычная версия Library может сознательно не распространяться. Проверьте, какая версия опубликована и какая ожидается потребляющим документом. Не отсоединяйте Symbol от Library только потому, что обновление не появилось: сначала разберитесь с версией и доступом, иначе создадите локальную копию, которая дальше вообще не будет получать исправления.

Экспорт в браузере недоступен

Для Viewer должны быть разрешены download and inspect. Если Export Assets серый, а права корректны, откройте исходный документ в Mac app и проверьте Make Exportable или Slices. Массовый экспорт web app собирает подготовленные assets; без экспортируемых слоёв ему нечего формировать. Для одного выбранного слоя Inspect способен дать экспорт напрямую, поэтому различайте проблему индивидуального и массового экспорта.

SVG выглядит не так, как в макете

Проверьте, какие свойства использованы. Не все границы и эффекты Sketch имеют прямой эквивалент в SVG. Если экспортируется иконка, обычно надёжнее превратить критичную border-геометрию в outlines и убрать декоративные эффекты, не предназначенные для вектора. После экспорта откройте SVG в целевой среде — браузере или приложении, где он будет использоваться. Предпросмотр внутри Sketch не заменяет такую проверку.

Приложение стало медленным или нестабильным

Первый диагностический шаг — Safe Mode. Закройте Sketch и запустите снова с удержанием ⇧. Если проблема исчезла, проверьте плагины. Если нет, создайте копию проблемного файла и упростите её по слоям нагрузки: большие bitmap, многослойные blur/shadow, количество Frames на одной Page, слишком крупные Libraries. Если замедление проявляется только при реальном совместном редактировании, сравните поведение локальной копии и Workspace-документа.

При повторяющемся падении не начинайте с удаления всех рабочих файлов или переустановки macOS. Сначала отключите плагины, перезапустите Mac, проверьте воспроизводимость на новом пустом документе и на конкретном проблемном. Если сбой привязан к одному файлу, копия этого файла и crash report дают гораздо больше информации, чем описание «Sketch иногда закрывается».

Stack перестал подстраиваться по содержимому

Проверьте sizing по каждой оси. Если Fit-контейнер вручную растянули мышью, Sketch переключает эту ось в Fixed. Верните Fit. Затем проверьте дочерние элементы: один слишком широкий Fixed-слой может заставлять контейнер вести себя не так, как ожидалось. Если используется min/max, временно снимите Constrain Size и посмотрите, исчезло ли ограничение. Для вложенного Stack отличайте Fill от Relative: Fill забирает свободное место, а Relative делит его по доле.

Маска обрезает лишние слои

Маска действует на слои выше неё, пока область не ограничена группой. Объедините mask layer и нужное содержимое в Group или Frame. Если конкретный слой внутри группы не должен участвовать, включите Ignore Underlying Mask. Самая частая причина неожиданного обрезания — не «сломанная маска», а неправильный порядок слоёв или отсутствие контейнера вокруг области маскирования.

Импорт из Figma дал отличия

Проверьте сначала шрифты, layout, effects и компоненты. Системы используют разные внутренние модели, поэтому сложные конструкции требуют ревизии. Не исправляйте десятки импортированных файлов параллельно. Возьмите один, сформируйте список повторяемых отличий и только затем масштабируйте миграцию. Если .fig вообще не открывается, убедитесь, что используется не Mac App Store-сборка Sketch.

Как подготовить документ к передаче разработчику

Перед handoff полезно пройти документ как чужой человек. Удалите или перенесите на отдельную Page устаревшие варианты, переименуйте Frames и ключевые слои, проверьте, что Symbols и Variables имеют понятные имена, а не автоматически созданные значения. Developer handoff не исправит структуру: Inspector честно покажет и хороший компонент, и хаотичную группу из сорока слоёв.

Важные ресурсы отметьте Make Exportable и задайте только реально нужные форматы. Иконка чаще всего требует SVG, растровая фотография — PNG, JPG или WebP в зависимости от прозрачности и доставки. Не добавляйте 1x, 2x, 3x «на всякий случай», если команда разработки использует только один тип. Экспортные пресеты должны отражать production-процесс, иначе handoff создаёт лишние файлы и вопросы.

Цвета, текст и отступы должны быть системными там, где система действительно существует. Если компонент использует Color Variable, разработчик видит имя и может сопоставить его с токеном. Если значение уникально для одного экспериментального экрана, не обязательно превращать его в глобальную переменную. Цель — уменьшить неопределённость, а не добиться максимального числа токенов.

Сохраните контрольную Version и добавьте описание. Если макет передан в разработку, starred version может служить явной точкой, относительно которой обсуждаются изменения. Тогда последующие дизайнерские эксперименты не смешиваются с тем, что уже реализуется. Для Library такой подход особенно важен: production должен понимать, какая версия компонентов считалась утверждённой.

Откройте документ сами через web app и Inspect, как это сделает разработчик. Проверьте измерения, CSS-представление, Symbol Source и экспорт. Этот шаг обнаруживает проблемы прав доступа и отсутствующие assets до того, как они станут блокером для другой команды.

Полезные горячие клавиши без заучивания всей таблицы

В повседневной работе достаточно запомнить небольшой набор. ⌘N создаёт документ, ⌘O открывает Workspace, ⌘S сохраняет, ⌘K открывает Command Bar. F включает Frame, V — Vector. Return переводит выделенный векторный слой в режим редактирования, а Tab помогает проходить по точкам. Для экспорта выбранного слоя используется ⌘E, общий Export Assets — ⇧⌘E.

⌃1 и ⌃2 переключают Canvas и Components View. ⇧⌘F выполняет Size to Fit для подходящего контейнера. ⌃⌘M создаёт mask из выбранной формы. ⌘. скрывает или возвращает интерфейс вокруг Canvas, когда нужен чистый просмотр макета. Остальные команды проще искать через Command Bar, чем держать в памяти десятки сочетаний.

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

Сравнение с аналогами

Сравнивать Sketch имеет смысл прежде всего с инструментами интерфейсного дизайна, но ФотоМАСТЕР включён здесь отдельно, потому что эти программы решают принципиально разные задачи. ФотоМАСТЕР предназначен для коррекции и ретуши фотографий: замены фона и неба, удаления объектов, портретной обработки, фильтров, локальной коррекции и пакетной обработки снимков. Sketch, напротив, строит экраны, компоненты, адаптивные контейнеры и прототипы. Если исходная задача — улучшить портрет или обработать сотню фотографий, интерфейсный редактор Sketch не заменяет специализированный фоторедактор. Если задача — спроектировать приложение или сайт, ФотоМАСТЕР не предоставляет эквивалента Symbols, Libraries, Stack Layout и handoff.

Sketch и ФотоМАСТЕР

Главное различие — тип объекта. В ФотоМАСТЕРе объектом работы является фотография: программа умеет корректировать свет и цвет, убирать шум, повышать резкость, заменять или размывать фон, удалять лишние объекты, ретушировать портрет, менять внешность, применять фильтры и 3D LUT, делать коллажи и обрабатывать серии снимков. Sketch может поместить фотографию в Frame, заменить image layer, обрезать маской и добавить эффект, но не предлагает специализированной портретной ретуши или пакетной фотокоррекции.

Обратная ситуация с интерфейсами. Sketch хранит компоненты, варианты через overrides, библиотеки, токенизированные цвета, адаптивные Stacks и прототипные связи. ФотоМАСТЕР не предназначен для поддержания UI-библиотеки и передачи интерактивного прототипа разработчику. Поэтому выбор здесь определяется не «мощностью», а исходным материалом и конечным результатом.

Sketch и Figma

Обе программы закрывают основные задачи продуктового интерфейсного дизайна: векторные макеты, компоненты, переиспользуемые стили, адаптивный layout, прототипы, комментарии и handoff. Различие сильнее всего проявляется в платформе и модели совместной работы. Sketch сохраняет полноценный редактор на macOS и использует web app для Workspace, просмотра, Inspect и сопутствующих действий. Figma изначально работает как облачный редактор в браузере и также предлагает настольные приложения для macOS и Windows с тем же основным набором функций.

Для команды с дизайнерами на Windows или Linux Figma снимает платформенное ограничение Sketch. Для Mac-команды, которая ценит нативный редактор и возможность держать обычные локальные .sketch-документы вне Workspace, модель Sketch может быть привычнее. Это не универсальное преимущество одной системы: оно зависит от устройств, политики хранения и того, насколько команде нужен браузер как основное место редактирования.

В системах компонентов тоже есть различия терминологии и возможностей. Sketch использует Symbols, overrides, Styles, Color Variables и Libraries. Figma работает с components, variants, variables и modes, а Dev Mode выделен как отдельный слой процесса для разработчиков. При миграции нельзя ожидать полного совпадения моделей: даже если импорт .fig восстанавливает основную структуру, компоненты и layout надо проверять на поведении, а не только по внешнему виду.

Прототипирование Figma включает переменные и выражения, что позволяет моделировать более динамические состояния внутри одного потока. Sketch покрывает распространённые переходы, Overlays, несколько триггеров, scroll и fixed elements, но не следует автоматически считать эти системы взаимозаменяемыми по любому сложному интерактивному сценарию. Если прототип должен содержать условную логику и насыщенное состояние, требования лучше выписать заранее и проверить в обоих инструментах на реальном примере.

Sketch и Penpot

Penpot также предназначен для UI/UX и продуктовых команд, но работает в браузере и может быть развёрнут на собственном сервере. Он открытый по модели разработки и строит layout вокруг CSS-подобных Flex и Grid. Встроенный Inspect отдаёт CSS, HTML и SVG, а native design tokens ориентированы на перенос между дизайном и кодом. Для организации, которой принципиален self-hosting или браузерная доступность на разных ОС, это существенное архитектурное отличие от Sketch.

Sketch предлагает зрелый macOS-ориентированный редактор, локальные документы, Symbols/Libraries и тесный Workspace-сценарий. Penpot ближе к веб-стеку по своей модели layout и использует открытые форматы. При переходе между ними стоит особенно внимательно сравнить адаптивные контейнеры: Stack Layout Sketch похож на Flexbox по идее, но разработчик прямо не считает его точным 1:1-эквивалентом CSS Flexbox, тогда как Penpot декларирует Flex и Grid как часть модели, близкой к CSS.

По прототипированию оба инструмента умеют связывать экраны, работать с overlays и прокруткой. По дизайн-системам у обоих есть компоненты и библиотеки; Penpot отдельно развивает W3C DTCG-совместимые design tokens, а Sketch экспортирует свои Color Variables, Text Styles и Layer Styles в CSS/JSON через web app. Выбор зависит от инфраструктуры и требований к совместимости с кодом, а не только от внешнего вида Canvas.

Как интерпретировать сравнение

Для одиночного Mac-дизайнера важны нативный редактор, локальные файлы, привычка к Symbols и возможность при необходимости подключить Workspace. Для распределённой команды с разными ОС на первый план выходят Figma или Penpot, потому что редактирование доступно через браузер или Windows-клиент. Для организации с требованием self-hosting Penpot предлагает отдельный путь. Для обработки фотографий все три UI-редактора уступают специализированному классу, к которому относится ФотоМАСТЕР.

Ограничения Sketch, о которых важно знать заранее

Главное техническое ограничение — полноценное редактирование на macOS. Веб-приложение полезно и функционально для просмотра, комментариев, Inspect, управления Workspace и выгрузки, но не заменяет Mac app как основной дизайн-редактор. Если дизайнерская команда работает на Windows, это не мелкая неудобная деталь, а ограничение рабочего процесса.

Второе ограничение связано с командными функциями: Workspace и real-time collaboration относятся к подписке. Mac-only license подходит для локальной одиночной работы, но не даёт тот же совместный сценарий. Перед закупкой лицензий надо разделить роли: кому действительно нужно редактирование, кому достаточно Viewer, какие документы должны находиться в Workspace и какие обязаны оставаться локально.

Третье — Sketch не заменяет специализированные инструменты соседних классов. Он может работать с изображениями, но не является RAW-фоторедактором. Он экспортирует CSS-свойства и tokens, но не заменяет кодовую базу и сборку приложения. Он создаёт интерактивный прототип, но не выполняет серверную логику. Чёткая граница назначения помогает не требовать от инструмента функций, которые логичнее решать дальше по цепочке.

Есть и форматные ограничения. PSD и AI импортируются сведённо, EPS больше не открывается, а некоторые эффекты не полностью переводятся в SVG или PDF. Импорт Figma надо проверять, особенно на сложных компонентах и эффектах. Это нормальная цена перехода между различными моделями документов; безопасный процесс всегда включает контрольный файл и визуальную проверку.

Когда Sketch подходит лучше всего

Sketch наиболее естественно вписывается в продуктовую работу, где дизайнеры используют Mac, интерфейсы строятся из повторно используемых компонентов, есть общая Library и требуется передача разработчикам через Inspect. Особенно хорошо раскрываются проекты, где важна дисциплина дизайн-системы: Color Variables, Styles, Symbols и Stacks позволяют хранить не только внешний вид, но и правила поведения блоков.

Для самостоятельного дизайнера ценна возможность работать локально с обычным .sketch-документом, не превращая каждый файл в облачный проект. Для команды Workspace добавляет версии, комментарии, роли, библиотеки и браузерный handoff. При этом архитектуру файла всё равно следует строить так, чтобы она была понятна без конкретного аккаунта: ясные Pages, Frames, названия слоёв и компоненты остаются основой переносимого макета.

Если ключевое требование — редактирование в браузере с любой ОС, Sketch не должен рассматриваться как эквивалент Figma или Penpot по платформенной доступности. Если ключевое требование — ретушь фотографий, он не заменяет ФотоМАСТЕР. Но для проектирования интерфейсов на Mac с локальным или Workspace-процессом Sketch даёт цельный набор от векторного макета и адаптивной раскладки до прототипа, библиотек и handoff, не заставляя превращать дизайн-документ в растровую иллюстрацию или набор несвязанных экранов.

Как организовать Sketch-файл на долгом проекте

На коротком прототипе почти любая структура кажется рабочей, но через несколько месяцев именно организация документа определяет скорость изменений. Разделите Pages по устойчивому признаку: пользовательские потоки, продуктовые области или этапы работы. Не используйте одновременно несколько схем вроде «по функциям», «по спринтам» и «по людям» в одном файле. Если исторические варианты всё ещё нужны, перенесите их на отдельную Page, чтобы они не участвовали в текущем прототипе и не увеличивали визуальный шум на рабочем Canvas.

Внутри Page размещайте верхнеуровневые Frames в одном направлении и оставляйте между сценариями понятные интервалы. Название Frame должно объяснять экран и состояние: Checkout/Payment/Error полезнее, чем Screen 24. Для вариантов, которые отличаются только данными, не обязательно создавать отдельный Symbol Source. Используйте instances и overrides, а отдельный Frame создавайте тогда, когда он представляет самостоятельное состояние прототипа или важную точку пользовательского пути.

Служебные элементы — пояснения, диаграммы, образцы данных — лучше держать вне production Frames или на отдельной Page. Если такой слой лежит внутри экрана, он может случайно попасть в экспорт, прототип или измерения разработчика. То же относится к временным прямоугольникам для выравнивания: после настройки Stack или Frame их надо удалить, а не оставлять невидимыми в глубине Layer List.

Рабочие версии вместо копий файла

Для Workspace-документа используйте Versions как контрольные точки. Создавайте их после содержательных этапов, добавляйте короткое описание и ставьте star там, где версия имеет специальный статус. Отдельная копия документа оправдана для настоящей ветки исследования или передачи вне Workspace, но не для каждого ежедневного изменения. Чем больше параллельных копий, тем сложнее понять, где находятся актуальные Symbols и комментарии.

Локальные документы тоже стоит сохранять осмысленно. Если нужен эксперимент, используйте Duplicate или Save As в зависимости от режима Auto Save, но не возвращайте случайную копию в общий процесс без явного сравнения с основной. При переносе локального файла в Workspace проверьте Libraries: локальная библиотека и одноимённая Workspace Library могут выглядеть одинаково, но иметь разное происхождение и разные обновления.

Граница между продуктовым файлом и Library

Не превращайте основной продуктовый документ в свалку глобальных компонентов. Если Symbol нужен нескольким проектам и должен обновляться централизованно, ему место в Library. Если элемент относится только к одному экрану и не имеет самостоятельной роли, локальный компонент проще. Обратная крайность тоже вредна: Library из сотен одноразовых карточек становится трудной для поиска, замедляет Insert и размывает понятие «системный компонент».

Перед переносом компонента в Library проверьте его на нескольких контекстах. Кнопка должна выдерживать длинную подпись, поле — ошибку и helper text, карточка — отсутствие необязательных блоков. Если компонент ломается сразу после первого override, публикация лишь размножит проблему. Сначала стабилизируйте layout и naming, затем подключайте его к общей библиотеке.

Проверка перед важной демонстрацией

Перед отправкой ссылки откройте prototype с нужного Start Point и пройдите его без доступа к Layer List. Убедитесь, что пользователь не попадает на служебный Frame, все Overlay закрываются ожидаемым способом, fixed-элементы не закрывают контент, а scroll начинается там, где задумано. Если показывается несколько сценариев, дайте каждому понятную стартовую точку вместо длинной цепочки переходов между несвязанными задачами.

Затем откройте web app с ролью, максимально похожей на роль получателя. Это проверяет permissions, комментарии, Inspect и экспорт лучше, чем просмотр из аккаунта владельца. Для разработчика отдельно убедитесь, что нужные assets выгружаются, а для менеджера — что ему не приходится разбираться в черновых Pages и технических названиях.

Наконец, сохраните Version с описанием. Тогда обсуждение после демонстрации можно привязать к конкретному состоянию, а последующие правки не изменят задним числом предмет разговора. Эта простая привычка особенно полезна, когда прототип, библиотека и разработка движутся параллельно.