Случайно зашла, тк хотела понять, что такое дизайн система для базовых знаний системного аналитика. Голос невероятно приятный, подписалась и готова вечно слушать Вас😂
тебе нужно опубликовать либу. Файлик с диз. системой - набор данных, который существует только в нем. Чтобы увидеть в других файлах стили типографики, да и вообще все стили - нужно опубликовать диз. систему. Как дропнешь либу, переходишь в нужный файл и включаешь библиотеку
Здравствуйте, у меня вопрос джуна: я сейчас повторяю Stepper из вашей дизайн-системы (там где изображены минус, плюс), и я не понимаю вот этот фрагмент: - есть инстанс button который переделан в круг и в нём - инстанс иконки minus - тут всё понятно, но у меня вопрос: как вы сделали outline stroke в инстансе иконки, чтобы задать нужные ширину-высоту минусу, не разломав сам инстанс icon? Я вижу что в вашем файле, когда я выделяю инстанс icon, на правой панели есть кнопка restore component. То есть как-то вы смогли сделать outline stroke минусу, сохранив возможность вернуть связь инстанса с компонентом. Как у вас получилось? PS. Я создала копию иконки, сделала ей детач, поменяла на outline stroke, сделала компонент, сдублировала инстанс, компонент удалила, у меня получился инстанс с такой же надписью restore component - но, я не могу этот инстанс вставить в подслой к инстансу button, а у вас именно так: инстанс button и в нём подслой инстанс иконка minus (переделанная, с outline stroke). У меня не ставится моя переделанная иконка в подслой к инстансу button. Если я сделаю детач самой button, то запросто смогу всё поменять, НО, нарушатся связи с компонентом button, а у вас-то связи сохранены...🤯 Не пойму... в чём прикол... хочу понять как это сделать...
Здравствуйте! Честно говоря, мне сложно понять в чем проблема просто читая текст, нужно смотреть. Restore component означает просто что мастер компонент недоступен/был удален. Не думаю, что причина в этом. Поменять ширину линии можно напрямую в дочернем компоненте. Я думаю, это просто такая иконка, я с ней ничего не делала насколько я помню )
@@irina1nik не хочу быть занудой🙏, но я всё ещё надеюсь что смогу сделать как у вас :) Фрагмент Inputs --> Stepper Вот есть компонент Button (icon only): состоит из обводки (форма) и внутри иконка шестерёнки. Я делаю его инстанс для Stepper, и пытаюсь исправить в нём шестеренку на знак минус - ок, это получилось тк связь есть Потом замечаю что у вас, знак минус оторван от сета с иконками и переделан в (stroke) То есть в инстансе Button (который сохранил связь с компонентом) лежит таинственная иконка "minus (stroke)" которая уже не имеет связи с сетом иконок И сделана как outline stroke. Как же cделать outline stroke вместо кривых у инстанса, не ломая связей? У меня невозможно изменить кривую применив на неё outline stroke в инстансе, все настройки погашены. Я гуглила, но не нашла решения. Как же вы это сделали? Как поменять ширину линии в дочернем компоненте, изменив кривую в stroke.. вот... надеюсь обьяснила 🤔
@@Midi25 это просто другая иконка ) иконка может быть как outline так и просто shape. Эту иконку с обводкой можно заменить на любую другую с обводкой или без. Просто разный тип иконок, все они могут буть компонентами и меняться в switch component
Это тоже часть системы, которая нужна и девелоперам и дизайнерам. На уровне дизайна она помогает создать единообразные макеты с хорошей структурой. В макетах не должно быть случайных отступов. Предложенная система spacing ещё и хорошо переводится в rem, что повышает доступность интерфейса. Относительно теней и углов, эту систему можно и поменять, но какая-то система должна быть, чтобы макеты было единообразные. Предложенные значения очень легко имплементируются в Tailwind, если ваши девы его используют.
Добрый день! Извиняюсь за долгий ответ. К сожалению, без бОльшего количества информации тяжело сказать. Курс есть на двух платформах (степик и юдеми). Если не получилось на одной, то точно получится на другой) Вот ссылки: stepik.org/a/114973 www.udemy.com/course/ui-design-bootcamp/?referralCode=8A011FF9C9573BF4369F
Ирина добрый день, поему в дизайн системе вы используете только абсолютные цвета? ведь если добавить линейку опасити цветов, можно безболезненно добавить и темную тему
Цвета без прозрачности более универсальные. С прозрачностью можно часто столкнуться с тем, что контент снизу просвечивает. Такие цвета чаще добавляются как дополнительные. Хотя строгих правил тут нет. Темная тема безболезненно все равно не добавится. Это тема на отдельное видео про токены))
я чего-то не понимаю - а почему под icon right иконка на кнопке расположена слева, а в icon left - справа на первых двух верхних (default, hover) состояниях? наивный вопрос: а в бесплатной версии фигмы можно как то ставить такие разделительные линии как у вас например слева welcome отделено от color? Это отдельные страницы чтоли? 🤔
Хороший вопрос) я на самом деле просто перепутала icon left и icon right, поправила в файле, спасибо что заметили Разделительная линия - это просто пустая страница с таким вот именем "━━━━━━━━━━━━━━━━" В бесплатной версии такое тоже можно сделать, но суммарное количество страниц ограничено 3-мя
@@irina1nik да, я уже сообразила, что это страницы))) то есть в бесплатной версии мне лучше всю дизайн систему делать на 1 странице просто систематизировать её визуально.
Добрый день. К сожалению кураторства на курсе нет. За счет этого, получилось сделать профессиональный курс по такой низкой цене. Но я отвечаю на комментарии здесь, на этом канала. Если у вас возникнут затруднения, то можете задать вопрос на этом канале и я Вам отвечу.
Есть ли какая-то классификация размеров кнопок для сайтов/мобильных приложений? Знаю только что для веб минимальный размер кнопки - 32px, а для мобил минимальный размер - 44px. Я решила повторить всю вашу дизайн-систему как самостоятельный урок, чтобы попрактиковаться 😇
Отличное упражнение, правда очень большое) после такого вы точно будете очень уверенно себя чувствовать, чтобы систематизировать интерфейсы Единой классификации нет. Вы правильно указали минимальные размеры: для мобильных устройств минимальный размер ограничивает WCAG Accessibility guidelines, на десктопах можно руководствоваться законом Фиттса. Тот же WCAG рекомендует для кнопок-иконок тоже не меньше 44px и на десктопах. Кнопка с текстом может быть меньше. Удобно иметь три размера кнопки и инпута: маленькая, большая, средняя
Привет. Я живу в Польше, хотел купить твои курсы, но при оплате мне вылетает следующая ошибка - "Похоже, это был технический сбой - попробуйте ещё раз, пожалуйста". Есть решение данной проблемы ?
Добрый день, Роман и Guru Music! К сожалению, сложно определить проблему без бОльшего количества информации. Попробуйте на Юдеми: www.udemy.com/course/ui-design-bootcamp/?referralCode=8A011FF9C9573BF4369F Либо можете связаться со мной по емайлу, который находится в описании канала
Моё достижение! Надеюсь скоро будет 1000. Всё за счет органических охватов. Это не является моей основной деятельностью, поэтому и в рекламу на ютубе не вкладывалась.
Случайно зашла, тк хотела понять, что такое дизайн система для базовых знаний системного аналитика. Голос невероятно приятный, подписалась и готова вечно слушать Вас😂
ВИДЕО ПРОСТО ОГОНЬ! Спасибо за вашу работу!!!❤
очень интересно) спасибо за контент, усиленно теперь жду екоммерс кейс >:0
Наконец свежий видосик от лучшего дизайнера рутуба 🖤
Спасибо, Вячеслав )
я так и не поняла про бесплатную версию. Объяснения были только для платной а в начале говорила, что расскажет и про бесплатно.
так рассказали же, нужно вырезать все секции компонентов в один файл
Очень полезно, спасибо 😊
Spasibo bolshoe 🥰Podkazhite, kak vy pomenjali design paneli "Pages", chto tam est razdelenie s pomosh'ju linij?
А где вы брали информацию для изучения дизайн-систем?
Здравствуйте, подскажите пожалуйста, почему текстовые стили не отображаются в файле, все сделала как вы объяснили в видео?
тебе нужно опубликовать либу. Файлик с диз. системой - набор данных, который существует только в нем. Чтобы увидеть в других файлах стили типографики, да и вообще все стили - нужно опубликовать диз. систему. Как дропнешь либу, переходишь в нужный файл и включаешь библиотеку
Ирина добрый день, а у вас есть полная версия этой дизайн системы?
Здравствуйте, у меня вопрос джуна: я сейчас повторяю Stepper из вашей дизайн-системы (там где изображены минус, плюс),
и я не понимаю вот этот фрагмент:
- есть инстанс button который переделан в круг и в нём - инстанс иконки minus - тут всё понятно, но у меня вопрос:
как вы сделали outline stroke в инстансе иконки, чтобы задать нужные ширину-высоту минусу, не разломав сам инстанс icon?
Я вижу что в вашем файле, когда я выделяю инстанс icon, на правой панели есть кнопка restore component.
То есть как-то вы смогли сделать outline stroke минусу, сохранив возможность вернуть связь инстанса с компонентом. Как у вас получилось?
PS. Я создала копию иконки, сделала ей детач, поменяла на outline stroke, сделала компонент, сдублировала инстанс, компонент удалила,
у меня получился инстанс с такой же надписью restore component - но, я не могу этот инстанс вставить в подслой к инстансу button,
а у вас именно так: инстанс button и в нём подслой инстанс иконка minus (переделанная, с outline stroke).
У меня не ставится моя переделанная иконка в подслой к инстансу button.
Если я сделаю детач самой button, то запросто смогу всё поменять, НО, нарушатся связи с компонентом button, а у вас-то связи сохранены...🤯
Не пойму... в чём прикол... хочу понять как это сделать...
Здравствуйте! Честно говоря, мне сложно понять в чем проблема просто читая текст, нужно смотреть. Restore component означает просто что мастер компонент недоступен/был удален. Не думаю, что причина в этом. Поменять ширину линии можно напрямую в дочернем компоненте. Я думаю, это просто такая иконка, я с ней ничего не делала насколько я помню )
@@irina1nik не хочу быть занудой🙏, но я всё ещё надеюсь что смогу сделать как у вас :)
Фрагмент Inputs --> Stepper
Вот есть компонент Button (icon only): состоит из обводки (форма) и внутри иконка шестерёнки.
Я делаю его инстанс для Stepper, и пытаюсь исправить в нём шестеренку на знак минус - ок, это получилось тк связь есть
Потом замечаю что у вас, знак минус оторван от сета с иконками и переделан в (stroke)
То есть в инстансе Button (который сохранил связь с компонентом) лежит таинственная иконка "minus (stroke)" которая уже не имеет связи с сетом иконок
И сделана как outline stroke. Как же cделать outline stroke вместо кривых у инстанса, не ломая связей?
У меня невозможно изменить кривую применив на неё outline stroke в инстансе, все настройки погашены.
Я гуглила, но не нашла решения. Как же вы это сделали? Как поменять ширину линии в дочернем компоненте, изменив кривую в stroke..
вот... надеюсь обьяснила 🤔
@@Midi25 это просто другая иконка ) иконка может быть как outline так и просто shape. Эту иконку с обводкой можно заменить на любую другую с обводкой или без. Просто разный тип иконок, все они могут буть компонентами и меняться в switch component
@@irina1nik надеюсь это будет в курсе, мелочь а важно. Спасибо, иду дальше покорять азы по дизайн-системе)
Отличное полезное видео, сколько по времени у вас ушло на создание данной дизайн системы?
Добрый день. Не очень понимаю для чего нужны Spacing, Shadow и Border radius - это нужно фронтендам, а не дизайнерам?
Это тоже часть системы, которая нужна и девелоперам и дизайнерам. На уровне дизайна она помогает создать единообразные макеты с хорошей структурой. В макетах не должно быть случайных отступов. Предложенная система spacing ещё и хорошо переводится в rem, что повышает доступность интерфейса. Относительно теней и углов, эту систему можно и поменять, но какая-то система должна быть, чтобы макеты было единообразные. Предложенные значения очень легко имплементируются в Tailwind, если ваши девы его используют.
Ирина Здравствуйте я из Казахстана как мне оплатить ваши курсы иначать обучение?
Добрый день!
Извиняюсь за долгий ответ. К сожалению, без бОльшего количества информации тяжело сказать. Курс есть на двух платформах (степик и юдеми). Если не получилось на одной, то точно получится на другой) Вот ссылки:
stepik.org/a/114973
www.udemy.com/course/ui-design-bootcamp/?referralCode=8A011FF9C9573BF4369F
Ирина добрый день, поему в дизайн системе вы используете только абсолютные цвета? ведь если добавить линейку опасити цветов, можно безболезненно добавить и темную тему
Цвета без прозрачности более универсальные. С прозрачностью можно часто столкнуться с тем, что контент снизу просвечивает. Такие цвета чаще добавляются как дополнительные. Хотя строгих правил тут нет.
Темная тема безболезненно все равно не добавится. Это тема на отдельное видео про токены))
Здравствуйте! Где можно посмотреть ваши работы?)
Мое портфолио здесь www.irinanik.com/
Здравствуйте , как можно с вами связаться?
Здравствуйте!
Моя почта находится в профиле канала
я чего-то не понимаю - а почему под icon right иконка на кнопке расположена слева, а в icon left - справа на первых двух верхних (default, hover) состояниях?
наивный вопрос: а в бесплатной версии фигмы можно как то ставить такие разделительные линии как у вас например слева welcome отделено от color? Это отдельные страницы чтоли? 🤔
Хороший вопрос) я на самом деле просто перепутала icon left и icon right, поправила в файле, спасибо что заметили
Разделительная линия - это просто пустая страница с таким вот именем "━━━━━━━━━━━━━━━━" В бесплатной версии такое тоже можно сделать, но суммарное количество страниц ограничено 3-мя
@@irina1nik да, я уже сообразила, что это страницы))) то есть в бесплатной версии мне лучше всю дизайн систему делать на 1 странице просто систематизировать её визуально.
@@Midi25 все верно, лучше делать на одной странице. Во второй части видео показано как раз как собирать её на одну страницу
Здравствуйте, подскажите, в вашем курсе включена обратная связь по выполненным заданиям?
Добрый день. К сожалению кураторства на курсе нет. За счет этого, получилось сделать профессиональный курс по такой низкой цене. Но я отвечаю на комментарии здесь, на этом канала. Если у вас возникнут затруднения, то можете задать вопрос на этом канале и я Вам отвечу.
Есть ли какая-то классификация размеров кнопок для сайтов/мобильных приложений?
Знаю только что для веб минимальный размер кнопки - 32px, а для мобил минимальный размер - 44px.
Я решила повторить всю вашу дизайн-систему как самостоятельный урок, чтобы попрактиковаться 😇
Отличное упражнение, правда очень большое) после такого вы точно будете очень уверенно себя чувствовать, чтобы систематизировать интерфейсы
Единой классификации нет. Вы правильно указали минимальные размеры: для мобильных устройств минимальный размер ограничивает WCAG Accessibility guidelines, на десктопах можно руководствоваться законом Фиттса. Тот же WCAG рекомендует для кнопок-иконок тоже не меньше 44px и на десктопах. Кнопка с текстом может быть меньше.
Удобно иметь три размера кнопки и инпута: маленькая, большая, средняя
@@irina1nik спасибо большое, приступаю к практике :)
Привет. Я живу в Польше, хотел купить твои курсы, но при оплате мне вылетает следующая ошибка - "Похоже, это был технический сбой - попробуйте ещё раз, пожалуйста". Есть решение данной проблемы ?
Разобрались с проблемой ?
Добрый день, Роман и Guru Music!
К сожалению, сложно определить проблему без бОльшего количества информации.
Попробуйте на Юдеми: www.udemy.com/course/ui-design-bootcamp/?referralCode=8A011FF9C9573BF4369F
Либо можете связаться со мной по емайлу, который находится в описании канала
не много до 1000 подписчиков осталось.
Моё достижение! Надеюсь скоро будет 1000. Всё за счет органических охватов. Это не является моей основной деятельностью, поэтому и в рекламу на ютубе не вкладывалась.