Figma для 3D? Не совсем, но близко: вышел новый веб инструмент для создания 3D, который живёт в веб среде — Spline. (spline.design) Я давно хотел продолжить осваивать трёхмерное пространство, и этот инструмент меня вдохновил с первых секунд! Тут можно не только творить композиции из примитивов, но и создавать с ними интерактивные инсталляции в вебе. Кликни сердечко: https://my.spline.design/heart-ca5a067ab84484b8aed9820809d1f473/ ❤️

Я наигрался с анимациями и решил переместить свои объёмные творения в Figma. Экспортировал прозрачный объект со светом и непрозрачный без света, использовал второй как маску, и вот получился 3D объект с легко изменяемым цветом прямо в Figma! Пока их только два, но я буду дополнять набор: https://figma.fun/kR6xZM

Что это? Концептуальный визуальный язык программирования. Понимаю ли я тут что-то? Нет. Круто ли это? Очень!

По описанию авторов xoL — это попытка создать элегантный графический интерфейс для программирования общих задач, который одинаково удобно использовать независимо от устройства: будь ты за экраном компьютера или телефона.

Демо: http://xzzulz.github.io/xra9/

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

“Визуальный редактор кода” — на этот раз ближе к дизайну, — Modulz выходит 21 декабря! Этот инструмент сильно напоминает Figma снаружи, но внутри всех элементов лежит реальный рабочий код. Сейчас между элементами дизайна и разработки есть огромный разрыв. Хоть мы и уже ушли из дизайна интерфейсов в фотошопе, дизайнеры всё ещё создают “картинки”, которые разработчикам приходится описывать с нуля.

Зарождаются и инструменты, которые стремятся сократить этот разрыв. Modulz, Visly, Plasmic, Cabina, Handoff, Views, Subform† — это визуальные редакторы кода. В то время как Figma упрощает процесс передачи макетов в разработку, эти задают вопрос: а нужен ли он вообще? Они говорят, что создают лучшую альтернативу графическим редакторам — ну что ж, будем смотреть как всё будет меняться в течение следующих пары лет. Потенциал у них явно большой.

Следующий тип инструментов, которые пытаются эту проблему решить: конвертеры из графических редакторов в код (aka Figma to Code). Примеров приводить не буду, так как пока не нашёл ни одного, который бы хорошо справился со своей задачей. Большинство тупо берут доступные свойства в Figma и воссоздают их в коде. А это значит, что макет хоть и выглядит правильно, да не работает: никакой семантики, логики, а про адаптивность я вообще молчу.

Я как-то представил себе такую шутку: было бы классно, если бы файлы в Figma как-то связывались с кодовой базой, но не так, чтобы просто создавался код из Figma, а чтобы релевантные для отдельных элементов части импортировались из Figma как переменные, но при этом сами элементы создавались бы вручную. Кто-то сделал из чего-то похожего стартап: Contrast App позволяет объединить кодовую базу в StoryBook и Figma и проводить их сравнения при изменениях.

Вот вам и ответ на вопрос “должны ли дизайнеры уметь кодить” — да, они будут кодить, если дать им графический интерфейс, который будет достаточно мощным, чтобы разработка визуальной части интерфейса могла быть сделана теми же усилиями, а то и меньшими, чем сейчас рисовать прямоугольники в Figma.

Почему не стоит делать иконки вариантами?
Самая главная проблема — огромный список без превью. Figma только решили проблему свапа компонентов: раньше это делалось в огромном многоуровневом списке. Сейчас в меню Swap Instance не только легко ориентироваться, но есть и превью, и самое главное для иконок — поиск. Можно даже добавлять синонимы в описание компонента, чтобы легче их находить. Все эти прелести исчезают при использовании вариантов — у тебя остаётся один общий компонент “какой-то иконки”.

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

Замечательная словолитня, все работы которой находятся в открытом доступе, Velvetyne не перестаёт радовать! Один из их акцидентных шрифтов под забавным названием Pilowlava был перерисован в 3D для использования в 3D среде. И вот какая красота из этого вышла:
https://velvetyne.fr/news/pilowlava-3d/

Модели в разных форматах (.blend, .c4d, .fbx, .obj) можно скачать свободно и использовать в любых своих творениях уже сейчас. Pilowlava 3D распространяется под лицензией Free Art License, которая требует указания автора при использовании.

Зацени новый дизайн сайта ЦРУ: https://www.cia.gov/ Как тебе эти анимации, современная типографика, и в целом трендовый лук? Круто видеть, когда государственная организация идёт в ногу со временем.

Или нет? Если посмотреть с другой стороны — возможно это означает, что все эти “тренды” стали уже такой обыденностью и стиль настолько изжил себя, что даже до “обычных” сайтов это дошло. Пора изобретать новое!