Отличный рассказ от AirBnb

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

Не так давно ребята из AirBnb выпустили ролик, который очень здорово демонстрирует продукт. История про людей и для людей!

Подготовка SVG изображений для разработки

SVG — векторный формат для описания изображений текстом

Создание

Ограничение рабочей области (Canvas)

Рабочая область основного контейнера не должна превышать 200 px

Преобразование форм и назначение цвета

Все линейные формы и текстовые слои следует преобразовывать в монолитные формы (<path>) используя Flatten selection.

Максимальная длина <path> не должна превышать 800 символов

Чтобы не терять цвета в проектах, следует использовать объединение векторных форм и назначать цвет на это обьединение. Это позволит менять форму без сброса цвета в проектах. В экспортированном SVG — объединение отображаться не будет.

Кнопка в Figma
Union с двумя формами внутри и две отдельных формы
Кнопка в Figma
Кнопка в Figma
Кнопка для монолитного преобразования в Figma

Экспорт

Масштаб и мета-информация

Важно следить за следующими моментами при экспортировании файлов нативными средствами или через плагины:

  • экспортирование происходит один к одному, без добавления дополнительных модификаций по масштабированию
  • удаляться должна, только ненужная мета-информация включая параметры width и height.

Наименование файлов

Все файлы называются с использованием букв латинского алфавита в нижнем регистре без использования специальных символов. Пробелы между словами заменяются на нижнее подчёркивание _ Связанные слова разделяются дефисом -

Примеры правильных наименований:

cat.svg
my-dog.svg
cat_and_dog.svg
big-dog_and_small-cat.svg

Пример правильно подготовленного SVG файла:

<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.17157 2 4.5 2.67157 4.5 3.5C4.5 4.32843 5.17157 5 6 5C6.82843 5 7.5 4.32843 7.5 3.5C7.5 2.67157 6.82843 2 6 2ZM3.5 3.5C3.5 2.11929 4.61929 1 6 1C7.38071 1 8.5 2.11929 8.5 3.5C8.5 4.88071 7.38071 6 6 6C4.61929 6 3.5 4.88071 3.5 3.5ZM3.04148 10H8.95852C8.72048 8.58114 7.4865 7.5 6 7.5C4.5135 7.5 3.27952 8.58114 3.04148 10ZM2 10.5C2 8.29086 3.79086 6.5 6 6.5C8.20914 6.5 10 8.29086 10 10.5C10 10.7761 9.77614 11 9.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z" fill="#07081B"/> </svg>

Важно

Запрещено использование фильтров (<filter>), символов (<symbol>), групп (<g>) и CSS стилей (<style>), масок (<mask>), а также внедрение растровых изображений (<image>).

Сильно детализированные векторные изображения — урон производительности.

Экспортированные файлы всегда следует проверять перед передачей в разработку или выгрузкой в репозиторий для избежания ошибок.

Дополнительно к ознакомлению

Long Vector Path

Vector Image Generation

Figma: как перенести проект в аккаунт организации

Figma предоставляет доступ к трём тарифным планам: Starter (бесплатный), Professional и Organization.

Кто-то пробует в Starter и позже обновляет до Professional, а кто-то сразу начинает с Organization. В любом случае достаточно частая ситуация, когда требуется из Starter или Professional перенести проект в Organization.

Сразу возникает вопрос «Как переместить проект в Organization?».

Figma не предоставляет пользователям такую возможность, но может помочь перенести проект (именно проект, а не команду).

Для того чтобы перенести проект вам потребуется:
  1. войдите в Figma
  2. выделите проект и нажмите правой кнопкой мыши, а затем нажмите на пункт Share в открывшимся меню
  3. скопируйте ссылку нажав на кнопку Copy link
  4. откройте блокнот и вставьте в него ссылку (чтобы не потерялась)
  5. нажмите на пространство команды уже в списке аккаунта Organization, затем скопируйте ссылку из строки браузера и также добавьте в блокнот
  6. напишите письмо (через форму на сайте) в поддержку Figma с просьбой помочь перенести проект, приложив ссылки на проект и команду в которую переносим. Не забудьте поставить в копию почту на которую оформлен аккаунт Organization
  7. зайдите в почту аккаунта Organization и напишите, что подтверждаете перенос

Через какое-то время прийдет письмо с ответом из поддержки с уточнением или положительным ответом.

Еще один важный момент: у команды в которой находиться проект для переноса, должна быть выставлена опция Can edit, иначе перенос невозможен.

Если вы всё правильно сделали, то перенос осуществят в течении суток.

Framer — Введение в продукт и рабочая среда

Этим видео я открываю курс по созданию прототипов с помощью Framer.

Вы научитесь создавать, как простые так и высокодетализированные прототипы, узнаете как работать с реальными данными, компонентами, кодом и презентацией

Создание 3D людей в реальном времени

MetaHuman Creator — это облачное приложение, предназначенное для цифрового создания человека в режиме реального времени.

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

Вы можете выбрать из примерно 30 причесок, которые используют волосы на основе прядей Unreal Engine, или карты для причесок для платформ нижнего уровня.

Существует также набор примеров одежды на выбор, а также 18 различных типов тела. Когда вы будете довольны моделью, вы можете загрузить ресурс через Quixel Bridge, полностью готовый к анимации и захвату движения в Unreal Engine. Вы также получите исходные данные в виде файла Maya, включая сетки, скелет, лицевой установки, элементы управления анимации и материалы.


Попытки создания высокодетализированных моделей были и ранее, правда не редактируемых: пример 2017 года, а вот пример из 2018.

Саймон Синек — Как выдающиеся лидеры вдохновляют действовать, 2009

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

Саймон Синек рассказывает на примере модели «Зачем, Как? Что?».

3D карты от Mapbox для своих проектов

Давно слежу за Mapbox и мне нравиться, что они делают и куда идут.

Недавно компания представила продвинутый функционал для использования в своих проектах 3D-ландшафтов. Стоит отметить, что это вторая версия данного функционала — WEB-SDK GL JS v2.

Теперь можно делать крутые пролёты над вулканами, делать инфографику с кусками реальных ландшафтов, выводить данные по городам на континентах и многое другое.

Помимо этого можно управлять временем суток.

Ребята из Mapbox провели огромную работу по оптимизации потребления ресурсов и добились отличных результатов.

Подробнее можно почитать тут.

Как скачать все картинки с сайта

Для браузера Google Chrome есть прекрасное расширение, которое позволяет скачивать картинки — Fatkun.

Расширение предоставляет расширенный функционал работы с фильтрацией и выбором. Может сохранить изображения из текущей вкладки или изо всех открытых.