Пилим Библу или Рефакторинг дизайн-системы | Ozon Tech Community Design Meetup
Vložit
- čas přidán 21. 02. 2023
- Рассказываю как сделать компоненты дизайн-системы в Figma легче, подвижнее, удобнее. Как организовать библиотеку и запустить витрину. Делюсь хитростями и лайфхаками.
Весь митап тут czcams.com/users/liveFiqtBduN...
Обязательно посмотрите, там много интересного.
Очень круто! Спасибо за выступление
Давайте делать хорошо, и не делать плохо!
00:00 Вступление
00:42 Привет всем. О себе
01:34 Что будет?
02:02 Одна из основных метрик дизайн-системы (ДС)
02:55 Как боролись за скорость проектирования. История Ozi
04:32 Проблемы первой ДС. Variants explosion. 2GB
06:12 Как было устроено в первой версии ДС
09:19 Рефакторинг (оно же Мясо)
12:30 Минусы нового подхода
13:30 Документация ДС (Showcase)
18:11 Новые механики работы с компонентами
24:35 Оно того стоило?
28:17 Ускоряемся? ДС это не проект, это продукт.
30:52 Вопросы
Огонь
Второй раз пересматриваю и как будто заново посмотрел. Где второй лайк поставить?
Виктор. Благодарность безмерная! ❤ как всегда годный контент
Это великолепно. Большое спасибо! 🙏
Спасибо за видео, что делитесь таким непростым техническим опытом
Спасибо, обожаю твой канал и тебя получается
Спасибо, полезная информация. Мотивирует!
Спасибо за презентацию! 👍🏼
два раза пересматривал весь митап и тут теперь выскочил твой канал в рекомендах! Супер, спасибо! Взял некоторые идеи по рефакторингу на вооружение, попробую замутить. Хорошо что у нас дс пока на начальной стадии, чтобы сразу сделать хорошо ))
Удачи
Очень крутой доклад!
О, поздравляю с синьорством, кстати! :)
Спасибо, сенсей, очень крутая лекция!!
Мощь, большое спасибо!
Наконец-то годнота от Виктора. ❤
Это! Очень! Круто! F
Огонь!
Очень круто, озон супер как UI//UX нравится, особенно интересно как это устроено внутри. Местами конечно странные решения расположения элементов в карточках (вечно ищу "добавить в избранное" в верхней строке на десктопе, не читается, привык к сердечку рядом с кнопкой купить или в блоке с ценой, и не всегда влезает цена товара в один экран), но в остальном всегда замечал как быстро стали выкатываться новые блоки. Жаль рекламных блоков на заглавке стало много, ещё и с видосами. Моей модели потребления это мешает, вечно скроллить нужно, чтоб пропустить продвигаемые блоки. Но это моя модель потребления, чаще я прихожу за конкретным и в поиск. Про рефакторинг и deprecated прям божественно. В своё время не решился в озон податься от недостатка скиллов, теперь видя эту титаническую работу внутри, это мечта
жиза про избранное
Спасибо за доклад. Подскадите, как вы думаете, насколько глубоко должен знать продукт дизайнер дизайн-системы, чтобы качественно ее развивать?
@@sweeeetkiller привет! Чем глубже, тем лучше дс будет решать проблемы. Нельзя в вакууме сделать годную дс
Я ждал когда же будут Пистончики
тоже скучаю по ним. И обзоры по штепселькам
А можно копию или иходник глянуть под капот в фигме, как эти файлики отдельно лежат и связаны ?
про медитацию и простукивания жиза жизненная))
Пушкарь душит
Спасибо, Виктор! Можешь подсказать плиз. Почему когда хочу опубликовать библиотеку элементов, который неходятся в варианте, публикуется только первый элемент стоящий в этом варианте? Хотя в варианте штук 40 элементов.
Так через панель свойств переключаются варианты. Или я не понял
Спасибо за презентацию! Хороший пример для опыта можно взять себе в работу, эти боли с разрастающимся китом и обьектами я думаю испытали многие) Только я хотел уточнить, вроде фигма сделала ограничения для России по тарифу организация, эта возможность вернулась или вы как то нашли пути обхода проблемы?
Это не моя зона ответственности
Привет! Супер видео, спасибо! Сейчас тоже занимаюсь разработкой ДС, конечно гораздо меньше по масштабам, но все же)) Подскажи, в связи с последним обновлением Figma variables, планируете ли вы переезжать на полноценную токенизацию через variables?
Ждём типографику и операции над переменными
24:26 подскажите, что это нам дает когда мы локальный компонент таба засовываем в обертку из библиотеки? Это нужно чтобы контролировать падинги?
Да. Или тени, или что-то ещё. Плюс это говорит разработчику что такой компонент есть в коде
Раньше я был просто фанатом оптимизации, а теперь я еще и фанат Виктора)) очень чётко и полезно
Режим, одинаковые завтраки, небольшой выбор одежды, и т.д. )
Виктор, я так понимаю вы в команде дс контролируете только базовые компоненты (инпуты, кнопки…) а как вы организуете продуктовые компоненты-организмы, тоже создаете для них файлы или команды хранят это в своих локальных библиотеках? Условно, команда, которая отвечает за оплату товаров сделала компонент банковской карты, где он живет, кто его описывает и может ли другая команда переиспользовать его?
Такие организмы живут в продуктовых библиотеках. Переиспользовать их могут все команды этого продукта
А почему табу не сделать просто компонентом одним и в зависимости от случая собирать нужное количество таб из этого одноо компонента? И слоев меньше и больше гибкость. Спасибо за ответ
Там есть общая линия внизу например. В других сборных компонентах свои заморочки. Например в дропдауне общая тень, скругление углов контейнера..
@@zen-designer спасибо. Потмоу что мучаль вопрос зачем народ делает такое количество непредсказуемых компоннетов в виде дропдаунтов/таб и прочего
Виктор, у меня к вам два вопроса: 1. Состояния кнопок, у вас только default, hover, loading и этого достаточно. Как вы относитесь к тому, что некоторые разработчики просят им сделать focused, pressed states кнопки? что увеличивает кол-во вариантов.
2. Работаю сейчас на фрилансе с java разработчиком над его дизайн-системой, у нас (по его видению) уже 900 переменных (лично я дизайн систему собираю впервые, но судя по тем примерам и разборам для создания двух тем lgt, drk достаточно 60 переменных. В связи с таким большим кол-вом переменных Figma начинает баговать и часть переменных стираются или временно не отображаются, в общем мучаюсь, но разработчик (он же заказчик) стоит на своем.
Дополнительные стейты кнопки можно сделать отдельно и передать разработчику. Не обязательно делать их в боевом компоненте.
Пахнет компонентными переменными. Завозить их в Figma не обязательно. Можно сделать семантическую палитру, а компонентные переменные разработчик будет держать только в коде
Витя, спасибо. Подскажи пожалуйста, где заказать или скачать эти стикеры?
t.me/addstickers/ozon_design
@@zen-designer Спасибо большое
А где собирали презентацию? Выглядит очень еффектно
Всё Figma. И собирали и показывали в ней
@@zen-designer высшим классом было бы собрать всё на базе этой вашей OZI
это же Фигма и smart animates )
@@zen-designer а можно саму презентацию?
@@kkashaev к сожалению нет. Там всякие ссылки на потайные места )
Привет! Преза 👍🏻
Вопрос есть по иконкам, возможно не под тем видео пишу, но не страшно 🙈
У вас есть компонент IconContainer, я так понимаю, он нужен чтобы была возможность менять размер иконки в компоненте, например в кнопке. Проблема такая, создал такой же, но когда меняю размер иконки в кнопке, сама иконка меняет размер, но размер контейнера остается прежним. Есть решение, если сам IconContainer сделать Auto Layout с параметрами Hug Container, тогда все работает как надо, но в таком случае не получается сделать например иконку 20х20 в контейнере 16х16 как у вас написано в гайде 15:55 .
Если можете, расскажите как у вас этот компонент устроен 👉🏻👈🏻
Там было очень костыльное решение, которое не выдержало проверку боем
@@zen-designer А сейчас придумали какое нибудь решение или детатчите?
@@dan9oct доделали все иконки в двух размерах. Не скейлим
Почему делаете витрину? Почему не давать описания сразу в файле с родителями-компонентами?
Чтобы была единая точка входа в ДС
Ты представь, так бы пришлось по каждому компоненту открывать отдельный файл, чтобы посмотреть документацию
Скиньте пожалуйста ссылку на плагин для проверки нагрузки на файлы Figma
Не знаю такого. Я показывал где найти виджет
@@zen-designer спасибо. Я еще раз посмотрел видео и нашел в разделе view. Спасибо за доклад. Очень полезный!
Ох, если б я знал раньше насколько ты умный!!!
Виктор, здравствуйте! Я вот с одной вещью разобраться не могу в своей недо-дизайн системе: если мастер менять и публиковать изменения, то они применяются на инстансы в остальных файлах, но с вариантами так не робит. Поменял мастеры в вариантах и никакой кнопки Publish. Смотрю на инстансы этих вариантов в других файлах, а там обновлений нема... Шо вот я делаю не так 😅 На другом файле стоит привязка к библиотеке, стили отображаются, а вот компоненты не хотят обновляться
Попробуй в меню быстрого запуска (cmd+/) набрать Republish...
В названиях компонентов в начале нет точки или подчёркивания? Такие компоненты не публикуются
@@zen-designer ни-ни, таким не балуюсь) толоко через слєш
Посмотрите property компонента, скорее всего там есть ошибка или не привязанная функция, она не даст обновить компонент
@@ovsjanik а все, я гуру! 😅
Все оказалось проще, чем я себе представлял
А расскажи какой наилучший вариант взять какую-то существующую дизайн-систему (MS Fluent UI свежая, к примеру), но без полноценной библиотеки компонентов в фигме и затащить ее в фигму? Есть волшебно-изящный способ? Или только нудно-занудно ручками с болью и укоряющими взглядами менеджера в духе «хули так долго»?
Не верю в магические кнопки и плагины. Скорость не всегда решает в долгосрочной перспективе
Было бы прикольно сделать доку в obsidian publish?
Для личных заметок по ДС использую Obsidian. Для доки удобнее сама Figma
А не проще для доки использовать текстовый сервис? Как ноушен. Там же можно эмбдить видео, прототипы интерактивные, не надо никуда переходить и навигацию кмк проще организовывать
@@maksevsiukov1510 проще. Но заставить им пользоваться не проще.
Без обид, специально зашёл на сайт с мобилы сейчас. На конструкторах и то посимпатичнее. Вкусовщина конечно, но довольно старомодно и безлико.
))