Дизайн система в Фигма за 20 мин

Дизайн система в Фигма за 20 мин - туториал

Рет қаралды 13,017

Жыл бұрын

Ссылка на дизайн систему в Figma: www.figma.com/community/file/...
Хотите стать UX/UI дизайнером? Проходите курс: stepik.org/z/114973
#UXDesign #UX #UIдизайн #UXUIдизайн #вебдизайн #дизайнстема

Пікірлер: 44

@arhivictor 3 күн бұрын

ВИДЕО ПРОСТО ОГОНЬ! Спасибо за вашу работу!!!❤

@bibabo1310 Күн бұрын

Очень полезно, спасибо 😊

@user-jc5vc3xz5k 11 ай бұрын

Случайно зашла, тк хотела понять, что такое дизайн система для базовых знаний системного аналитика. Голос невероятно приятный, подписалась и готова вечно слушать Вас😂

@qambrosyeva5662 Жыл бұрын

очень интересно) спасибо за контент, усиленно теперь жду екоммерс кейс >:0

@annamit7803 11 ай бұрын

я так и не поняла про бесплатную версию. Объяснения были только для платной а в начале говорила, что расскажет и про бесплатно.

@slava.senatorov Жыл бұрын

Наконец свежий видосик от лучшего дизайнера рутуба 🖤

@irina1nik Жыл бұрын

Спасибо, Вячеслав )

@g0andkill Жыл бұрын

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

@FORSX 11 ай бұрын

Отличное полезное видео, сколько по времени у вас ушло на создание данной дизайн системы?

@juliaru7769 9 ай бұрын

А где вы брали информацию для изучения дизайн-систем?

@Pixel7000Pi Жыл бұрын

Ирина добрый день, а у вас есть полная версия этой дизайн системы?

@Sultan.96 Ай бұрын

Привет! Где-то можно ознакомиться с екоммерс кейсом?

@dmitrys7933 Жыл бұрын

Ирина добрый день, поему в дизайн системе вы используете только абсолютные цвета? ведь если добавить линейку опасити цветов, можно безболезненно добавить и темную тему

@irina1nik Жыл бұрын

Цвета без прозрачности более универсальные. С прозрачностью можно часто столкнуться с тем, что контент снизу просвечивает. Такие цвета чаще добавляются как дополнительные. Хотя строгих правил тут нет. Темная тема безболезненно все равно не добавится. Это тема на отдельное видео про токены))

@Midi25 Жыл бұрын

Здравствуйте, у меня вопрос джуна: я сейчас повторяю Stepper из вашей дизайн-системы (там где изображены минус, плюс), и я не понимаю вот этот фрагмент: - есть инстанс button который переделан в круг и в нём - инстанс иконки minus - тут всё понятно, но у меня вопрос: как вы сделали outline stroke в инстансе иконки, чтобы задать нужные ширину-высоту минусу, не разломав сам инстанс icon? Я вижу что в вашем файле, когда я выделяю инстанс icon, на правой панели есть кнопка restore component. То есть как-то вы смогли сделать outline stroke минусу, сохранив возможность вернуть связь инстанса с компонентом. Как у вас получилось? PS. Я создала копию иконки, сделала ей детач, поменяла на outline stroke, сделала компонент, сдублировала инстанс, компонент удалила, у меня получился инстанс с такой же надписью restore component - но, я не могу этот инстанс вставить в подслой к инстансу button, а у вас именно так: инстанс button и в нём подслой инстанс иконка minus (переделанная, с outline stroke). У меня не ставится моя переделанная иконка в подслой к инстансу button. Если я сделаю детач самой button, то запросто смогу всё поменять, НО, нарушатся связи с компонентом button, а у вас-то связи сохранены...🤯 Не пойму... в чём прикол... хочу понять как это сделать...

@irina1nik Жыл бұрын

Здравствуйте! Честно говоря, мне сложно понять в чем проблема просто читая текст, нужно смотреть. Restore component означает просто что мастер компонент недоступен/был удален. Не думаю, что причина в этом. Поменять ширину линии можно напрямую в дочернем компоненте. Я думаю, это просто такая иконка, я с ней ничего не делала насколько я помню )

@Midi25 Жыл бұрын

@@irina1nik не хочу быть занудой🙏, но я всё ещё надеюсь что смогу сделать как у вас :) Фрагмент Inputs --> Stepper Вот есть компонент Button (icon only): состоит из обводки (форма) и внутри иконка шестерёнки. Я делаю его инстанс для Stepper, и пытаюсь исправить в нём шестеренку на знак минус - ок, это получилось тк связь есть Потом замечаю что у вас, знак минус оторван от сета с иконками и переделан в (stroke) То есть в инстансе Button (который сохранил связь с компонентом) лежит таинственная иконка "minus (stroke)" которая уже не имеет связи с сетом иконок И сделана как outline stroke. Как же cделать outline stroke вместо кривых у инстанса, не ломая связей? У меня невозможно изменить кривую применив на неё outline stroke в инстансе, все настройки погашены. Я гуглила, но не нашла решения. Как же вы это сделали? Как поменять ширину линии в дочернем компоненте, изменив кривую в stroke.. вот... надеюсь обьяснила 🤔

@irina1nik Жыл бұрын

@@Midi25 это просто другая иконка ) иконка может быть как outline так и просто shape. Эту иконку с обводкой можно заменить на любую другую с обводкой или без. Просто разный тип иконок, все они могут буть компонентами и меняться в switch component

@Midi25 Жыл бұрын

@@irina1nik надеюсь это будет в курсе, мелочь а важно. Спасибо, иду дальше покорять азы по дизайн-системе)

@Midi25 Жыл бұрын

Есть ли какая-то классификация размеров кнопок для сайтов/мобильных приложений? Знаю только что для веб минимальный размер кнопки - 32px, а для мобил минимальный размер - 44px. Я решила повторить всю вашу дизайн-систему как самостоятельный урок, чтобы попрактиковаться 😇

@irina1nik Жыл бұрын

Отличное упражнение, правда очень большое) после такого вы точно будете очень уверенно себя чувствовать, чтобы систематизировать интерфейсы Единой классификации нет. Вы правильно указали минимальные размеры: для мобильных устройств минимальный размер ограничивает WCAG Accessibility guidelines, на десктопах можно руководствоваться законом Фиттса. Тот же WCAG рекомендует для кнопок-иконок тоже не меньше 44px и на десктопах. Кнопка с текстом может быть меньше. Удобно иметь три размера кнопки и инпута: маленькая, большая, средняя

@Midi25 Жыл бұрын

@@irina1nik спасибо большое, приступаю к практике :)

@ekaterina_kareva Жыл бұрын

Добрый день. Не очень понимаю для чего нужны Spacing, Shadow и Border radius - это нужно фронтендам, а не дизайнерам?

@irina1nik Жыл бұрын

Это тоже часть системы, которая нужна и девелоперам и дизайнерам. На уровне дизайна она помогает создать единообразные макеты с хорошей структурой. В макетах не должно быть случайных отступов. Предложенная система spacing ещё и хорошо переводится в rem, что повышает доступность интерфейса. Относительно теней и углов, эту систему можно и поменять, но какая-то система должна быть, чтобы макеты было единообразные. Предложенные значения очень легко имплементируются в Tailwind, если ваши девы его используют.

@AzaSolo Жыл бұрын

Здравствуйте, подскажите, в вашем курсе включена обратная связь по выполненным заданиям?

@irina1nik Жыл бұрын

Добрый день. К сожалению кураторства на курсе нет. За счет этого, получилось сделать профессиональный курс по такой низкой цене. Но я отвечаю на комментарии здесь, на этом канала. Если у вас возникнут затруднения, то можете задать вопрос на этом канале и я Вам отвечу.

@Midi25 Жыл бұрын

я чего-то не понимаю - а почему под icon right иконка на кнопке расположена слева, а в icon left - справа на первых двух верхних (default, hover) состояниях? наивный вопрос: а в бесплатной версии фигмы можно как то ставить такие разделительные линии как у вас например слева welcome отделено от color? Это отдельные страницы чтоли? 🤔

@irina1nik Жыл бұрын

Хороший вопрос) я на самом деле просто перепутала icon left и icon right, поправила в файле, спасибо что заметили Разделительная линия - это просто пустая страница с таким вот именем "━━━━━━━━━━━━━━━━" В бесплатной версии такое тоже можно сделать, но суммарное количество страниц ограничено 3-мя

@Midi25 Жыл бұрын

@@irina1nik да, я уже сообразила, что это страницы))) то есть в бесплатной версии мне лучше всю дизайн систему делать на 1 странице просто систематизировать её визуально.

@irina1nik Жыл бұрын

@@Midi25 все верно, лучше делать на одной странице. Во второй части видео показано как раз как собирать её на одну страницу

@t.karinaa 4 ай бұрын

Здравствуйте, подскажите пожалуйста, почему текстовые стили не отображаются в файле, все сделала как вы объяснили в видео?

@ferkatskyrim 2 ай бұрын

тебе нужно опубликовать либу. Файлик с диз. системой - набор данных, который существует только в нем. Чтобы увидеть в других файлах стили типографики, да и вообще все стили - нужно опубликовать диз. систему. Как дропнешь либу, переходишь в нужный файл и включаешь библиотеку

@user-dg2od1yz1p Жыл бұрын

Здравствуйте! Где можно посмотреть ваши работы?)

@irina1nik Жыл бұрын

Мое портфолио здесь www.irinanik.com/

@romanzhzh1372 Жыл бұрын

Привет. Я живу в Польше, хотел купить твои курсы, но при оплате мне вылетает следующая ошибка - "Похоже, это был технический сбой - попробуйте ещё раз, пожалуйста". Есть решение данной проблемы ?

@gurumusic7069 Жыл бұрын

Разобрались с проблемой ?

@irina1nik Жыл бұрын

Добрый день, Роман и Guru Music! К сожалению, сложно определить проблему без бОльшего количества информации. Попробуйте на Юдеми: www.udemy.com/course/ui-design-bootcamp/?referralCode=8A011FF9C9573BF4369F Либо можете связаться со мной по емайлу, который находится в описании канала

@KDesign1404 Жыл бұрын

Ирина Здравствуйте я из Казахстана как мне оплатить ваши курсы иначать обучение?

@irina1nik Жыл бұрын

Добрый день! Извиняюсь за долгий ответ. К сожалению, без бОльшего количества информации тяжело сказать. Курс есть на двух платформах (степик и юдеми). Если не получилось на одной, то точно получится на другой) Вот ссылки: stepik.org/a/114973 www.udemy.com/course/ui-design-bootcamp/?referralCode=8A011FF9C9573BF4369F

@gurumusic7069 Жыл бұрын

Здравствуйте , как можно с вами связаться?

@irina1nik Жыл бұрын

Здравствуйте! Моя почта находится в профиле канала

@DesignerDays Жыл бұрын

не много до 1000 подписчиков осталось.

@irina1nik Жыл бұрын

Моё достижение! Надеюсь скоро будет 1000. Всё за счет органических охватов. Это не является моей основной деятельностью, поэтому и в рекламу на ютубе не вкладывалась.