Развлекательный Джедайст #92

Продолжаем расслабленный летний вайб. В свежем Джедайсте собрали 26 инструментов, обновлений и материалов. Наливайте себе чего-нибудь прохладненького и айда читать!

Про Фигму, Скетч и Фреймер

В Figma улучшают механизмы создания плагинов и виджетов (для чего запартнерились аж с Asana и Jira). Среди всякой дичи в духе «калькулятора» и «камня-ножниц-бумаги» можно найти и полезные голосовалки, панельки с задачами из той же Jira, таблицы и заметки.

Пока 90 по счету бета-версия Sketch научилась только автоматически обновлять применяемые в файле библиотеки (а еще улучшили перетаскивание картинок в инструмент, экспорт в PDF и добавили Background Blur для полупрозразных изображений), в Framer целый ворох новинок!

Новый инструмент «Layout» поможет быстро создавать адаптивные макеты на базе шаблонов: «Строки», «Колонки», «Обтекание» и «Сетка». Выглядит такой экземпляр на странице как набор фреймов, который можно кастомизировать для каждого брейкпоинта — выбрать способ размещения, направления, распределения.

Появилась поддержка градиентных текстов, добавились реалистичные тени с настройкой рассеивания и фокуса, была улучшена работа с CMS и их контентом (теперь можно показывать полнроэкранные фото по клику). Инструмент обзавелся быстрой поисковой строкой как в плагине Runner для Скетча или в Figma. Нажимая с любого экрана cmd+K или ctrl+K (на Windows), появляется меню, откуда можно перемещаться по проекту, переключать компоненты, приглашать других пользователей, делиться ссылками, а также искать и применять другие настройки. Красота!

Продуктивность на максимум!

Любителям ускорять работу через шорткаты однозначно зайдет расширение Design Maestro для приложения под macOS Keyboard Maestro. Инструмент уже содержит инструкции-макросы для ускорения дизайнерской рутины: оптимизирование картинки, удаление фона с изображений, копирование текста с изображений. Более того, можно создавать свои собственные автоматизации.

Фигмавский плагин Prototyper — эдакий заменитель Protopie с похожим названием. Позволяет превращать статичные макеты с помощью JS в анимированные прототипы разной сложности: от ползунка яркости до механики pull-to-refresh. Цена вопроса — от $9/месяц.

Останови мгновение

Расширение BrandBird для браузера Chrome — продвинутая скриншотилка для сайтов. Пока доступно только несколько вариантов картинок: скриншот открытой вкладки, определенный элемент на произвольном фоне, выделение элементов на странице (что отлично подойдет для гайдов или рассказа о новых функциях). Бесплатно можно экспортировать картинки только с логотипом инструмента, а расширенная функциональность обойдется от $10/месяц.

Еще одна скриншотилка — Lapse записывает тайм-лапсы с экранов. Приложение под macOS и Windows автоматически приостанавливается, когда компьютер неактивен. Цена вопроса — 25 вечнозеленых.

В прошлом сентябре мы писали о сервисе Tango, который позволяет делать гайды по использованию веб-продуктов: автоматически делать скриншоты, описывать действия на странице, изменять контент и, наконец, делиться результатом по ссылке. Вторая версия представляет собой десктопное приложение, которое позволяет документировать процессы уже за пределами веба и с учетом переключений между приложениями. Также появились командные пространства, где могут работать сразу несколько человек.
Браузерное расширение с ограничениями (25 пользователей в команде — по 25 записей на каждого) остается бесплатным, а за безлимит и десктопное приложение придется отдать от $16/месяц за пользователя.

Генерируй и играй

Hololink поможет делать инерактивные приложения для дополненной реальности с 3D-объектами, изображениями, видео, аудио, анимацией и настраиваемым интерфейсом. Есть неплохой бесплатный тариф «на попробовать», а за pro-доступ придется заплатить $59/месяц.

Давненько мы не писали о конструкторах сайтов и приложений! Новый редактор Bubble научился использовать флексбоксы для разработки адаптивных веб-страниц. Бесплатный тариф подразумевает брендирование результата, а снятие ограничений обойдется от $25/месяц.

Еще один инструмент для анимации — Designstripe Crayon позволяет анимировать любую SVG-иллюстрацию в «штрихованной» манере онлайн. Результат можно сохранить как гифку или Lottie-файл.

Полезности одной строкой

Генератор самых разных SVG-шек Fffuel. Паттерны, спирали, текстуры, стрелки, волны — чего только там нет.

Пока далеко не ушли от SVG, ловите разбор неочевидных применений векторной графики от Smashing Magazine.

Бесплатная cжималка изображений.

Волшебный ластик онлайн. Бесплатно.

Условно-бесплатный апскейлер с удалением шума и повышением резкости. В том же пакете еще есть удалялка фонов и опять же волшебный ластик.

Симпатичный набор линейных SVG-иконок.

Как работать играючи

Крупно обновилось приложение для организации референсов Eagle. Появилось сообщество, где можно делиться источниками, как в Фигме. Появилась поддержка zip и rar-архивов, epub-книжек и ряда других форматов. Теперь можно записывать экшены для комбинации ряда действий, как в Фотошопе. Есть возможность сохранять комбинации фильтров, появился раздел «Недавние файлы», расширились возможности для просмотра видео, упростился перенос файлов в другие библиотеки и инструменты.

Web 3.0 приходит и в сферу рабочих инструментов — командный пакет Skiff предлагает децентрализованную электронную почту, групповой текстовый редактор в духе Ноушена и распределенное облако. Бесплатно доступно только 10Гб и ограничена история изменений, за pro-тариф придется отдать $12/месяц за пользователя.

Сервис для проведения исследований Ballpark теперь позволит создавать опросы и UX-задачи в простом конструкторе, тестировать прототипы Figma и Marvel с поддержкой тепловых карт и карты кликов, записывать видео участников исследования, а затем просматривать ответы. Бесплатно можно завести только один проект, а дальше начинаются дикие цифры от $100/месяц.

Пара слов о дизайн-системах

Евгений Шевцов, руководитель UX в Usetech, составил ультимативный гайд по дизайн-токенам на основе своих исследований и опыта. Разложил чуть ли не все: от необходимой теории и целей токенов, до непосредственной работы с JSON и CSS. Наше почтение и упоминание в Джедайсте.

Подборка полезных в этом деле плагинов для Figma. Вдруг среди знакомых Master или Similayer приметите что-то полезное для себя.

Про буквы и тексты

Нежно любимый нами за классные материалы по UI Erik D. Kennedy представил интерактивный гайд по типографике. Ресурс научит подбирать шрифтовые сочетания, составлять подходящие типографские шкалы, настраивать параметры и расскажет об основных текстовых паттернах в UI.

Oliver Schöndorfer предлагает новый способ комбинировать шрифты — с помощью матрицы шрифтов.

В рамках недавней WWDC22 ux-писательницы Kaely Coon и Jennifer Bush из Apple рассказали о написании интерфейсных текстов.

Сборник материалов по этичному дизайну Ethical Design Resources. Статьи, книжки, инструменты, принципы — все тут.