Наш канал в

Создавайте макеты под разные устройства в Sketch

Magic Mirror для Sketch 3 – это плагин Sketch, который может трансформировать пропорции изображения с артборда под соответствующие размеры экранов устройств.
Это своего рода упрощенная версия Embeded Smart Objects от Photoshop для Sketch.

В чем разница?

В отличие от Символов, Magic Mirror использует Текстурную заливку для генерации версий макета. Плагин может «зеркалить» любое количество артбордов на любое количество размеров и фигур, под любым углом, но также берет во внимание искажение фигуры (перспективное преобразование).
Вместо редактирования растровой графики в Sketch, Magic Mirror не изменяет исходный растр деструктивным путем (так как мы используем графику артборда). Применяя слои фигуры (Shape) вместо растровых слоев (Bitmap layers), редактируемые контуры защищены, их можно легко обновить при необходимости.

Так как же это работает?

Вкратце, Magic Mirror выполняет итерации по слоям «Shape» (MSShapeGroup) на данной странице, и находит все пары артборд-слой с таким же самым именем.
Далее плагин проверяет кривую (NSBezierPath) и извлекает 4 угловые точки.
Затем алгоритм передает контент в Core Image для выполнения перспективной трансформации и применяет трансформированное изображение с применением текстурной заливки (Pattern Fill).

Возможности Magic Mirror! (⌃ ⇧ M)

magic-mirror-feature1

  1. Подготовьте исходный артборд.
  2. Нарисуйте 4-вершинный многогранник (прямоугольник)
  3. Назовите фигуру именем артборда
  4. Нажмите горячую клавишу

Переход на артборд (⌃ ⇧ J)

magic-mirror-feature2

Вращение контента (⌃ ⌘ ⇧ R)

magic-mirror-feature3

Зеркальное отображение (⌃ ⌘ ⇧ F)

magic-mirror-feature4

Поддержка Retina Image

magic-mirror-feature-retina

Многостраничная макетированиеNEW

magic-mirror-feature-crosspage-mirroring

Скачать плагин Magic Mirror

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

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

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5