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

Создание универсального компонента списка для дизайн систем с применением всех возможных параметров компонентов в Figma. Применение всех четырёх параметров: Variant, Boolean, Instance swap, Text, позволит сделать компонент максимально удобным в использовании для экономии времени при дизайне интерфейса.
#figma #дизайн #ux #ui
Файл Figma из видео - www.figma.com/community/file/...
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 Заключение
Похожие видео:
Дизайн система кнопок - • Дизайн система кнопок
Дизайн система нейтральных цветов - • Дизайн система нейтрал...
Создание иконок в своём стиле - • Создание иконок в своё...
Использование блоков в дизайне приложения - • Использование блоков в...

[@ChinaskyDes]

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

[@denisamelchenko]

Здравствуйте! 👋 Спасибо за комментарий и такое доверие! 😁

[@user-sr7uy6rf3h]

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

[@denisamelchenko]

Буду стараться! 🙌

[@user-sr7uy6rf3h]

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

[@denisamelchenko]

Пожалуйста! Рад это слышать! ☺️

[@Ails]

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

[@denisamelchenko]

Да отлично, спасибо! 😉

[@di.borovskaya]

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

[@denisamelchenko]

Спасибо, рад это слышать! ☺️

[@user-ms7jw8qd5h]

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

[@denisamelchenko]

Пожалуйста, Илья! 😊 Рад что полезно! Спасибо за комментарий! 🙌

[@iliaivanishchin9131]

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

[@denisamelchenko]

Цель была рассказать про все возможности компонентов. Дальше каждый решает сам как ему будет удобно работать. Варианты делаются один раз и обычно к ним долго не возвращаются. Я уже привык подключать библиотеки компонентов отдельно, и вопрос нагрузки системы не возникал. Все очень индивидуально, нужно найти свой удобный вариант и использовать. 👍

[@geryur8954]

Спасибо, полезный контент!

[@denisamelchenko]

Пожалуйста! 🙌 Рад слышать! 😊

[@marusyam2591]

Большое спасибо, очень полезно 🔥🔥🔥

[@denisamelchenko]

Пожалуйста! ☺️ Спасибо большое за комментарий! 🙌

[@user-ti4wr5fc1v]

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

[@denisamelchenko]

Пожалуйста! ☺️ Спасибо за комментарий, Андрей, рад что у вас получилось! 😄

[@cherneiko]

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

[@denisamelchenko]

На ютубе давно ни за кем не слежу, за трендами вообще не гонюсь. Слежу за большими брендами, например, очень люблю дизайн Яндекс, VK, Google, Apple. Много дизайн решений в рабочей среде, в рабочих проектах, анализирую и какие то детали забираю)) ✌️

[@gonnaflyn0w]

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

[@denisamelchenko]

Пожалуйста! ☺️ Спасибо за комментарий! Да можно и так, в этом и прелесть компонентов, что можно решить одну и туже задачу разными способами, я же затронул самый базовый способ 👍

[@kseniyakseniya2400]

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

[@denisamelchenko]

Это скорее для общего понимания системы, дальше уже каждый сам должен решить как ему удобно 👍 Спасибо за комментарий! 🙌

[@tatianabublik5884]

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

[@denisamelchenko]

Здравствуйте, Татьяна! 👋 Да можно, но не имеет значение какую стрелку использовать, главное сохранить её функцию, чтобы визуально она определялась как стрелка вправо. Подобная иконка используется по умолчанию в Material Design, а chevron например, в iOS Human interface. Оба варианта уместны, можно их изменять по вкусу и фирменному стилю приложения 👍 Спасибо вам за комментарий! ❤️

[@user-frond-end_dev]

сильно суетишься

[@denisamelchenko]

Как получилось 😅

[@Svetlana-hk3mm]

​@@denisamelchenkoПолучилось отлично! Спасибо огромное!

[@denisamelchenko]

@@Svetlana-hk3mm Пожалуйста! Рад если будет полезно! 😊

[@affil3iate]

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