Red Collar: 14 свежих инструментов для веб-дизайнеров
Главные релизы и тренды последних недель. Собрали в Red Collar, упаковали в Cossa.
Figma и дизайн-системы
Figma опубликовала статью с разбором своего API для создания «живой» дизайн-системы. Тема активно обсуждается в сообществе, Medium переполнен статьями по теме. Юрий Ветров, арт-директор Mail.Ru Group, собрал коллекцию тематических книг, а также подробно рассказал о создании дизайн-системы в Mail.Ru. Рекомендуем:
Тем временем UXPin, который также сменил вектор на создание дизайн-систем, выпустил приложение для macOS и Windows. UXPin помогает в создании непосредственно дизайн-системы, ее документировании и генерации спецификации для разработчиков.
UI-кит и полезные плагины для Sketch
Переходим к Sketch. Ловите UI-кит с полной кастомизацией: все компоненты описаны символами и текстовыми стилями и построены на атомарной структуре с использованием констант, что позволяет легко адаптировать компоненты для разных экранов. Разработчики обещают в скором времени сверстать все эти компоненты и связать через плагин.
FontBuddy позволяет устанавливать шрифты в систему прямо из программы. Главная фишка - поддержка Google Fonts.
Sketch Split Shape - плагин, который умеет разбивать прямоугольник на равные части с заданными margin и gutter. Очень удобно, когда нужно вписать новую сетку в уже готовую.
Sketch Smart Style Switcher умеет применять текстовый стиль для слоя, если его параметры совпадают с уже созданными. Помогает избежать дублей и рутины из-за долго поиска нужного стиля.
Sketch Symbols Manager позволяет переименовать символы через удобный интерфейс: перетаскиваете компонент в нужную папку - и он меняет имя на лету. Плагин также находит и удаляет неиспользованные символы. Так можно легко создавать нужную структуру организации символов.
Формат сториз также добрался Sketch. Plot позволяет делиться работой с коллегами, посты автоматически исчезают через 24 часа. Доступно из веба или приложения для macOS.
Прототипирование: Framer, Atomic, Phase
Modular - бесплатный Android UI-кит с огромным количеством элементов из Material Design для быстрой сборки прототипов в Framer. Копируйте, вставляйте туглы, клавиатуры или слайдеры. Все компоненты настраиваются под ваши нужды и адаптируются под различные размеры экранов.
Phase позволяет создавать не только прототипы, но и готовые сайты и приложения. Судя по заявленным фичам, на базе Phase можно собирать переиспользуемые компоненты и распространять так называемые дизайн-токены. В базовом наборе программы: работа с реальными данными, комментирование, версионность. Ждем лета, а пока познакомьтесь с Phase ближе можно в их блоге.
Atomic опубликовал статью про создание различных навигационных паттернов внутри продукта. Все примеры в свободном доступе, детально описаны сценарии их использования - осталось только взять работу. Эти решения позволят ускорить процесс прототипирования и упрощают выбор навигации для вашего интерфейса.
Инспирейшн от Serif и дизайн-паттерны
Serif - авторы Affinity Designer и Photo (продуктов, которые позиционируются как довольно успешная альтернатива флагманским Photoshop и Illustrator) - запустили блог. Там ребята делятся историями создания дизайна, уроками по фотографии и источниками вдохновения разных иллюстраторов.
Саша Окунев, популярный дизайн-блогер, дополнил свой блог разделом о дизайн-паттернах. В одном из последних постов он разобрал, как правильно спроектировать ввод данных банковской карты и описал типичные ошибки процесса разработки формы.
Еще больше полезных инструментов для веб-дизайна: часть первая, часть вторая.
