Design system / UI Kit in Figma #1

Подписаться 41 тыс.

Просмотров 47 тыс.

50% 1

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

Опубликовано:

8 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 69

@AndriiKidenko 3 года назад

Спасибо за твои видео! Благодаря твоим знаниям не лажаю на работе) сделай, пожалуйста, обзор на дизайн-системы.

@user-tz4bp3lp3t 4 года назад

Хорошее объяснение. Вынесла для себя полезную инфу. Супер, спасибо!

@alexandraborshchevskaya7958 3 года назад

охуенное видео!!!! узнала больше,чем на курсах! огромное вам спасибо за труд

@oleksandrboiko554 4 года назад

крайне полезная информация у вас на канале. спасибо за труд!

@user-galimov 4 года назад

Классная тема по поводу дизайн систем! Спасибо большое! А видос по поводу объяснения других дизайн систем, то тебе не будет цены...

@Jorinio_98 4 года назад

Это просто ТОП! Спасибо тебе огромное! :)

@elviraabdukadyrova444 4 года назад

У вас самый классный канал на ютьюб! Огромное спасибо!

@IvanLao 4 года назад

Максим, спасибо большое за подробный урок. Все четко и понятно) буду следить за обновлениями!

@user-iw7kj2ng7d 4 года назад

Спасибо большое за видео, ждем продолжения! :)

@katyarybal4115 4 года назад

Обожаю ваш канал! Спасибо за информацию)

@user-rf8mh3iv8e Год назад

Очень подробно и доступно

@user-ju8cs8db3s 3 года назад

Спасибо большое! очень полезны все ваши видео!

@Leonid60000 3 года назад

Да, сними по материал дизайну. Спасибо

@kitkaty_iva 4 года назад

Спасибо за видео! Ждем продолжения)

@user-wn8zv1rb6f 4 года назад

Спасибо❤ спасибо❤ спасибо❤ Супер видео разбор!

@kancniii 2 года назад

👏

@mariamgevorgyan6059 3 года назад

Очень полезный видео, спасибо!!😌

@desperatehousewife.14 4 года назад

Привет! Спасибо большое за информацию!

@magasdesign8928 4 года назад

Видео по Material Design будет интересно

@postolify 3 года назад

Четко, спасибо!

@makc6878 4 года назад

Отличный контент! Но, пожалуйста структурируй подачу, что бы не было из разряда... В конце видео- О, в начале надо было так

@user-vn4ig2rl8c 4 года назад

очень познавательно. спасибо!

@lidiia_s 2 года назад

Дякую за відео!

@KattyKkk 2 года назад

Спасибо!

@aalauno 3 года назад

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

@nurbol-designer 3 года назад

🔥🔥🔥

@SandWicH177rus 4 года назад

Спасибо! :)

@KT-ue2mx 3 года назад

А можно не добавлять при авто лейауте кнопке фрейм(прямоугольник), а просто добавив тексту кнопки автолейаут добавить fill и все. Будет одно и тоже.

@antischulz 4 года назад

спасибо

@alexmint9540 4 года назад

Процесс создания сайта: сначала рисуем uikit с кнопочками, и потом уже вставляем в макет. Или сначала рисуем макет и оттуда берем элементы и переносим в uikit?

@lordykillin1920 3 года назад

Вначале была речь об этом. Сначала делаешь одну страницу, после принятия дизайна заказчиком делаешь ui kit. Ты не сможешь качественно кита сделать, если не будешл в целом понимать стиль, как и что сочитается на странице

@svetlanazaretskaya5405 3 года назад

Благодарю за видео! Я только не поняла как закидывать иконки в контейнер?

@je5ica 9 месяцев назад

Подскажи, а почему не использовал варианты в компоненте с кнопками? Зачем надо было делать 3 разных компонента?

@disarto.digital 9 месяцев назад

Видео снято в Мае 2020. Функционала вариантов ещё не было 🙂

@alsoualsou9 3 года назад

Thx!!!

@user-eo3jz8uj9l 4 года назад

👍👍👍🙏🏻🙏🏻🙏🏻🔥🔥🔥

@papercane6423 3 года назад

о уенно

@Angel-pg4ge 3 года назад

Как киты подключать к файлу в фигме и перекидывать с него компоненты

@antischulz 4 года назад

Thanx

@verashuvalova7870 3 года назад

Здравствуйте, спасибо за материал. Подскажите, где лежат подсказки и видео, на которые вы ссылаетесь? Конкретно интересует работа с компонентами > ресайз компонента.

@disarto.digital 3 года назад

Здравствуйте, подсказки на youtube всегда отображаются в правом верхнем углу видео (под иконкой со знаком i)

@verashuvalova7870 3 года назад

@@disarto.digital Благодарю )

@altrie 4 года назад

а зачем вы добавляете к кнопке фон-прямоугольник отдельно и делаете дополнительный вертикальный auto layout? ведь можно просто к первому горизонтальному добавить фон и скругление, как и к любому фрейму

@disarto.digital 4 года назад

Добавление фона отдельным шейпом это привычка) Разумеется, можно сразу к фрейму добавить фон и скругление углов. Это уж кому как удобнее. А вот по поводу двух auto-layout чуть сложнее. В моем примере была кнопка с иконкой. Если поставить горизонтальный auto-layout, то нельзя будет вручную изменить ширину кнопки (только высоту), а это иногда бывает нужно. Поэтому я обхожу это вложением горизонтального auto-layout'а в вертикальный. В случае с простой кнопкой без иконки такие изощрения, разумеется, не нужны (впрочем, они не нужны и в том случае, если вы не собираетесь вручную менять ширину кнопки и будете полагаться только на автоматические отступы).

@vladimirbondarev478 4 года назад

Здравствуйте! А почему остановились именно на Фигме для работы и для подачи информации на канале? Почему не XD? Можете что-то сказать по поводу редактора от Adobe?

@disarto.digital 4 года назад

Adobe XD неплох, но 90% команд, с которыми я сталкивался, работают в Фигме. Плюс, лично мне Фигма приятнее с точки зрения эргономики: ощущается лучше, приятнее работать (а это очень важно для программы, в которой проводишь по несколько часов в день).

@user-fu6qi8gm7e 2 года назад

Добрый день, скажите, пожалуйста, есть ли смысл применять auto layout к карточкам или достаточно того, что они в компонентах?

@disarto.digital 2 года назад

Применять Auto layout к карточкам - это отличная идея 😉

@katerynamoroziuk1973 3 года назад

Спасибо большое за информацию! у меня вот такой вопрос, получила проект доделать без layout все очень мануально дизайнер делал, без UI kit. Разработчики уже начали работать. как бы мне решить быстрее проблему и помочь фронтэнду?

@disarto.digital 3 года назад

Тут можно только посоветовать начать делать UI Kit и поддерживать его в актуальном состоянии. Это сильно поможет в дальнейшем, при внесении изменений в проект.

@annancyro 2 года назад

Подскажите, нужно ли для каждого адаптива адаптировать и ui-kit тоже?

@disarto.digital 2 года назад

UI Kit должен содержать компоненты, которые используются в адаптиве. Тут уже зависит от того, как именно организованы сами компоненты. Иногда это может быть 1 компонент, которых используется и для десктопа, и для планшета, и даже для мобильной версии. А иногда нужны отдельные компоненты.

@Libero1991monk 4 года назад

18:50 Какое сочетание клавиш нажимаете, чтобы фон на задний план ушел?

@disarto.digital 4 года назад

Ctrl + Shift + [

@desperatehousewife.14 4 года назад

Привет! Спасибо большое за информацию! Мог бы дать ссылку на carbon систему в Figma? Не могу найти😒

@verashuvalova7870 3 года назад

github.com/half5cat/carbon-design-kit-figma/blob/master/Carbon%20Design%20System%20(White%20Theme).fig

@user-ub7pv3by9b 4 года назад

Добрый день =) По вашему мнению, за сколько времени реально можно выучить профессию ux/ui проектировщика, чтобы был смысл отправлять резюме на позицию джуна? Как вариант, хватит ли года обучения?

@disarto.digital 4 года назад

Зависит от бэкграунда и времени, которое вы готовы вкладывать в обучение. Если тратить по 3-4 часа каждый день, то хватит и 6-8 месяцев.

@user-ub7pv3by9b 4 года назад

@@disarto.digital понял, спасибо. А вы самостоятельно обучались всему? Если говорить о теории

@Leonid60000 3 года назад

Как задать размер контейнера для иконки?

@disarto.digital 3 года назад

Контейнер - это обычный фрейм. Чаще всего используется размер 24px на 24px.

@dariabosenko6159 3 года назад

а можно ссылку на этот пак иконок?

@disarto.digital 3 года назад

feathericons.com/. В Фигме есть одноименный плагин.

@user-ws6em5kh9f 3 года назад

Так и не сказал как перетащить эту иконку

@Oswee 4 года назад

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.