Как работать с дизайн системой, мои основные правила при разработке дизайна.

Как работать с дизайн системой, мои основные правила при разработке дизайна. Показываю на примере как разработать окно входа с помощью дизайн системы.
👉 Смотрите видео до конца, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔
►Мой гайд в Figma Community: cutt.ly/HWcW3Tm
►Instagram - cutt.ly/jWcQ3Mk
Добавляйтесь в друзья:
★ Facebook - cutt.ly/nWcWecJ
★ Вконтакте - cutt.ly/5WcWu2W
★ Linkedin - cutt.ly/DWcWb5q
Вступайте в сообщества:
★ Полезные публикации о дизайне Вконтакте - cutt.ly/0WcEtXP
★ Telegram канал t.me/joinchat/...
★ Telegram чат: t.me/joinchat/...
Мои работы:
★ Dribbble: cutt.ly/1WcEx6E
★ Behance: cutt.ly/UWcEW0I
#figma #webdesign #uxui

[@vladimirbalu251]

Думал, что увижу ролик про работу с дизайн системами, но увидел ролик по созданию окна входа)

[@condemime1]

Я как минимум узнал, что в вариантах можно прописывать несколько свойств, создавая матрицу элементов. Кайф! Спасибо)

[@zamimood]

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

[@ИгорьОнисенко-ч9й]

Дизайн система просто отменная. Еще и на хорошо понятном языке. Огромное Вам спасибо.

[@aharito]

Спасибо за видео, работаю примерно так же. Я даже расширил атомарный принцип и применяю Атом/Молекула//Клетка/Орган/Секция. А в веб-дизайне рекомендую применять не "привязки", а авто-лэйауты, аналог CSS-флексов. Таким образом ты легко задашь отступы между входящими в этот авто-лэйаут блоками и реализуешь принцип БЕМа: "блок ничего не должен знать о том, что снаружи него, в том числе свои внешние отступы".

[@aleksunknow113]

Супер, дизайн-системы актуально!

[@yuliyazalevskaya2829]

Валерия,спасибочки вам большое, как всегда очень информативно.

[@ValeriyaDesire]

Спасибо вам за отзыв 🔥

[@ky086]

Спасибо, Валерия! Видео - супер)

[@ValeriyaDesire]

Спасибо, очень рада, что было полезно 😉

[@ЖеняКоваль-ф4о]

Спасибо за дизайн-систему.

[@FaulFerkel]

Про дублирование букв при вводе - вы вероятнее всего работаете на макбуке года 2018-2019, это их родовая проблема. Немного облегчает страдания настройка повтора ввода буквы в настройках клавиатуры, но исправляет проблему только замена самой клавиатуры (5000 за клавиатуру и ещё примерно столько же за работы по замене).

[@oksanaodn1348]

Очень-очень полезно. Спасибо

[@ArmenianArthurBoy]

Очень классно, спасибо).

[@minimalist6879]

Хорошее видео, пора бы мне вылезать из бесконечных лендосов, думаю такая работа это как раз новый уровень развития в профессии Глоток воздуха

[@sleepspacepiece]

Спасибо!

[@Maria.Plusnina]

Очень полезное видео 💜

[@ibreakpromo5425]

9:50 Плюс еще момент. Если бы у тебя реально было молекулярная система, то ты бы иконку меняла не в материнском компоненте, а просто выбирала бы в инстанте другую иконку и это было бы просто опцией которую можно было бы выбирать когда захочется. Ты зачем то лезешь менять ее в исходный мастер компонент. В этом нет ни капли молекулярной системы.

[@ValeriyaDesire]

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

[@ValeriyaDesire]

Сейчас у меня на проекте был случай. Прошло тестирование части интерфейса и в ходе тестирования выявили, что иконку фильтра воспринимают как сортировка. Мне поставили задачу поменять иконку в фильрах. Я иду в мастер компонент и меняю.

[@ibreakpromo5425]

@@ValeriyaDesire не в обиду, мне кажется ты не так давно с этим работаешь и по ощущениям что-то типа джуна. Это не плохо, я без претензий итд. Просто кажется что у тебя мало с этим опыта и ты мыслишь каким то локальными сборками ui китов скорее, чем дизайн системой. Ты видишь компонент как конкретную штуку с табличкой на которой написано «фильтр». Реально компонент это набор элементов и параметров. То есть это не фильтр, а плашка с иконкой по левому краю и текстом с определенным отступами и стилями. Смысл компонентов не то что ты сделала фильтр, а то что ты сделала компонент с определенным набором молекул как ты сама это называешь. Каждый элемент внутри компонента должен быть тоже конфигурируемым(обычно кроме стиля текста). Потому что получается если я не захочу менять иконку на всех фильтрах, а захочу какую то отдельную версию - в твоем компоненте я так не смогу сделать. А вот поставить другую иконку на каких то экранах где это нужно и разработке сказать что там нужна вот такая то иконка - легче легкого. Во всех мало мальски крупных дизайн системах иконка это еще одна библиотека, часто не маленькая и обновляемая. В твоем компоненте нет вариантов и я не смогу переиспользовать его под какие то немного другие или сильно другие нужды. И когда встанет вопрос конфигурации или доработки, выяснится что у тебя все очень неповоротливое и придется много чего либо плодить как опции, либо переделывать. В том что ты делаешь должны быть 1) опция менять иконку как компонент 2) падинги и все расстояния жестко одинаковые и никак иначе 3) предусмотреть стейты резиновости если строчек текста больше одной 4) стили текстов должны быть тоже прописаны 5) у тебя должно быть понятно под что сами компоненты сделаны(платформа), ты на видео их тянешь по ширине, а это большое нет-нет.

[@adobeex4141]

Красавица )

[@oglk9338]

Ничего лишнего! Спасибо.

[@ValeriyaDesire]

Спасибо 😉

[@АнастасияКишеева-к6ц]

Спасибо))

[@raulgrandgamer]

Спасибо тебе 😘

[@ValeriyaDesire]

Спасибо тебе за отзыв! Успехов в работе 🍀

[@Kanal_da6428]

оч круто!

[@ProtskoArtem]

Как можно в начале видео просить ставить Лайк!) Нужно увидеть, а потом решить ставить или нет!:)

[@asUsow]

👍

[@АртемАртеменконезабывайвыходит]

в чем отличие разработки дизайна для лендинга интернет магизина и соц сети? какие сроки на разработку и цена?

[@evilrainbow6224]

Подскажите, куда вы нажимаете, чтобы увидеть отступы? Саму красную сетку с цифрами

[@ValeriyaDesire]

На маке клавиша Option

[@ibreakpromo5425]

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

[@ValeriyaDesire]

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

[@ibreakpromo5425]

@@ValeriyaDesire то что ты меняешь параметры компонента в здоровых нормальных дизайн системах делается через варианты. Потому что если я буду переиспользовать твой компонент не из первоисточника, а просто скопирую, я могу не в курсах быть что там есть какие то скрытые слои. В реальных системах(я работаю с достаточно большой например) все параметры компонента меняются только через варианты. Модифицировать дизайн компонента запрещено в любой дизайн системе - я тебе это практически гарантирую. Я же не буду ходить и сверять вручную выставленные падинги за каждым человеком и надеятся что все прочитали гайды. Тем более описывать гайдами паддинги, отступы и многие размеры тоже достаточно странное дело - они обычно фиксированные и стабильные в любой нормальной дизайн системе.

[@ruslanvybornov1237]

@@ibreakpromo5425 посоветуй пожалуйста где черпать годную инфу про дизайн системы

[@ЕленаБорискина-п8ю]

@@ibreakpromo5425 Присоединяюсь к вопросу, посоветуйте, пожалуйста, ресурсы

[@ivantaskayev]

@@ibreakpromo5425 подскажи пожалуйста откуда черпаешь инфу?

[@denzel31]

а вот как его скачать и закинуть в визуал студио?

[@Krasniysharigg]

Это UI Kit, не дизайн-система