Material Design 2.0

Саша Окунев
/designer
Published in
3 min readMay 17, 2018

--

На днях прошла ежегодная конференция Google I/O, которая по количеству полезного не уступает эпловскому WWDC.

events.google.com/io

Уже начали выкладывать видео с выступлений на канал Google Design.

Много внимания посвятили дизайну: дизайн-система Google Material была существенно обновлена и теперь позволяет достичь больше гибкости. Это замечательный повод ещё раз изучить сайт material.io/design, если позволяет английский. Теперь разработчики могут использовать готовые системные компоненты под любую из платформ.

Юрий Ветров в своём посте для vc.ru проанализировал визуальные изменения: больше белого и скруглений.

Визуально новая операционная система Android P сближается с iOS и я нахожу эту унификацию хорошим трендом, который упрощает дизайн для разных платформ.

Няшная попсовая реклама про обновление:

Я расскажу о тех инструментах, которые вышли вместе с этим обновлением.

gallery.io

Сервис красивый и многообещающий, но пока сильно уступающий Зеплину по функциям. Можно авторизоваться через гугловский аккаунт. Умеет загружать макеты на сервер через плагин Material Theme Editor. Если использовать в макетах компоненты из дизайн-системы, даёт разработчикам ссылки на спеки компонентов.

Галерея в деле (англ.)

Есть приложение для обоих платформ, удобно смотреть макеты на устройстве. В том числе, длинные, в которых есть вертикальная прокрутка. Это камень в огород Скетч Клауда.

Разработчики могут смотреть размеры, отступы и цвета. Но Галерея не нарезает ассеты с признаком экспорта. А значит, пока не позволяет отказаться от Зеплина. С хотспотами тоже не работает.

– плагин для Скетча, который помогает собрать кастомную библиотеку. Облегчает создание дизайна на базе их дизайн-системы.

Плагин в деле (англ.)

Скачать: material.io/tools/theme-editor/

Что умеет:

Задавать цвета. Настраиваем палитру, которая будет применена к символам этой новой библиотеки. Доступны два семейства цветов, главное и второстепенное.

Задавать скругления блоков. настраиваем радиус скругления у фоновых блоков и карточек.

Управлять шрифтами на проекте. Задаём гарнитуры и начертания шрифтов для заголовков. Text Styles Скетча вообще не используются, все только в символах. Спорный момент. Не хочется терять поддержку текстовых стилей.

Подгружать наборы иконок. Системные иконки Матириала можно скачать в виде отдельных скетч-библиотек. Можно выбрать их стиль: залитые, с острыми и скруглёнными углами, контурные или двухцветные. Плагин умеет красить их в нужный оттенок.

Фактически, этот плагин — первый полноценный фреймворк для дизайнеров интерфейсов, который соединяет в себе мясо UI-кита и автоматизацию плагина. В удобном виде он позволяет привести цвета, шрифты и иконки в одну централизованную систему и легко генерировать макеты для разработчиков.

Я веду Скетч-дизайнер, телеграм-канал и сайт о дизайне интерфейсов в Скетче, плагинах и горячих клавишах. Также пишу о дизайн-системах, проектировании и UI-анимации в Фреймере.

--

--

Саша Окунев
/designer

Дизайн-лид в Kaspi.kz. Автор проекта /designer.