Про дизайн-системы
1.1K subscribers
20 photos
15 links
Создаём дизайн-системы, пишем о дизайне и продукте.
@denpleshakov • продукт и дизайн
@ShevchenkoDmitry • технологии
Download Telegram
#дайджест август 2023

Аддон в Storybook для визуального тестирования
Сравнивает разные версии в стори, выявляет регресс и показывает отличия прямо в Сторибуке. Выполняет проверку в различных браузерах и разрешениях. В навигационной панели Сторибука подсвечивает стори, в которых есть изменения. Аддон пока в статусе альфа, получить ранний доступ можно по запросу.

Новая Figma-библиотека дизайн-системы Carbon с нативными переменными (открывать под vpn)
В Carbon, дизайн-системе IBM, отказались от стилей и перешли на variables. Это позволило объединить 4 темы в одном файле. И добавить токены для спейсингов, брейкпоинтов, радиусов и прочего. Находим файл в комьюнити Фигмы и изучаем решение.

Эволюция дизайн-системы Encore в кросс-платформенность
Spotify рассказали о развитии системы, столкнувшейся с необходимостью поддержки 45 платформ и 2000+ устройств. Новая версия дизайн-системы стремится к «сплоченности» при которой компоненты стали кросс-платформенными. Для этого были созданы единые правила, одинаковые на всех платформах и учитывающие их особенности.

④ Figma дорабатывает переменные
Появилась возможность настраивать свойства нескольких переменных одновременно. Имя переменной теперь редактируется и поддерживает разные платформы. Можно указать в каких свойствах будет доступна переменная цвета. И доступна смена режима в слоях инстанса. Как видим, доработки косметические, типографику и эффекты всё ещё не завезли. Ждём!

⑤ Пишем документацию для дизайн-системы с помощью AI
Zeroheight поделились рекомендациями по работе с Chat GPT. Самое важное в этом деле — точно сформулированные запросы с вашим контекстом. В статье приводится подробный пример промпта для документации. И еще один метод, от тех же авторов. Комбинируя оба подхода, можно быстро получить стартовый материал для дальнейшей проработки.
6👍4🔥21👏1👌1
#софты

Как стать тимлидом. Часть 1

Кратко

1. Воспитывать в себе качества лидера.
2. Искать условия, где есть вызовы, свобода действий и ответственность.

Подробнее

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

Тимлид — это лидер. Лидер команды. Не самый опытный разраб, не лучший дизайнер, не самый умный аналитик, и т.д.

Какие черты личности и характера отражают способность человека стать лидером группы?

Это: интеллект, общая эрудиция, воля и упорство, справедливость, умение воодушевить людей, но и умение признавать свои ошибки. Разумеется лидер хорош в своём профессиональном деле, у него всегда есть чему поучиться! А ещё он рисует картинку в пространстве-времени, к которой движется команда, т.е. ставит цель, да такую что охренеешь (по-хорошему) достигать. Но при этом лидер проявляет заботу и защищает команду.

Выкинь хоть одно из этих качеств и вместо лидера будет клякса.

Пример ①
Представьте что человек профессионал, умеет воодушевить, есть упорство. Но тупой как хлебушек. А цели которые он ставит — слабенькие и приземлённые, т.к интеллекта и общей эрудиции не хватает для визионерства. А то вообще никаких целей, вся команда закрывает отчетности. Вы пойдёте за таким?

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

Пример ③
Умный, талантливый, настоящий визионер, но совершенно не умеет работать с людьми. Ни зарядить энергий, ни воодушевить. Ни цель нормально обозначить. А стиль управления через манипуляции, давление, и бесконечные обесценивания: «вы опять просрали дедлайны!», «можно было и лучше». Никогда не признаёт своих ошибок, но всегда найдёт их у вас. Достиженец и царь токсичного болота. Вы пойдёте за таким?

Вы уже поняли к чему я клоню. Тимлид это про конкретные лидерскик качества, и они все важны.

продолжение в следующем посте
👍181🔥1🍌1🎄1
#дайджест сентябрь 2023

① Редизайн сайта Google Fonts
Обновили навигацию для десктопа и мобилок компонентами из Material 3. Переработали фильтрацию и перенесли её в сайдбар. Цветовая схема теперь тоже из Material 3, для светлого и тёмных режимов. Отличная демонстрация новой дизайн-системы от Google в деле!

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

Агрегатор мероприятий по нашей теме
Энтузиасты дизайн-систем запустили сайт с предстоящими событиями, лекциями, вебинарами по тематике дизайн-систем. На многие бесплатный вход. Для хардкорных олдов есть RSS подписка =)

Финалисты Design Systems Awards
Собственный конкурс от Zeroheight, о котором мы недавно рассказывали, объявил финалистов по всем категориям. Стоит ознакомиться с лучшими дизайн-системами и статьями в индустрии (по мнению уважаемого жюри конкурса). Победителей объявят 30 ноября.

Плагин для автоматической локализации Variables Translator
Если в интерфейсе требуется поддержка нескольких языков, то вы уже оценили силу Figma-переменных. Этот плагин переведёт коллекцию string переменных на другой язык (русский в комплекте!) и добавит новый mode в коллекцию.

Сборник ресурсов по Figma-переменным
Для тех, кто еще не разобрался с variables. Около 50 ссылок на статьи, видео и файлы-примеры, объясняющие принципы работы и техники использовавния. Не отстаём, догоняем прогресс и переходим на переменные!
🔥12👍41🎅1
#софты

Как стать тимлидом. Часть 2

Развивать и воспитывать в себе качества лидера:

— Наличие интеллекта выше чем у хлебушка;
— Насмотренность и эрудированность;
— Воля и упёртость;
— Справедливость и честность: похвалить за результат, поругать за дело, помочь, когда команда на излёте, принести ништяков за работу, признать собственные ошибки;
— Профессионализм: хорошо делать, учиться, приносить новые знания команде;
— Ставить интересные вызовы и цели, благодаря которым команда растёт;
— Защищать команду от внешних потрясений (политика, неадекватные заказчики, отдел командировок и т.д).

Что дальше? Вам нужны условия, в которых ваши качества лидера смогут раскрываться и работать. Я для себя всегда отмечал несколько важных аспектов, без которых вы скорее останетесь ведомым, а не ведущим.

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

② Второе, внутренняя энергия. Её должно быть несколько больше чем у команды. Энергия это горящие глаза и шило в попе. Это когда вы просыпаетесь и уже знаете что будете сегодня делать, и вам не нужна третья кружка кофе чтобы начать. Свою энергию нужно беречь, и не доводить себя до выгорания.

③ Третье, самое важное. Ответственность не дают, её берут. Ваши возможности ограничивает неповоротливая бюрократия, политические подковерные игры, либо голова упирается в потолок роста на текущем месте? Убирайте эти ограничения, и ищите не возделанную полянку, где вы ударите кулаком по столу и громогласно заявите что теперь вы за это отвечаете.

Пишите в комментах, что раскрыть подробнее.
🔥15👍31🤔1🫡1
#дайджест октябрь 2023

WCAG 2.2 опубликован как рекомендуемая версия
В стандарты по обеспечению доступности добавили 9 новых критериев и 1 удалили (про parsing). Для более подробной информации смотрите официальный список отличий от W3C и подборку лучших статей на Smashing Magazine.

В Polaris обновили визуальный язык
Дизайн-система от Shopify заслуженно попадает во все подборки топ систем — у них есть чему научиться. В Polaris пересмотрели подход к дизайну и полностью изменили компоненты. В новом дизайн языке приоритет отдается эффективности и интуитивному взаимодействию, ориентированному на повседневные повторяющиеся задачи. Статья о процессе редизайна (нужен впн) от авторов.

Josh Clark о скорости развития дизайн-систем
Успешные дизайн-системы развиваются медленнее, чем продукты, которые они поддерживают — и это нормально! Почему так происходит? Качество важнее скорости. Как не стать бутылочным горлышком для продукта? Продукт делает своё решение с оглядкой на стандарты дизайн-системы, которое после может быть адаптировано как часть дизайн-системы.

Brad Frost про экосистему дизайн-системы
Простая, но успешная и востребованная система, встречаясь с новыми вызовами, вырастает в большую комплексную структуру. Автор модели атомарного дизайна рассказывает как может выглядеть «взрослая» дизайн-система в большой организации. Многослойная структура и связи между элементами предлагают надежный способ организации системы. Есть куда расти!

Искусственный интеллект в дизайн-системах
Запись выступления спикеров из Knapsack c конференции Into Design Systems. Дизайн-система может задавать контекст и необходимые ограничения для AI, они как будто созданы друг для друга. AI будет помогать пользователям исследовать и использовать, а разработчикам создавать и менеджерить систему.
👍10🔥42🤗2
#дайджест декабрь 2023

① Мы выпустили дизайн-систему Атомаро для команд и бизнеса
Атомаро — это сервис и конструктор для создания дизайн-систем для любой задачи. Figma и React библиотеки, дизайн-токены и простая темизация, все решения проверены на 150+ проектах. Система будет развиваться и наполняться ценностью, присоединяйтесь!

② Объявлены финалисты Design Systems Awards 2023
Победители конкурса в основных номинациях: Pinterest — сотрудничество, Wise — внедрение, Schneider Electric — управление, Eventbrite — документация. Лучший плагин — Tokens Studio, лучшая статья — о карьере в индустрии дизайн-систем, лучший доклад — Multidimensional Design Systems

③ Материал обновили свой генератор темы
Плагин для Figma Material Theme Builder обновился до версии 2.0. Разработчики переработали интерфейс, объединив работу с динамическим цветом и core цветами на одном экране, улучшили менеджмент тем и UX, добавили больше платформ для экспорта

④ Figma поделилась планами на развитие variables
Рассказали о последних апдейтах, способах совмещения переменных со стилями и планах. Главная цель — предоставить опыт, который обеспечивает бесконечные возможности настройки, но при этом прост в применении.

⑤ Сторибук обновился до версии 7.6
Повысили перфоманс, добавили режим тестирования, диагностику при миграциях на новую версию, вынесли React из peer dependency и отказались от поддержки Vue2

Друзья, наша команда желает вам новых компонентов, проектов, дизайн-систем и успехов в новом году! 🧡
🔥20👍87🤩1🏆1😨1