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

Но все же, работа над большими проектами может стать довольно сложной без опций автоматизации. Вот почему я бы хотел поделиться идеями насчет того, что было бы неплохо добавить в функционал этого редактора. Я знаю, что некоторые из этих опций уже доступны в виде плагинов (таких как Fluid), но я пошел дальше и улучшил их на основе собственного опыта и потребностей. Надеюсь, когда-нибудь, мы увидим эти опции в официальном приложении Sketch.

Элементы и типы элементов

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

1-JNhPACC4BCn84LwpmHPSdw
Вы не можете использовать эти элементы списка как символ

“Я мог бы сделать 9-кратный слайсинг”, но вот в чем суть: элементы разных типов — вы можете называть их компонентами, атомами, молекулами или объектами — это одно и то же. В рамках этой статьи мы назовем все это элементами.

Определение элементов

Элемент можно создать минимум из одного слоя. Группируя разные элементы вместе вы можете сделать более крупные элементы.

1-uleXW4fZbAkOhxh6cKVKyA
Элемент, состоящий из других элементов

В отличие от символов в Sketch, которые одинаковы во всем (кроме текста, при определенных настройках), у элементов общими будут только выбранные вами параметры. Также нужно иметь возможность выбирать, какие именно элементы и при каких обстоятельствах. Вот почему нужны типы элементов. Вы можете называть их классами или стилями объекта. Я расцениваю их как разные классы для многократного использования, которые определяют, какой типа элемента я создаю. Каждый тип элемента определяет какие-то конкретные свойства.

1-aB7XDfZBNP7D18rEWyOhBQ
Элемент-кнопка с 3 заданными параметрами: категория, размер и состояние

Элемент всегда будет определяться его ключевыми свойствами — теми, которые не изменяются ни в каких его типах. Определяя новый тип элемента и изменяя некоторые свойства, вы задаете правило, которое будет использоваться только для этого конкретного типа. Вы также могли бы изменить или добавить под-элементы, чтобы определить новые типы элементов (например, добавление иконки к элементу списка). Что означает:

Для каждого элемента списка с типом состояния “favourite” (избранный), я хочу добавить значок звездочки в правом углу.

1-yvhsv7KusHMWk1MCdnMNQQ
Выбирая состояние “favourite”, вы редактируйте теперь только те элементы списка, которые имеют такое состояние.

Примеры типов

Типы объекта должны быть универсальны. Вы можете использовать их как:

  • размеры: супер-маленький/маленький/средний/большой/огромный и т.д.
  • разные типы состояний: по-умолчанию/ховер/активное, по-умолчанию/неактивное, по-умолчанию/скрепленное, по-умолчанию/избранное, по-умолчанию/в закладках, по-умолчанию/просмотренное, по-умолчанию/архивированное и т.д.
  • фон: светлый/темный/фото и т.д.
  • контент (например, для иконок): поиск/меню/назад/выход/больше/ и т.д.

1-N8JOwVrLhtzVrNrYGkeIEA@2x

1-8NtDi0aYDSEYbknmCiBOiA@2x

1-XYNFYjsonjMVENB8juv80Q@2x

иконки
Примеры типов объектов

Комбинирование типов

Вы бы могли объединять несколько типов, чтобы создавать всевозможные комбинации сущностей элемента вместо отдельного создания нового типа. Если вы задаете состояние иконки на ховере, его можно использовать в каждой сущности элемента иконки, которая у вас есть.

1-3_0LCUobSryc8mcXtQLA2g

Задайте состояние на ховере для элемента иконки один раз, и его можно будет повторно использовать в любой другой сущности иконки.

Списки и сетки

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

1-WydH62ZptN2uSl_9Wb4pTA
Пример списка
1-UDNOgp1hvpj9V1XPJ_s8QA
Пример сетки

Переменные

Я никогда не пользовался глобальными цветами и цветами документа в Sketch, потому что эта опция не синхронизирует мои значения в документе. Похоже, что эта опция подразумевает отсутствие необходимости в изменении цвета. Этот недостаток синхронизации актуален не только для цветов, но и для всех повторяющихся значений в дизайнах, включая:

  • Размеры шрифтов
  • Высоты строк
  • Цвета границ
  • Ширины границ
  • Отступы
  • Поля

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

Стили знаков

Стилей текстов недостаточно — как насчет внутристрочных ссылок, упоминаний, тезисов, кода и элементов клавиатуры? Нам очень нужны стили символов. Одним из решений может стать использование элементов в качестве стилей знаков.

1-lF8kt38w35AhOaTzmwOrBg
Посмотрите на эти стили!

Автоматический макет

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

Высота и ширина

Вы можете использовать пиксели или проценты. Используя проценты в свойствах высоты или ширины, вы задаете пропорции относительно родительского слоя (когда элементы в группе) или артборда (когда элементы не в группе).

1-Vz_Qd1S2HxZh6ANBYg7jVw
Элемент заполняет всю ширину родительского элемента, в данном случае элемента карточки.

Поля и отступы

Без полей и отступов никак. Их использование ограничивает позиционирование других элементов на фиксированное расстояние.

1-sC0MKXwwzNyYgcjN5DNebA
Использование отступы в карточном элементе ограничивает расположение внутренних элементов

Выравнивание

Вы можете задать поведение слоя по осям x и y — без выравнивания, выравнивание по левому, правому краю или по центру.

1-enSgrI7-9D2XO8nv04GqTw
Без выравнивания — элемент свободно передвигается
1-Ri6i1NzhILyTHbFbQUaN3A
Выравнивание по левому краю — элемент движется вертикально
1--TqO_S59gdg99kpqbjTHnw
Выравнивание по левому и нижнему краю — элемент заблокирован

Что вы думаете об этих опциях? Как бы вы их использовали? Есть ли еще какие-то дополнения к функционалу Sketch, которые вы бы хотели использовать?