10 мая 2018, 11:30

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) — запустили блог. Там ребята делятся историями создания дизайна, уроками по фотографии и источниками вдохновения разных иллюстраторов.

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

Ещё больше полезных инструментов для веб-дизайна: часть первая, часть вторая

Есть тема, в которой вы профи, и хотите выпускать на Cossa собственный дайджест? Пишите, обсудим: news@cossa.ru