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

Поділитися
Вставка
  • Опубліковано 30 вер 2024

КОМЕНТАРІ • 43

  • @vladimirbalu251
    @vladimirbalu251 Рік тому +12

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

  • @Osigot
    @Osigot 7 місяців тому +1

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

  • @ibreakpromo5425
    @ibreakpromo5425 2 роки тому +7

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

    • @ValeriyaDesire
      @ValeriyaDesire  2 роки тому +1

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

    • @ibreakpromo5425
      @ibreakpromo5425 2 роки тому +6

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

    • @ruslanvybornov1237
      @ruslanvybornov1237 2 роки тому +3

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

    • @ЕленаБорискина-п8ю
      @ЕленаБорискина-п8ю 2 роки тому +1

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

    • @ivantaskayev
      @ivantaskayev 2 роки тому +1

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

  • @ibreakpromo5425
    @ibreakpromo5425 2 роки тому +5

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

    • @ValeriyaDesire
      @ValeriyaDesire  2 роки тому +2

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

    • @ValeriyaDesire
      @ValeriyaDesire  2 роки тому +1

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

    • @ibreakpromo5425
      @ibreakpromo5425 2 роки тому +15

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

  • @aharito
    @aharito Рік тому +4

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

  • @ProtskoArtem
    @ProtskoArtem 8 місяців тому

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

  • @zamimood
    @zamimood Рік тому +3

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

  • @minimalist6879
    @minimalist6879 11 місяців тому +1

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

  • @condemime1
    @condemime1 Рік тому +2

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

  • @FaulFerkel
    @FaulFerkel 9 місяців тому

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

  • @evilrainbow6224
    @evilrainbow6224 Рік тому +1

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

  • @yuliyazalevskaya2829
    @yuliyazalevskaya2829 2 роки тому +3

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

    • @ValeriyaDesire
      @ValeriyaDesire  2 роки тому +1

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

  • @asUsow
    @asUsow 2 роки тому +2

    👍

  • @aleksunknow113
    @aleksunknow113 2 роки тому +1

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

  • @ИгорьОнисенко-ч9й
    @ИгорьОнисенко-ч9й 2 роки тому +1

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

  • @sleepspacepiece
    @sleepspacepiece Рік тому +1

    Спасибо!

  • @ЖеняКоваль-ф4о
    @ЖеняКоваль-ф4о 2 роки тому +1

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

  • @adobeex4141
    @adobeex4141 Рік тому +1

    Красавица )

  • @ArmenianArthurBoy
    @ArmenianArthurBoy 2 роки тому +1

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

  • @oksanaodn1348
    @oksanaodn1348 2 роки тому +1

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

  • @Kanal_da6428
    @Kanal_da6428 2 роки тому +1

    оч круто!

  • @Maria.Plusnina
    @Maria.Plusnina 2 роки тому +1

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

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

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

  • @oglk9338
    @oglk9338 2 роки тому +1

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

  • @ky086
    @ky086 2 роки тому +1

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

    • @ValeriyaDesire
      @ValeriyaDesire  2 роки тому +1

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

  • @АнастасияКишеева-к6ц
    @АнастасияКишеева-к6ц 6 місяців тому

    Спасибо))

  • @denzel31
    @denzel31 Рік тому

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

  • @raulgrandgamer
    @raulgrandgamer 2 роки тому +1

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

    • @ValeriyaDesire
      @ValeriyaDesire  2 роки тому +1

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