Представляем Auto-Layout в Sketch

Для чего нам нужен Auto-Layout?

Нам нужен способ для определения и просмотра того, как выглядит наш дизайн на ВСЕХ размерах экранов, а не только для iPhone 7.

Auto-Layout

Что такое Auto-Layout для Sketch?

Плагин, который интегрируется в Sketch и предполагает определение и просмотр лейаутов в различных размерах (iPhone/iPad) и ориентациях  (книжной/альбомной).

Auto-Layout для Sketch
Простое определение Auto-Layout

Также, в данном плагине реализована возможность  генерировать разные режимы просмотра для всех размеров экранов одновременно:

Sketch Auto-Layout
Сгенерированный обзор всех размеров экрана

Как его использовать?

  • Скачайте плагин бесплатно: https://animaapp.github.io/Auto-Layout/
  • Откройте .zip и дважды нажмите на “AutoLayoutPlugin.sketchplugin” для установки
  • Определите ограничения для каждого слоя
  • Сгенерируйте просмотр для того, чтобы убедиться, что ваш дизайн хорошо выглядит на всех размерах экранов.
  • Выпейте пива с вашим разработчиком за то, что вы экономите много времени при помощи данного плагина.
Sketch Auto-Layout
Используйте простые или продвинутые ограничения. Все зависит от вас!

Sketch Auto-Layout все размеры
Просмотр позволяет легко просмотреть дизайн на всех размерах экранов.

Скачайте бесплатный плагин: https://animaapp.github.io/Auto-Layout/

Апдейт: Auto-Layout теперь поддерживает Android и Web

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

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

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

Полное руководство по дизайну 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