Подробно об умных таблицах Figma на Auto Layout и Variants // Smart Table on AutoLayouts + Variants

День тому

⚡️ Канал в телеграм: t.me/uxrdesign
Подробнейший разбор создания умных таблиц на Auto Layout и Variants в Figma.
Файл в Figma Community: bit.ly/3t5QHjH
⚡️ Классная компания, которая делает классный дизайн: usetech.ru
⚡️ Вакансии для дизайнеров и разработчиков: career.usetech.ru
Внутри видео:
00:00 Вступление
00:25 Проблемы текущих решений
01:55 Обзор того, что предстоить сделать
03:00 Мастер-компонент для управления вариантами
04:27 Мастер-компонент который не попадает в библиотеку
05:55 Создание мастер-компонента для заголовка таблицы
09:36 Создание вариантов для заголовка таблицы
16:22 Создание таблицы: заголовки
19:02 Мастер-компонент для ячейки таблицы
21:51 Создание вариантов для ячеек таблиц
24:26 Создание таблицы: ячейки
26:37 Создание ячеек: бейдж
31:07 Добавление варианта ячейки: бейдж
34:50 Создание ячеек: иконки
38:21 Создание ячеек: чекбоксы
42:10 Добавление варианта ячейки: чекбокс
43:49 Создание ячеек: статус
46:30 Добавление варианта ячейки: цветовой статус
47:14 Полная сборка таблицы
51:30 Публикация компонентов и приватные файлы

КОМЕНТАРІ: 29

@nellygareyshina7032 Рік тому

Огромное спасибо за это ценное видео! Таблицы - моя слабая сторона, давно хотела подтянуть этот момент для самой себя, почувствовать наконец уверенность. Вы мне очень помогли.

@aleksunknow113 2 роки тому

Спасибо, за настоящий профессиональный контент, который прокачивает!

@konstantin_davydov 2 роки тому

Спасибо за видео. Очень хороший подход! Есть два замечания: линию для ячеек, считаю тоже желательно вынести в отдельный компонент, чтоб из одного места было удобно менять цвет или толщину. И на 26:05 упущен момент, что ячейки в одну строку не растягиваются по высоте, когда появляется двухстрочная ячейка.

@uxrdesign 2 роки тому

Спасибо большое за отзыв и замечания! Я уже думаю переписать это видео, так как появились новые вводные и немного другой подход. Но вы все правильно говорите

@konstantin_davydov 2 роки тому

@@uxrdesign буду ждать! Нравится подача материала :)

@user-ib1xm1im8q 3 роки тому

Спасибо 🐾

@Milka_7772 3 роки тому

Спасибо за проделанную работу ❤️

@ivanbelyakov 2 роки тому

Спасибо! Потратил почти три часа на проработку и теперь все это крепко прописалось в голове. Жду новых видосов!

@KirTitov 2 роки тому

Отличный урок, очень помог мне разобраться с таблицами и компонентами. Очень порадовала подача материала шаг за шагом, большое спасибо 🤝

@uxrdesign 2 роки тому

Я очень рад, что видео помогло Вам! Спасибо 🤘

@igortsudin4475 2 роки тому

Суперполезный урок !

@VanyaQA 2 роки тому

Спасибо за урок!

@Ida.K 2 роки тому

Спасибо за урок! это было супер полезно

@aleksquake 2 роки тому

Спасибо огромное

@nikarbat 3 роки тому

Круто & Красиво !

@iCosmictube 2 роки тому

Спасибо, очень помог. Подписался

@dv4able 2 роки тому

Krasava

@djeidi009 2 роки тому

спасибо

@user-ti8xw7ue6e 6 місяців тому

Здравствуйте, спасибо за видео, подскажите, пожалуйста, зачем держать одну и ту же иконку в двух разных компонентах, если она отличается только размером?

@uxrdesign 6 місяців тому

Чтобы ее размеры не слетали при замене в разных инстансах и чтобы размер контейнера с иконкой сохранился и инстанс компонента не развалился

@MrMonitor4ik 2 роки тому

Спасибо за видео! Помогло. Подскажите, а в какое место в вашей схеме лучше добавлять ховер для ячейки? В Мастер-компонент или в дочерние обычные компоненты с Вариантами?

@uxrdesign 2 роки тому

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

@user-su6dw6lb5r 10 місяців тому

Спасибо! Полезно. Если границу делать бордером, то можно будет горизонтальные/вертикальные и даже со скруглениями. А элементов меньше. Или этот вариант чем-то уступит линии?

@uxrdesign 10 місяців тому

можно, когда ролик записывался не было возможности еще асинхронных бордеров слева или сверху но тут нужно быть аккуратным, бордер могут попросту удалить в панели, вместо переключения вариантов

@warhollapro 2 роки тому

Есть идеи как сделать вертикальный разделитель?

@uxrdesign 2 роки тому

попробуй тенью, или поставь лайн сбоку и настройка высоты fill

@djeidi009 2 роки тому

А не лучше ячейку в автолейут объединить со своим столбом, чтобы он одной ширины были автоматически?

@uxrdesign 2 роки тому

Можно и так, кстати! Спасибо

@konstantin_davydov 2 роки тому

Тогда может появится проблема, что когда в одном столбце будут двухстрочные ячейки а в других однострочные, то таблица поедет и высоту других столбцов с однострочной ячейкой придётся подгонять вручную.