Design system / UI Kit in Figma #1
HTML-код
- Опубликовано: 17 окт 2024
- The first video about the creation of the UI Kit (and in the future a full-fledged design system) in Figma. Here we understand the basic concepts: what are a UI Kit and design system. What is the difference between them. And how to start building your own UI Kit.
Follow me on social media:
/ disarto.digital
www.behance.ne...
dribbble.com/Dexo
![[4K] Watch SpaceX Catch A Starship Rocket From Space!!! #IFT5](http://i.ytimg.com/vi/pIKI7y3DTXk/mqdefault.jpg)
охуенное видео!!!! узнала больше,чем на курсах! огромное вам спасибо за труд
Хорошее объяснение. Вынесла для себя полезную инфу. Супер, спасибо!
Спасибо за твои видео! Благодаря твоим знаниям не лажаю на работе) сделай, пожалуйста, обзор на дизайн-системы.
крайне полезная информация у вас на канале. спасибо за труд!
У вас самый классный канал на ютьюб! Огромное спасибо!
Это просто ТОП! Спасибо тебе огромное! :)
Классная тема по поводу дизайн систем! Спасибо большое! А видос по поводу объяснения других дизайн систем, то тебе не будет цены...
Максим, спасибо большое за подробный урок. Все четко и понятно) буду следить за обновлениями!
Очень подробно и доступно
Обожаю ваш канал! Спасибо за информацию)
Спасибо большое за видео, ждем продолжения! :)
Спасибо большое! очень полезны все ваши видео!
Да, сними по материал дизайну. Спасибо
Четко, спасибо!
Спасибо❤ спасибо❤ спасибо❤ Супер видео разбор!
Дякую за відео!
Спасибо за видео! Ждем продолжения)
Спасибо!
👏
Подскажи, а почему не использовал варианты в компоненте с кнопками? Зачем надо было делать 3 разных компонента?
Видео снято в Мае 2020. Функционала вариантов ещё не было 🙂
Очень полезный видео, спасибо!!😌
Видео по Material Design будет интересно
Подскажите, нужно ли для каждого адаптива адаптировать и ui-kit тоже?
UI Kit должен содержать компоненты, которые используются в адаптиве. Тут уже зависит от того, как именно организованы сами компоненты. Иногда это может быть 1 компонент, которых используется и для десктопа, и для планшета, и даже для мобильной версии. А иногда нужны отдельные компоненты.
Привет! Спасибо большое за информацию!
Здравствуйте! А почему остановились именно на Фигме для работы и для подачи информации на канале? Почему не XD? Можете что-то сказать по поводу редактора от Adobe?
Adobe XD неплох, но 90% команд, с которыми я сталкивался, работают в Фигме. Плюс, лично мне Фигма приятнее с точки зрения эргономики: ощущается лучше, приятнее работать (а это очень важно для программы, в которой проводишь по несколько часов в день).
Добрый день, скажите, пожалуйста, есть ли смысл применять auto layout к карточкам или достаточно того, что они в компонентах?
Применять Auto layout к карточкам - это отличная идея 😉
🔥🔥🔥
Отличный контент! Но, пожалуйста структурируй подачу, что бы не было из разряда... В конце видео- О, в начале надо было так
Здравствуйте, спасибо за материал. Подскажите, где лежат подсказки и видео, на которые вы ссылаетесь? Конкретно интересует работа с компонентами > ресайз компонента.
Здравствуйте, подсказки на youtube всегда отображаются в правом верхнем углу видео (под иконкой со знаком i)
@@disarto.digital Благодарю )
очень познавательно. спасибо!
Благодарю за видео! Я только не поняла как закидывать иконки в контейнер?
очень полезно, спасибо!
а зачем вы добавляете к кнопке фон-прямоугольник отдельно и делаете дополнительный вертикальный auto layout? ведь можно просто к первому горизонтальному добавить фон и скругление, как и к любому фрейму
Добавление фона отдельным шейпом это привычка) Разумеется, можно сразу к фрейму добавить фон и скругление углов. Это уж кому как удобнее. А вот по поводу двух auto-layout чуть сложнее. В моем примере была кнопка с иконкой. Если поставить горизонтальный auto-layout, то нельзя будет вручную изменить ширину кнопки (только высоту), а это иногда бывает нужно. Поэтому я обхожу это вложением горизонтального auto-layout'а в вертикальный. В случае с простой кнопкой без иконки такие изощрения, разумеется, не нужны (впрочем, они не нужны и в том случае, если вы не собираетесь вручную менять ширину кнопки и будете полагаться только на автоматические отступы).
Как киты подключать к файлу в фигме и перекидывать с него компоненты
Спасибо большое за информацию! у меня вот такой вопрос, получила проект доделать без layout все очень мануально дизайнер делал, без UI kit. Разработчики уже начали работать. как бы мне решить быстрее проблему и помочь фронтэнду?
Тут можно только посоветовать начать делать UI Kit и поддерживать его в актуальном состоянии. Это сильно поможет в дальнейшем, при внесении изменений в проект.
А можно не добавлять при авто лейауте кнопке фрейм(прямоугольник), а просто добавив тексту кнопки автолейаут добавить fill и все. Будет одно и тоже.
Процесс создания сайта: сначала рисуем uikit с кнопочками, и потом уже вставляем в макет. Или сначала рисуем макет и оттуда берем элементы и переносим в uikit?
Вначале была речь об этом. Сначала делаешь одну страницу, после принятия дизайна заказчиком делаешь ui kit. Ты не сможешь качественно кита сделать, если не будешл в целом понимать стиль, как и что сочитается на странице
Спасибо! :)
Добрый день =)
По вашему мнению, за сколько времени реально можно выучить профессию ux/ui проектировщика, чтобы был смысл отправлять резюме на позицию джуна? Как вариант, хватит ли года обучения?
Зависит от бэкграунда и времени, которое вы готовы вкладывать в обучение. Если тратить по 3-4 часа каждый день, то хватит и 6-8 месяцев.
@@disarto.digital понял, спасибо. А вы самостоятельно обучались всему? Если говорить о теории
18:50 Какое сочетание клавиш нажимаете, чтобы фон на задний план ушел?
Ctrl + Shift + [
спасибо
о уенно
👍👍👍🙏🏻🙏🏻🙏🏻🔥🔥🔥
Привет! Спасибо большое за информацию!
Мог бы дать ссылку на carbon систему в Figma? Не могу найти😒
github.com/half5cat/carbon-design-kit-figma/blob/master/Carbon%20Design%20System%20(White%20Theme).fig
Thx!!!
Как задать размер контейнера для иконки?
Контейнер - это обычный фрейм. Чаще всего используется размер 24px на 24px.
а можно ссылку на этот пак иконок?
feathericons.com/. В Фигме есть одноименный плагин.
Thanx
Так и не сказал как перетащить эту иконку
Ja bil bi blagodaren esli raskazali bi pro rabotu s multi-theme. Kogda polzavatelju razresheno vibratj "ljuboi" Accent color i Light/Darker/Dark theme.
Kogda rabotaesh s prostim saitikom, vsjo prosto... silno paritsa pro naming i organizaciju ne nado. No kogda odin i tot zhe komponent mozhet bitj v raznih variacijah (theme) i v state (active, hover, etc), to vsjo na mnogo slozhnee. Te zhe prostie shadows/elevation. Na belom fone, vsjo prosto. A kak bitj kogda fon tjomnij? Ilji Darker? I esli polzovatelj esho vibral krasnij Accent?
Menja ne tak silno parit sami komponenti, kak imenno naming conventions, potomu shto mnje nado peredatj/sozdatj normalnuju arhitekturu dlja razrabotchikov.
Спасибо!