Тёплая дизайнерская осень: новостной Джедайст #37

За окном хмуро и сыро, зато перед глазами свеженький джедайст, а в ушах — с любовью собранный плейлист для лёгкого дэнса.

В этой статье

Смотрим на основной инструментарий

Сервис от Prototypr.io поможет разобраться в тулзах для прототипирования и найти по параметрам подходящее решение.

Во Framer X добавили Developer handoff, поддерживается экспорт в виде CSS и JSX, курсор меняется в соответствии с выбранным инструментом, прямо как в фотошопе. А ещё появилась официальная статья про то, как изучить функциональность инструмента.

У Figma пока ничего интересного: вернули в контекстное меню Flip Horizontal и Flip Vertical, да обновили в плане для организаций дашборд участников. Зато наметили следующие направления:

анонсировали Smart Layout как на Sketch (это то, что можно было раньше делать с помощью Anima);

Since many of you have asked, we thought we should let the cat out of the bag… pic.twitter.com/3rHtyvtNKy

— Figma (@figmadesign) September 23, 2019
рабочего приложения для планшетов пока не предвидится — сейчас работают над улучшением прототипирования на мобильных устройствах;
кажется, будут внедрять аналог Auto Animate из Adobe XD, судя по твиту;

Hi folks! Is there anyone out there who is a motion designer or otherwise a big user of prototyping in @figmadesign? Please dm. I’d love to ask you some questions. Thanks!

— Sho Kuwamoto (@skuwamoto) September 24, 2019
обещали подумать про введение брейкпоинтов и последующую перестройку макетов;
а ещё шла речь про вектор на сближение с Framer X.

Начните размещать официальную рекламу в Telegram Ads через click.ru

Зарегистрируйтесь и продавайте товары или услуги в Telegram Ads с помощью готового решения от click.ru. Опередите конкурентов!

Бюджет от 3 000 €. Это гораздо дешевле, чем работать напрямую.

Для юрлиц и физлиц. Юрлица могут получить закрывающие документы, возместить НДС. Физлица — запустить рекламу без общения с менеджерами.

3 способа оплаты. Оплачивайте рекламу картой физического лица, с расчётного счета организации, электронными деньгами.

Подробнее →

Кайфовый плагин от Airtable, который вставляет тексты и картинки из «БД» в компоненты.

Делаете символ и таблицу, копируете ссылку на последнюю, вставляете в окошко плагина и назначаете слои для отображения конкретных столбцов. Также есть настройки расположения айтемов.

Мы писали про AI-приложение Eyelato, моделирующее тепловые карты макетов. Появился аналог — бета Visual Eyes, доступный как в вебе, так и в виде плагинов к Sketch, Figma и Adobe XD. Обещают более широкий набор аналитики: areas of interest, scroll maps и демографические «изыскания».

Design System Manager от InVision — вообще лютая штука. Хранит все компоненты из Sketch (потом обещают InVision Studio подключить) с описаниями и гайдлайнами, сам генерит дизайн-токены и работает с версиями.

Интегрируется со средой разработки Storybook, которая позволяет просматривать состояния UI-компонентов, разрабатывать и тестировать их. Обещают два плана: бесплатный и Enterprise.

Сам подраздел интересно читать — внутри best practices и размышления по теме развития дизайн-систем от крутых ребят, в числе которых Брэд Фрост.

Represent — расширенный аналог Sketch Mirror. Просто делитесь id сессии, и в любом конце света (где есть интернет естественно) кто-то может примерить ваши макеты на своём iOS- или Android-устройстве. Круто для презентаций, в том числе и групповых. Стоит всё дело 4 $ в месяц или 35 $ в год.

Плагин для Sketch — Sketch Styler выполняет грязную работу: ищет и назначает похожие стили на нестилизованные элементы. Предлагается выбрать параметры, по которым будет выполняться поиск, например: шрифт, кегль, вес, выравнивание, разрядка, библиотеки компонентов, а также тип поиска — точный или похожий с процентом расхождения. Кайф же! Есть неделя на пробу, а потом придётся отдать 10 евро.

UI Bakery — WYSIWYG-инструмент, имплементирующий дизайн-систему, для создания Angular-приложений. Создавался, чтобы удешевить frontend-разработку, и должен, по заверению разработчиков, сократить ваши усилия аж на 73%. Плюс удобно для тестирования гипотез. Есть четыре тарифа:

бесплатный с 6 страницами, 3 виджетами и 2 темами;
начальный от 20 $ в месяц с 12 страницами и расширенными возможностями для брендинга;
обычный за 40 $ в месяц, где можно делать аж 3 приложения;
убер-вариант по договорной цене.

Работа с контентом

VeoLuz — инструмент, который имитирует взаимодействие фотонов с барьерами, поглощающими, отражающими и преломляющими свет. Может пригодится для визуалов и вдохновения.

Naker.Back — конструктор интерактивных фонов. Можно менять цветной задник и добавлять частицы из ограниченного списка, которые потом можно настроить — поменять количество, размер, цвет и поведение. А прочитать, как вставить получившуюся красоту на сайтец, можно в статье.

Очень много бесплатных иллюстраций на Glaze и humaaans-like конструкторе Fresh Folk (тут они уже в psd).

Хелперы

Простой веб-тул Subcolor, строящий нужное количество цветов между двумя заданными, — будет полезен как в подборе «того самого» цвета, так и для работы над визуализациями и всяческими графиками.

Ещё один сервис про создание цветовых вариаций — Copy Palette. Выбираете базовый цвет, регулируете количество оттенков и контраст, а потом копируете svg.

UIprint — набор макетов в точечку для быстрого скетчинга. Внутри телефоны и окно браузера в нескольких комбинациях, а также заполняющий паттерн для печати на А4.

Шаблон для планирования сценариев и исследования поведения пользователей. Можно заполнить прямо в браузере и скачать в виде html.

Ранее в сериале: