“Визуальный редактор кода” — на этот раз ближе к дизайну, — Modulz выходит 21 декабря! Этот инструмент сильно напоминает Figma снаружи, но внутри всех элементов лежит реальный рабочий код. Сейчас между элементами дизайна и разработки есть огромный разрыв. Хоть мы и уже ушли из дизайна интерфейсов в фотошопе, дизайнеры всё ещё создают “картинки”, которые разработчикам приходится описывать с нуля.
Зарождаются и инструменты, которые стремятся сократить этот разрыв. Modulz, Visly, Plasmic, Cabina, Handoff, Views, Subform† — это визуальные редакторы кода. В то время как Figma упрощает процесс передачи макетов в разработку, эти задают вопрос: а нужен ли он вообще? Они говорят, что создают лучшую альтернативу графическим редакторам — ну что ж, будем смотреть как всё будет меняться в течение следующих пары лет. Потенциал у них явно большой.
Следующий тип инструментов, которые пытаются эту проблему решить: конвертеры из графических редакторов в код (aka Figma to Code). Примеров приводить не буду, так как пока не нашёл ни одного, который бы хорошо справился со своей задачей. Большинство тупо берут доступные свойства в Figma и воссоздают их в коде. А это значит, что макет хоть и выглядит правильно, да не работает: никакой семантики, логики, а про адаптивность я вообще молчу.
Я как-то представил себе такую шутку: было бы классно, если бы файлы в Figma как-то связывались с кодовой базой, но не так, чтобы просто создавался код из Figma, а чтобы релевантные для отдельных элементов части импортировались из Figma как переменные, но при этом сами элементы создавались бы вручную. Кто-то сделал из чего-то похожего стартап: Contrast App позволяет объединить кодовую базу в StoryBook и Figma и проводить их сравнения при изменениях.
Вот вам и ответ на вопрос “должны ли дизайнеры уметь кодить” — да, они будут кодить, если дать им графический интерфейс, который будет достаточно мощным, чтобы разработка визуальной части интерфейса могла быть сделана теми же усилиями, а то и меньшими, чем сейчас рисовать прямоугольники в 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 вариантов. Если просто убрать вариацию с иконкой и по старинке скрывать/показывать её в слоях, количество уменьшится вдвое! Тут тебе выбирать, как лучше поступить.
Варианты, несмотря на их гибкость, не скейлятся, и это важное понимание легко упустить в погоне за красивыми переключателями. Этот функционал, возможно, совсем не то, что нам реально нужно...
Источник: https://twitter.com/rmstinson/status/1337546404202336256
Небольшой лайфхак: чтобы узнать, сколько вариантов у тебя получится, надо перемножить все значения. Например для кнопки 5 размеров × 6 видов × 4 состояния × 2 (с иконкой и без) = 240 вариантов. Если просто убрать вариацию с иконкой и по старинке скрывать/показывать её в слоях, количество уменьшится вдвое! Тут тебе выбирать, как лучше поступить.
Варианты, несмотря на их гибкость, не скейлятся, и это важное понимание легко упустить в погоне за красивыми переключателями. Этот функционал, возможно, совсем не то, что нам реально нужно...
Почему не стоит делать иконки вариантами?
Самая главная проблема — огромный список без превью. Figma только решили проблему свапа компонентов: раньше это делалось в огромном многоуровневом списке. Сейчас в меню Swap Instance не только легко ориентироваться, но есть и превью, и самое главное для иконок — поиск. Можно даже добавлять синонимы в описание компонента, чтобы легче их находить. Все эти прелести исчезают при использовании вариантов — у тебя остаётся один общий компонент “какой-то иконки”.
Как тогда улучшить организацию библиотеки иконок?
Просто оставь всё как есть. Каждая иконка — отдельный компонент. Разные цвета — стили. Если очень хочется и тебе кажется это удобным, можешь создать разные виды одной иконки как варианты, например если иконка имеет три размера, оберни три компонента в один вариант. Если иконка имеет пять вариаций толщины линии, тоже можно их объединить. Однако смотри на контекст использования: если на одной странице тебе вряд ли понадобится использовать иконки разной толщины или размера, значит не так часто надо придётся между ними переключаться и можно оставить их отдельными компонентами.
Самая главная проблема — огромный список без превью. Figma только решили проблему свапа компонентов: раньше это делалось в огромном многоуровневом списке. Сейчас в меню Swap Instance не только легко ориентироваться, но есть и превью, и самое главное для иконок — поиск. Можно даже добавлять синонимы в описание компонента, чтобы легче их находить. Все эти прелести исчезают при использовании вариантов — у тебя остаётся один общий компонент “какой-то иконки”.
Как тогда улучшить организацию библиотеки иконок?
Просто оставь всё как есть. Каждая иконка — отдельный компонент. Разные цвета — стили. Если очень хочется и тебе кажется это удобным, можешь создать разные виды одной иконки как варианты, например если иконка имеет три размера, оберни три компонента в один вариант. Если иконка имеет пять вариаций толщины линии, тоже можно их объединить. Однако смотри на контекст использования: если на одной странице тебе вряд ли понадобится использовать иконки разной толщины или размера, значит не так часто надо придётся между ними переключаться и можно оставить их отдельными компонентами.
gleb.sexy
Когда вышла новая фича и ты пытаешься её везде использовать, не понимая зачем, потому что это с виду кажется удобным. Каждая иконка имеет несколько цветов, размеров, вариаций толщины обводки... Источник: https://twitter.com/rmstinson/status/1337546404202336256…
Зачем? 1000+ вариантов одной кнопки. И 10 тысяч человек дублировали себе этот файл. Это самый бесполезный файл и трата сил, что я видел. Также спешу вас обрадовать, что примерно 75% компонентов содержат плейсхолдер иконки, который не является компонентом. Удачи с его заменой, если вдруг кому-то этот файл захочется использовать (вряд ли).
Но есть и хорошие несвязанные с этим новости: один из создателей Figma сделал плагин для переменной толщины обводки! Вот это полезная вещь! https://twitter.com/evanwallace/status/1338998640816222209
Но есть и хорошие несвязанные с этим новости: один из создателей 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://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
Вот несколько ссылок на авторов:
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
Новый шрифт Kaliste от Antoine Brun в французской словолитне Lift Type. Выглядит очень fancy! ✨ Я не знаю, где бы я мог его использовать, но уже хочу! Стоит вполне терпимо: €50 за начертание или €100 за все три разом (лицензия сразу веб + графика). ✨ Оцени его полную красоту: https://www.lift-type.fr/shop/typography/kaliste/