В номере: красивый гугл-календарь и лонг-рид про то, как Sketch оказался лучшим (на самом деле нет)
Ланч-тайм 159: краткий перевод свежих статей о digital
Сибирикс
Ланч-тайм 159: краткий перевод свежих статей о digital
В номере: красивый гугл-календарь и лонг-рид про то, как Sketch оказался лучшим (на самом деле нет)
#659
Что нового в Гугл-календаре
В календаре Гугла произошли изменения: он обновил дизайн и добавил фишечек для событий, новых функций для просмотра и парочку полезных настроек, которые обещают сэкономить время и порадовать удобством.


Беглый просмотр информации о событии

Теперь одним щелчком по событию в календаре можно увидеть все подробности:
  • список всех гостей с их ответами на приглашение (отклоненные и принятые),
  • комнаты и местоположения для проведения совещания,
  • вложения,
  • ссылки на любые видео-коллы,
  • и даже больше.

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


Быстрое добавление новых событий

Создавайте новые события, просто нажав в пустое расписание в календаре.
Можно сразу прописать, не заходя на страничку мероприятия:
  • название,
  • время проведения,
  • календари, в котором участвует событие.
Если нужно добавить гостей или указать подробную информацию, нажмите на кнопку «Дополнительные параметры».

Также можно создавать новые события, просто нажав на плюсик «Добавить событие» внизу справа.


Новые параметры просмотра

Теперь календарь показывает события с разным статусом: выбирайте те, которые хотите видеть. Календарь запомнит изменения, внесенные вами, и при следующем входе в систему покажет расписание с заданными настройками (пока вы их снова не поменяете).
Статус приглашений

Теперь события в календаре выглядят по-разному в зависимости от того, как вы ответили на приглашение принять участие в мероприятии:
  • если вы планируете его посетить, у события будет сплошная заливка цветом,
  • если вы ответили «возможно», календарь покрасит событие диагональной штриховкой,
  • если вы ещё не ответили, календарь отобразит черновик события,
  • а если вы отклонили приглашение, то увидите только рамочку с перечеркнутым названием события.


Настройки вида

Теперь можно скрывать или отображать выходные дни при просмотре своего календаря. А чтобы бегло просмотреть календарь на весь год, выберите «вид на год».

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

Чтобы управлять компоновкой расписания и набором цветов вашего календаря, настройте «Параметры плотности» и «Цвет». Также можно выбирать плотность отображения: привязать календарь к формату экрана или выбрать компактный режим. Плюс дополнительные настройки по набору цветов: современные или классические.


Другие календари

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


Все настройки в одном месте

Чтобы открыть страницу настроек, кликните по выпадающим друг за другом пунктам «Настройки».
Открывайте доступ к календарю или разрешайте изменения: щелкните на его название слева от страницы с настройками и выберите настройки совместного доступа.

Теперь можно просматривать и удалённые события: все они хранятся в корзине (доступ через меню настроек).


Как попробовать

Откройте свой Google Calendar, найдите в правом верхнем углу экрана кнопку «Использовать новый календарь» — вуаля!

Не понравилось? Чтобы вернуться к старому виду, в меню настроек выберите «Назад к классическому календарю».

А если в вашем календаре нет кнопки «Использовать новый календарь» — сорри, пока новая версия недоступна для вашей учетной записи.
Вывод: Гугл-календарь разрешил создавать события щелчком мыши и даже раскрашивать их, а перетаскивать запланированные на день мероприятия в расписание так и не может. И да, корпоративные аккаунты пока в пролёте. Вы сэкономили 7 минут.
#660
Sketch vs Figma vs Adobe XD. Спойлер: Sketch по-прежнему лучший
Sketch vs Figma vs Adobe XD: Spoiler Alert – Sketch Still Wins
Когда появился Sketch, многие дизайнеры, оценив его легкость и простоту использования, изменили Фотошопу или Fireworks. Поскольку Sketch был новым и единственным игроком в сфере дизайна интерфейсов, рынок был открыт для разработок конкурентов. И ответочки от Adobe и Figma на заставили себя ждать: каждый из них представил инструмент с особенным набором функций, который их выделяет. Но для дизайнеров вопрос в другом: какой из трёх инструментов наиболее эффективен?


Организация страниц и слоев

Sketch
Здесь вы можете упорядочивать элементы по слоям и страницам. При работе с несколькими монтажными столами можно хранить 5-10 соответствующих монтажных панелей на странице и убирать их, если нужно сфокусироваться на чём-то другом.

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

Adobe XD
Adobe имеет ту же иерархию монтажных столов, групп и элементов, что и Sketch с Figma, но обходит их в организации слоёв — их можно сгруппировать и разворачивать группы отдельно, чтобы не запутаться.

Sketch выигрывает за счёт добавления вкладки "страницы", хотя «умные» слои у Adobe XD тоже хороши.
Умные направляющие и привязки

У Скетча есть существенная проблема: при перетаскивании элементов он постоянно пытается привязать их к чему-нибудь, но почти всегда делает это неправильно. Приходится ровнять стрелками и вот это вот всё.

Figma делает отличную привязку к краям, в центре, привязку к равномерным распределениям и т.д. И это работает, в отличие от некоторых.

Adobe XD столь же надежен, как и Фигма. Единственная добавленная функция — розовый индикатор для равномерного распределения объектов, что очень удобно.

Здесь Adobe XD обошёл конкурентов :)
Отзывчивый дизайн

Sketch
Имеет встроенный функционал отзывчивого дизайна: можно задать ограничения объектов привязкой к краю или к углу родительской группы, а также ограничения символов статической шириной или выравнивание при растягивании вместе с родительскими объектами или группами. Чего-чего, а вот ограничений объектов по сетке или установки фиксированных полей тут почему-то нет.

Figma
Обладает невероятно мощными инструментами для гибкого дизайна. Можно ограничивать компоненты для формирования столбцов и строк: например, при растягивании монтажной панели элементы тоже растягиваются, но поля между ними всегда имеют заданное значение. Скетч так не умеет.

У Adobe XD вообще ничего такого нет.

В плане отзывчивости Фигма рулит.


Макеты и прототипы

Sketch
До появления плагина Craft Prototyping, процесс прототипирования был похож на ад: сначала экспортируй слои в дропбокс, потом подключи его, после свяжи их вместе. Теперь всё просто и легко при помощи кнопочки синхронизации. Интеграции Скетча с инструментами InVision делают его супермощным софтом для создания макетов.

Figma
В Фигме можно связать элементы и компоненты с монтажными панелями и просмотреть прототип. Также можно делиться ссылкой на прототип и получать по нему фидбек — хранятся все версии изменений, комментариев и обновлений, и к ним можно всегда вернуться.

Figma также имеет интеграцию с Framer (инструмент для создания прототипов на основе кода) — его сила в анимации прототипирования: можно показать, как оживают анимация страницы и элементы при нажатии и перетаскивании.

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

Adobe XD хорош в прототипировании простых приложений, для более объёмных лучше всего подходит всё-таки Sketch.


Совместный дизайн

Такая штука есть только у Figma. Это как в совместных Гугл-документах: дизайнеры из вашей команды могут редактировать макет прямо у вас на глазах! Плюс всегда есть история изменений, если нужно сделать откат к какой-то из версий.
Комментирование

Sketch
У Скетча нет встроенных возможностей для комментирования — приходится пользоваться онлайновым Invision для клиентов и коллег или ставить плагин, чтобы разделять страницы, доступные для комментирования. Комментарии в обоих случаях оторваны от самого Скетча.

Figma
Можно комментировать в любой точке экрана и упоминать товарищей по команде: если сотрудники в оффлайне, они получат электронное письмо со ссылкой на комментарий. Если онлайн — увидят комментарии в прямом эфире.

Особенно круто для презентаций: заказчик делает какие-то замечания, а дизайнер вносит изменения за секунды, и всё это отображается на экране с презентацией: вот это вау-эффект!

Adobe XD
Здесь тоже нет встроенного комментирования: нужен Adobe Creative Cloud. Но и эта функция не слишком удобная: сначала нужно написать комментарий в поле справа, а после прикрепить его в нужную точку макета.

И тут Фигма обходит всех!


Параметры текстовых стилей

Sketch
Основные стили: подчеркивание, зачеркивание, есть типы списков, преобразование текста и переключение между фиксированной и автоматической шириной. Не хватает индексов и надстрочных символов, а также возможности переключиться между верхней, средней или нижней частью области текстового поля.

Есть поле «Текстовые стили», где можно сохранять и применять стили текста к нескольким текстовым элементам. Удобно при работе с заголовками на сотнях страниц.

Figma
Есть всё, что только можно, но всё-таки не хватает типов списков или возможности генерировать нумерованные или маркированные списки.

Adobe XD
Здесь есть параметры интервалов, но не хватает функции переключения между текстом фиксированной ширины и текстом автоматической ширины. Текстовый инструмент автоматически предполагает, что ширина будет увеличиваться по мере ввода. Если нажать и перетаскивать текстовую область — это будет текстовое поле с фиксированной шириной. Но если позже вы решите, что текстовое поле с фиксированной шириной должно преобразоваться в поле с автоматической шириной, придётся копипастить из одного в другое. Скука.
Хотя Фигма стили и не сохраняет, и здесь она обошла конкурентов за счёт её тонких настроек, которые легко решают эту проблему.


Повтор сетки

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

Adobe XD
С плагином Repeat Grid можно легко изменить макет сетки на одном слое, и он изменится на остальных. Правда, контент из интернета вставить сюда не получится, но локальные файлы можно легко переставлять и копировать в дубликаты.

У Figma ничего такого нет (возможно, пока).

Скетч по этому параметру выигрывает.


Стилизация объектов и слоев

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

Figma
По функциям тут тоже неплохо, но не во всём: например если к одному объекту добавлено несколько штрихов, над ними нет индивидуального контроля по размерам и выравниванию. Приходится добавлять слои под каждый из них.

Adobe XD
Основы: заливка, граница, тень и размытие объектов. Нет функционала для внутренних теней или выравнивания границ снаружи, по центру или внутри. Нельзя добавлять несколько стилей друг к другу, как с Figma и Sketch.

Тут всех обошёл Sketch.
На эффекты в Скетче ушло 3 слоя, в Figma — 4, а в Adobe XD — 8.
Создание иконок

Sketch
У Скетча полно ошибок и неудобств при создании иконок: например, логические инструменты для объединения и вычитания некоторых фигур работают нормально для слияния 2 или 3 фигур. Слияние свыше 3 объектов даёт неожиданные результаты.

Figma
У Фигмы революционный инструмент создания иконок: при использовании инструмента "перо", если линии соединены между собой, Figma считает это целой фигурой, которую можно легко масштабировать и изменять.

Adobe XD
Тут всё очень стабильно и чётко, не зря же они столько лет Иллюстратор обновляли и дорабатывали: в векторном дизайне Adobe знают толк.

Но в иконках побеждает Фигма.


Символы и компоненты

Figma и тут обошла всех: вместо того, чтобы создавать новые компоненты для каждого сценария состояния у значка, можно настроить главный элемент, а после обновить все остальные по аналогии с ним. В Скетче приходится сделать не меньше 11 символов. А в Adobe XD постоянно приходится следить за связями между символами, иначе придётся менять каждый отдельно.
Экспорт в код

Sketch
У Скетча можно копировать атрибуты CSS или SVG, а также с помощью плагина Lunchpad быстро публиковать простенькие сайты на основе эскизных проектов.

Figma
У Фигмы можно автоматически переключаться между атрибутами CSS, iOS или Android. Вы также можете щелкнуть правой кнопкой мыши по любому элементу и скопировать тот же CSS или SVG код, что и в Sketch.

Adobe XD в пролёте. Победила Figma.


Плагины

Скетч, как описано выше, интегрируется с множеством плагинов, и это удобно для конкретных ситуаций. А вот у Figma и Adobe XD с этим плохо.
Так что Sketch на коне.


Совместимость

Sketch
Это продукт только для Mac, а для пользователей Windows остаются Figma или Adobe XD.

Figma
Поскольку Figma имеет версию для браузера, она совместим практически с любым устройством. Проблема только в том, что она не поддерживает оффлайн-редактирование: всегда нужно подключение к Интернету.

Adobe XD
А вот этот инструмент всеяден: поддерживает и Mac, и Windows :)

Победитель по совместимости — Фигма, потому что можно работать из любой точки. Если ваша команда всё ещё предана Windows или Mac, их только могила исправит.
Вывод: Фигма крутая и заткнула за пояс и Скетч, и приложуху от Adobe. Но автор оригинальной статьи в заключении почему-то решил, что Скетч всё ещё лучший. Ну не зна-а-аем:) Вы сэкономили 15 минут.
Теперь вы гуру гугл-календаря и можете поддержать беседу с UX-дизайнером, споря о плюсах и минусах трёх инструментов за бутылочкой крафтого пива в баре. А мы побежали покупать тыквы, чтобы вырезать их к Хэллоуину! До встречи в ноябре :)