gleb.sexy
411 subscribers
103 photos
19 videos
61 links
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Поигрался с именами — они используются для сохранения оверрайдов когда возможно. Тут я поменял местами имена крестов в разных вариантах и они меняются цветами. В связи с этим, кстати, теперь нельзя переименовывать слои в инстанциях.
Как думаешь, почему людям важны какие-то специальные отличительные знаки? Флаги, гербы, эмблемы, логотипы?

Беглое гугление даёт в основном материалы для пятиклассников. В них говорится про функциональный аспект эмблем: они нужны чтоб различать рыцарей в бою. Но это не даёт понимания зачем, например, существует куча разных флагов для разных сексуальных ориентаций. Да и вообще флаги и гербы сейчас зачем нужны?

Из моих знаний о логотипах, ключевой смысл логотипа всегда один — идентификация. Нужно чтобы можно было отличить одно от другого.
“Дизайнеры: если вы думаете, что ваша работа в безопасности от автоматизации — вы ошибаетесь. Всё функциональное творчество будет передано машинному обучению для определения идеального решения путём А/Б тестов. Единственная роль людей творческих профессий в будущем — искусство ради искусства.” — сказал кто-то в твиттере.

Заменит ли ИИ математиков, программистов, учёных и людей других творческих профессий? Я считаю, что искусственный интеллект станет помощником, а не заменит их. Мы будем быстро генерировать и выбирать подходящие варианты расположения элементов, заполнять всё контентом. Уже сейчас ИИ может генерировать заголовки и содержание для лендингов — тебе лишь нужно выбрать и подправить желаемый вариант. Также ИИ уже сейчас может проверять композицию, подсказывать какие элементы привлекают больше всего внимания. Знаешь ещё примеры?

При этом многие дизайнеры были обеспокоены, когда Студия Артемия Лебедева представила ИИ дизайнера, который умеет находить довольно интересные и необычные на мой взгляд визуальные решения. Но без живого дизайнера тут тоже не обойтись: он просматривает сгенерированные картинки, выбирает подходящие, верстает с ними макеты. Нужно не бояться искусственного интеллекта, а учиться применять его возможности в своей работе.
Заменит ли дизайнеров искусственный интеллект?
Anonymous Poll
24%
Да
76%
Нет
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.
Когда вышла новая фича и ты пытаешься её везде использовать, не понимая зачем, потому что это с виду кажется удобным. Каждая иконка имеет несколько цветов, размеров, вариаций толщины обводки...

Источник: https://twitter.com/rmstinson/status/1337546404202336256

Небольшой лайфхак: чтобы узнать, сколько вариантов у тебя получится, надо перемножить все значения. Например для кнопки 5 размеров × 6 видов × 4 состояния × 2 (с иконкой и без) = 240 вариантов. Если просто убрать вариацию с иконкой и по старинке скрывать/показывать её в слоях, количество уменьшится вдвое! Тут тебе выбирать, как лучше поступить.

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

Как тогда улучшить организацию библиотеки иконок?
Просто оставь всё как есть. Каждая иконка — отдельный компонент. Разные цвета — стили. Если очень хочется и тебе кажется это удобным, можешь создать разные виды одной иконки как варианты, например если иконка имеет три размера, оберни три компонента в один вариант. Если иконка имеет пять вариаций толщины линии, тоже можно их объединить. Однако смотри на контекст использования: если на одной странице тебе вряд ли понадобится использовать иконки разной толщины или размера, значит не так часто надо придётся между ними переключаться и можно оставить их отдельными компонентами.
gleb.sexy
Когда вышла новая фича и ты пытаешься её везде использовать, не понимая зачем, потому что это с виду кажется удобным. Каждая иконка имеет несколько цветов, размеров, вариаций толщины обводки... Источник: https://twitter.com/rmstinson/status/1337546404202336256…
Зачем? 1000+ вариантов одной кнопки. И 10 тысяч человек дублировали себе этот файл. Это самый бесполезный файл и трата сил, что я видел. Также спешу вас обрадовать, что примерно 75% компонентов содержат плейсхолдер иконки, который не является компонентом. Удачи с его заменой, если вдруг кому-то этот файл захочется использовать (вряд ли).

Но есть и хорошие несвязанные с этим новости: один из создателей Figma сделал плагин для переменной толщины обводки! Вот это полезная вещь! https://twitter.com/evanwallace/status/1338998640816222209
This media is not supported in your browser
VIEW IN TELEGRAM
Замечательная словолитня, все работы которой находятся в открытом доступе, Velvetyne не перестаёт радовать! Один из их акцидентных шрифтов под забавным названием Pilowlava был перерисован в 3D для использования в 3D среде. И вот какая красота из этого вышла:
https://velvetyne.fr/news/pilowlava-3d/

Модели в разных форматах (.blend, .c4d, .fbx, .obj) можно скачать свободно и использовать в любых своих творениях уже сейчас. Pilowlava 3D распространяется под лицензией Free Art License, которая требует указания автора при использовании.
Зацени новый дизайн сайта ЦРУ: https://www.cia.gov/ Как тебе эти анимации, современная типографика, и в целом трендовый лук? Круто видеть, когда государственная организация идёт в ногу со временем.

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

Вот несколько ссылок на авторов:
https://www.figma.com/@beker
https://www.figma.com/@dipa
https://twitter.com/bonniekatewolf/status/1338532050534481920
https://www.figma.com/@realvjy
https://www.figma.com/@mrhammn
https://www.figma.com/@koco
https://www.figma.com/@aaoa