Дизайн система списков. Самый сложный компонент в Figma.

Создание универсального компонента списка для дизайн систем с применением всех возможных параметров компонентов в Figma. Применение всех четырёх параметров: Variant, Boolean, Instance swap, Text, позволит сделать компонент максимально удобным в использовании для экономии времени при дизайне интерфейса.
#figma #дизайн #ux #ui

00:00 Компонент списка
00:40 Базовый компонент - List item
12:27 Параметр Variants - Leading, Trailing / Элементы списка
25:13 Параметр Boolean - Subtitle / Отображение подзаголовка
28:10 Параметр Text - Title, subtitle / Ввод текста
31:14 Параметр Instance swap - Divider / Размер разделителя
39:52 Параметр Boolean - Divider / Отображение разделителя
42:33 Параметр Variants - Оставшиеся возможные варианты Leading, Trailing
48:26 Variants - States / Состояния
49:43 Удобный порядок параметров
51:19 Лайфхак для больших компонентов
52:31 Заключение

Похожие видео:

[SergeyKhlebush]

Очень полезное видео, благодарю за проделанную работу такое на платных курсах не показывают❤

[ChinaskyDes]

Денис, здравствуйте!

Благодарю за видеоролик. Я рад, что кто то смог так четко передать работу с дизайн системой списков. Раньше приходилось джунам объяснять вручную, а теперь могу порекомендовать Ваш видеоролик и облегчить задачу. Да и в целом, этот канал находка. Успехов, Денис 👍

[Ails]

Лайфхак, можно не выделять все вручную, при выделение появляется иконка, при нажатии на которую выберутся все сабтайтлы, причем выделяться именно в пропертис, экономит кучу времени :) И так можно выделять любой повторяющийся элемент.

[di.borovskaya]

Огромная благодарность. Все простым языком, четко и без воды)

[ИльяГурин-зб]

Огромное спасибо за шикарное видео! Догнал многие моменты, которые были мне неясны. Просто пушечка!))

[АнастасияДолгова-бс]

Очень полезное видео! Спасибо огромное 🙏

[АнастасияКим-шг]

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

Но ведь включение и выключение leading и traling можно так же через булины сделать и тогда у нас не будет множество компонентов. Так же видела, как через инстанс делают возможность менять иконки и нам не нужно множить компоненты с видами иконок. Тут можно через инстанс сделать выбор компонента. И, если мы включаем отображение лидинга, то у нас появляется выбор типа компонента и внутрянки компонента, если там множество иконок

[АнастасияДолгова-бс]

Делай, пожалуйста, больше видео про дизайн систему 😊

[АндрейОВЕН-сж]

Спасибо за видео, крутой чел. Получилось повторить.

[АнастасияКим-шг]

Для чего мы делаем компонент со списком? если я захочу добавить элемент и сделать 5 или 10 пунктов, как быть? Делать варианты компонента с разным количеством элементов в списке? Но мы же можем не знать сколько максимально элементов понадобится? Это делать 10 компонентов, где у нас будет: 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 элеметов. А если сделать два: 4 и 13 элементов, то нам постоянно придется руками отключать лишние элементы.

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

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

[gonnaflynw]

Спасибо, очень информативное видео!
По идее можно даже не делать столько разный вариантов, а просто напихать все (иконки, свичи, радио и тд) в 1 вариант справа и слева и задать каждому функцию вкл выкл. Только это создаст огромное полотно справа компонента. Или я не прав?

[kseniyakseniya]

Не очень понятно, зачем так много создавать вариантов, если можно создать только несколько, чтобы показать стейты и с помощью булеанов скрывать и показывать левую и правую иконки и менять сами иконки через варианты...А вообще видео очень информативное, спасибо!

[cherneiko]

Денис, очень круто! Хотелось бы узнать за кем следите в дизайне, чтобы знать тренды (дизайнеры, студии)? Может быть ютуб каналы? Очень интересно откуда черпаете информацию)

[iliaivanishchin]

А почему решил не через property делать? Так бы было достаточно всего одного варианта для всех этих состояний списка. Просто в реальном проекте такое количество вариантов со временем начнет так жестко грузить систему, что хрен файл откроешь

[tatianabublik]

на list item уместнее шеврон, а не каретка

[affiliate]

пздц, у всех учителей по Фигме столько воды ? то, что можно уложить в 5 минут, растянули на 1 час...