Обновление бесплатной дизайн-системы для Sketch

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

Скачайте бесплатный файл —  https://goo.gl/GxBZWr

Идея заключалась в том, чтобы просто добавить переопределение тени в каждый компонент Frames DS так, чтобы я мог быстро переключаться между различными состояниями тени.

Проблема?

Единственный способ иметь заменяемую тень - это вставить экземпляр символа тени в нижней части символа.. Но, наряду с тенью, может быть гораздо больше разных экземпляров, уже вложенных в символ (форма, состояние, иконки и т. д.). Это приведет к беспорядочной = несогласованной структуре символов. Когда вы не можете придумать смайл для каждой строки переопределения ? Итак, что, если у нас есть одна основа для каждого компонента системы дизайна, которая может содержать автоматически обновляемый фон и свойства высоты? Таким образом, нам не нужно будет искать правильное раскрывающееся меню. Вместо этого мы можем всегда иметь все возможности визуальных эффектов в одном месте.

Высота

Чтобы создать ощущение глубины внутри взаимодействий, обычно используются свойства shadow/box-shadow, позволяющие визуально указывать расстояние между объектами пользовательского интерфейса и поверхностью. Для дизайн-системы коей и является Frames, было выгодно иметь общий набор свойств тени наряду с цветами бренда. Это обеспечивает последовательный подход к созданию состояний интерфейса. Material Design проделал большую работу в этом направлении, поэтому мы можем извлечь максимум из этого руководства и применить его на практике при работе с вложенными символами. Предоставляет дизайнеру возможность быстро менять различные уровни z-index, настраивать заливку цвета и форму контура. Как в примере на картинке: Идеальная основа для вложенных символов (кнопки, карточки, формы и т. д.)

Material

Этот символ служит нижним слоем для каждого элемента интерфейса, который будет распространять одни и те же правила в документах и проектах. Material создается с использованием 3 основных свойств переопределения: граница (Border), заполнение (Fill) и высота (Elevation), которые доступны для различных манипуляций и комбинаций. Для каждого параметра высоты у нас есть символ с глубиной тени от 0 до 6 DP (высота уровня обычно измеряется в DP – независимые от устройства пиксели), чтобы указать плотность пикселей тени.

Примечание! У Sketch есть проблема с тенями и символами, по какой-то причине, если вы увеличите расстояние тени до 10-16 DP, теневые визуальные эффекты будут обрезаны невидимой маской. Что выглядит не очень хорошо – https://goo.gl/GupMEf. Надеюсь, мы сможем исправить это в ближайшее время. ?

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

Совет: Все группы должны иметь разные размеры артборда, чтобы не перегружать меню переопределений.

Используйте 3 или более типов слоев с одинаковым размером артборда, но с разными свойствами радиуса, например, 00 pt, 04 pt, 100 pt для создания различных экземпляров формы. Мы также помещаем папки свойств границы (Border) и заливки (Fill), чтобы оставаться вложенными над символом высоты, и формируем фон и контурный цвет. Хитрость! ? Чтобы этот символ был действительно опрятным, вы можете использовать комбинированную фигуру для формирования границы (которая по-прежнему будет иметь переопределение цвета заливки). И не забудьте закрыть внутренний контейнер, чтобы он зацепился за все края при изменении размера.

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

Увеличьте количество стилей заливки, чтобы получить бесконечное количество комбинаций границ / фона.

Вывод

Использование Material для построения и масштабирования дизайн-систем может предоставить вам следующие преимущества:

• Вы получаете единый набор параметров настройки переопределений, полезных при работе с товарищами по команде для создания общего языка дизайна.
• Все визуальные свойства автоматически обновляются с помощью стилей вашей системы дизайна. (Вы можете легко добавить Material в существующее руководство по стилю).
• Экономит время, позволяя иметь только один символ, как для плоских, так и для выпуклых поверхностей, что устраняет необходимость создания постоянного слоя «Background».

[caption id="attachment_40089" align="aligncenter" width="800"] Нажмите ?, чтобы скачать[/caption] Здесь вы можете найти Sketch-файл, содержащий библиотеку символов Material, использовать его для реализации универсальных правил теней во всех библиотеках компонентов / sketch libraries или просто экспериментировать с тенями и стилем. Процесс установки прост:

1. Скопируйте все содержимое страницы символов
2. Вставьте его в существующую библиотеку или просто добавьте этот файл, как библиотеку
3. Добавьте Material в компонент, вложив его в нижнюю часть контейнера символа.

Добавляйте свои собственные стили и используйте эту крошечную библиотеку, чтобы быстро придумать визуальные идеи для новых проектов. Помимо Material мы добавили больше содержимого в последнюю версию Frames Design System. Больше компонентов, иконок, поддержка Sketch 48 и еще 14 макетов прототипов, включая таблицы ценообразования, панели мониторинга и Team cards, а также некоторые изменения и исправления ошибок. Вы можете просмотреть полный список изменений и получить свою лицензию. Если вам нужен надежный компаньон для ваших задач по дизайну продукта, здесь вы можете найти одного? @buninux @robowolf_design Спасибо за удивительный год?

---

Перевод статьи Bunin