Проект «Диджиталист» ⚡️ Оригинал статьи на Medium — Design+Sketch
Узнайте как кастомизировать и использовать лучшие практики в работе со Sketch как надёжной дизайн-системой, которая сбережёт вам сотни часов в следующем проекте.
Это часть Frames for Sketch — статьи-руководства, которая поможет вам приступить к использованию Frames Design System и кастомизировать её под гайды вашего бренда, также поможет изучить что-то новое из фич и лайфхаков Скеча, о которых вы могли не знать.
Содержимое руководства:
1. Обзор — быстрый взгляд на основные разделы
2. Цвета — узнайте как добавлять и использовать цвета
3. Типографика — замена системных шрифтов
4. Компоненты — работа с «символами»
5. Плагины — список вспомогательных плагинов для управления Frames
6. Итог — кейсы использования и ЧаВо
1. Обзор — обновлено 11 июня 2017
Frames — продукт, созданный дизайнером с идеей внедрения последних фич Скеча в единую UI-библиотеку путём объединения лучших практик использования и полезных техник, которые могут сохранить кучу времени в долгосрочной перспективе для любого знакомого со Скечем.
Мастер-файл Frames разделён на 4 основных страницы, которые содержат кучу заготовленного контента: компоненты, стили и заранее придуманные шаблоны, которые можно настроить и использовать для создания своих UI-китов, ну или дизайн-систем.
На заметку: Frames использует шрифты из Google Fonts — Roboto и Muli, будьте готовы предварительно установить их на компьютер.
Get Started — отправная точка для вновь прибывших, здесь можно настроить цвета, стили и шрифты вашего бренда.
Style Guide — цветовая схема, лист компонентов, иконки (значки), мокапы (готовые для презентации изображения устройств) и раскладки шрифтов, расположенные вместе.
Web UI Kit — коллекция заранее отрисованных макетов, созданных из компонентов системы, которые можно свободно кастомизировать, использовать для быстрого прототипирования и превращения схематичные каркасы в хорошо выглядящие шоты с Дрибббла.
Charts&Tables — Frames содержит набор из 32 графиков и компонентов таблиц, которые можно свободно настраивать, менять размеры и повторно использовать, таким образом вы фокусируетесь на работе с данными вместо векторных точек.
Symbols — все сгруппированные по категориям (символы) сортированы в соответствии с типами символов (цвета, кнопки, инпуты и т. д., позже мы доведём список до конца).
Эти 5 страниц создают прекрасную среду для быстрого создания дизайна приложения и веб сайтов, сохраняя тонны времени мне как дизайнеру. А теперь давайте переместимся к странице Get Started для начальной подготовки нашей (дизайн) системы, чтобы она соответствовала основам дизайна нашего бренда.
2. Цвета
По умолчанию Frames содержит 10 цветов, которые можно глобально менять сквозь весь документ, достаточно выделить слои Заливки и поставить им новые свойства, потом применить изменения. Вуаля, всё синхронизировано и новые цвета применены ко всем нужным компонентам, которые имеют атрибут «Цвет»!
На заметку: Вы также можете глобально использовать градиенты, достаточно конвертировать их слои в символы и поставить новый размер символов 100×100.
Чтобы добавить больше цветов, идите на страницу Symbols и просто скопируйте любую из монтажных областей с цветом (Копировать/Вставить), и примените новый цвет для неё. ✂️
Новые элементы в системе, будь это даже просто цвета, должны следовать правилам именования, чтобы элемент соответствовал нужной группе. Представьте название как путь файла в структуре папок. Для примера, Color / Orange (Цвет / Оранжевый) сделает возможным его нахождение при переопределении любого другого элемента системы, который имеет свойство Color.
На заметку: стиль заливки (Fill) используется сквозь всю дизайн-систему и применяется ко всем компонентам как атрибут Color (Цвет), включая стили обводки (Border) для фигур (таких как кнопки, алерты, бейджи или теги).
3. Типографика
По умолчанию Frames использует простую комбинацию шрифтов Roboto + Muli, заголовки от H1 до H5, такая простая комбинация поможет всегда построить захватывающую взгляд типографику. Шрифты можно менять для своих нужд и стиля.
Система типографики встроена в стили распространения (Shared Styles) по следующей структуре: *H1 (уровень заголовка) / Font Name (название шрифта) / Alignment (выравнивание) / Color (цвет)
Чтобы поменять текущую систему шрифтов просто перепишите текстовые слои по умолчанию. Не забудьте во время этого дела заменить Share text styles при помощи удобного плагина — Sketch Text Style Master, просто найдите шрифт, который хотите поменять, по его названию.
На заметку: Такие компоненты, как Кнопки содержат текстовые «символы», которые не будут перезаписываться автоматически, в следующей части мы рассмотрим как это побороть.
Теперь давайте добавим несколько новых шрифтов в дизайн-систему, следуя этим шагам:
1. Выделите или сделайте дубликат всех слоёв одного из шрифта — внесите нужные вам изменения, и пока не перезаписывайте Shared styles.
2. Пользуясь плагинчиком Rename It, активируйте команду «Найти и заменить» (Find and replace) на выделенных слоях и замените название шрифта по умолчанию в структуре именования (Пример: H1 / Roboto… в H1 / Arial…).
3. Создавайте новые стили из выделенных текстовых слоёв, для этого используйте плагин Style Generator и нажмите Generate shared style (сгенерировать общие стили).
Готово.
После того, как вы закончите с кастомизацией, можно сохранить текущие стили шрифтов как шаблон для быстрого импорта их в любой новый проект, используя Shared Style Plugin. Это сэкономит гору времени. Читайте больше про то, как овладеть стилями текста (на англ.).
4. Компоненты
«Строительные блоки» дизайн-системы — отзывчивые (responsive) компоненты, созданные из «символов», используемые на основе единого системного подхода — следовать структуре Пути (Path) и формировать логические группы. Все символы разделены на категории дизайном.
Большинство «символов» построены с использованием других «символов» (вложенность). Так можно быстро что-то поменять внутри типового символа, изменения отразятся на всех его копиях (Цвет, Позиция, Форма или Устройство).
Теперь давайте поближе взглянем на группы символов, чтобы понять как мы можем их настроить под себя.
Цвета
Простейший и часто используемый Символ — просто блок, который хранит одну лишь заливку одного цвета. (width×height = 100px×100px).
Текст
Текстовые Символы используются для Кнопок, инпутов и текстовых рамок, в порядке изменений, просто перепишите стандартные значения текстовых слоёв, изменения синхронизируются с родительским элементом.
Кнопки
Кнопки сортируются по размеру и доступны в следующих вариациях: Основные, Значок справа, Значок слева, Таб и Текстовая кнопка. Вы также можете найти Flexible (тянущуюся) кнопку со значком, который всегда находится близко к одной из сторон текста, эта кнопка оч хитрая, сделана с использованием этой техники.
Чтобы изменить внешний вид кнопки, нужно изменить атрибут Shape (фигура, форма), который содержит в себе свойства State (состояние) и Color (цвет). Ниже пример того, сколько много стилей запихано в один символ кнопки.
Формы
Инпуты (текстовые поля) могут быть описательными (с ярлыками или подсказками) или просто иметь обычный вид прямоугольника. Чтобы настроить их, используйте Символ State, просто перепишите любой стиль состояния в символе и примените изменения.
На Шейпы (Shape)
Символы Shape представляют форму элементов, таких как Кнопки, Бейджи, Теги и Уведомления — каждая фигура может быть стилизована посредством заливки (Fill) или обводки (Border). Сам цвет заливки применяется к ним обоим (зелёный фон, зелёная обводка).
На заметку: Символы Shape можно легко изменять путём редактирования радиуса слоя Container. Фигуры с обводкой созданы с использованием маскирования. Будьте внимательны — изменяйте радиус скругления и там и там.
State
Символы State (состояние) используются для отражения взаимодействия элемента и трансформаций, таких как Hover (при наведении), Active (активный, клик с задержкой) или Disabled (недоступный, неактивный), относящимся к Кнопкам или текстовым полям.
Чтобы обновить состояния Кнопки или Текстового поля, достаточно обновить стиль их слоёв. Можно добавить дополнительные эффекты в Символы, для примера — тень.
Data (данные)
Data место для второстепенных элементов интерфейса (… сайта или приложения), которые служат для общения с пользователем, его оповещения о событиях и таком всяком. Так пользователь сможет получить фидбек на свои действия.
Иконки (значки)
Все значки базируются на 24-пикс сетке, очень схожи с Material Design стилем, поддерживают атрибут Цвет (Color), так всегда можно поменять его на удовлетворяющий вашей цветовой схеме.
Мокапы (макеты устройств для презентации)
Мокапы используются для презентации готового интерфейса, чтобы лучше понимать как будет выглядеть продукт перед запуском в вёрстку. Или красиво «продать» его клиенту.
В мокапах легко можно заменить монтажную область по умолчанию на свою, таким образом выводя готовое цельное изображение.
Используя опцию Screen, можно добавлять оверлеи (слои поверх основного, для эффектов или заострения внимания на деталях).
Frames включает мокапы Айфона 7, Макбука и Айпэда Эйр, сделанные не без помощи бесплатных ресурсов Фейсбука.
Можно добавлять свои мокапы в формате PNG (в виде слоя в Символе) и ставить правильные пропорции для Screen symbol, чтобы картинка вставала ровно в нужное устройство.
Больше о том, как использовать мокапы, и бесплатные ништяки в этой статье.
5. Плагины
Frames можно контролировать расширять, используя плагины, это означает, что вы имеете невероятные возможности для всего документа, к примеру, можно легко синхронизировать Sketch-библиотеку Frames и иметь надёжный контроль версий с вашей командой, пользуясь Abstract app.
6. Итог
После настройки основных стилей и приведения компонентов к нужному виду, вы имеете полностью заряженную дизайн-систему, готовую для решений ваших задач.
sp
Проект «Диджиталист»
VK • FB • Twitter
