Design system / UI Kit in Figma #1

Рет қаралды 47,022

4 жыл бұрын

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.net/Dexo
dribbble.com/Dexo

Пікірлер: 69

@user-tz4bp3lp3t 4 жыл бұрын

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

@oleksandrboiko554 4 жыл бұрын

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

@katyarybal4115 4 жыл бұрын

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

@user-iw7kj2ng7d 4 жыл бұрын

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

@AndriiKidenko 3 жыл бұрын

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

@elviraabdukadyrova444 4 жыл бұрын

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

@Jorinio_98 4 жыл бұрын

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

@kitkaty_iva 4 жыл бұрын

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

@alexandraborshchevskaya7958 3 жыл бұрын

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

@user-ju8cs8db3s 3 жыл бұрын

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

@user-galimov 4 жыл бұрын

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

@IvanLao 4 жыл бұрын

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

@mariamgevorgyan6059 3 жыл бұрын

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

@user-wn8zv1rb6f 3 жыл бұрын

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

@desperatehousewife.14 3 жыл бұрын

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

@user-vn4ig2rl8c 4 жыл бұрын

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

@postolify 3 жыл бұрын

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

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

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

@aalauno 3 жыл бұрын

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

@Leonid60000 3 жыл бұрын

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

@magasdesign8928 4 жыл бұрын

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

@SandWicH177rus 4 жыл бұрын

Спасибо! :)

@anatohryz7949 3 жыл бұрын

Спасибо!

@nurbol-designer 3 жыл бұрын

🔥🔥🔥

@svetlanazaretskaya5405 3 жыл бұрын

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

@kancniii 2 жыл бұрын

👏

@makc6878 4 жыл бұрын

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

@lidiia_s 2 жыл бұрын

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

@Angel-pg4ge 3 жыл бұрын

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

@antischulz 4 жыл бұрын

спасибо

@user-eo3jz8uj9l 4 жыл бұрын

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

@alsoualsou9 3 жыл бұрын

Thx!!!

@antischulz 4 жыл бұрын

Thanx

@Libero1991monk 4 жыл бұрын

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

@disarto.digital 4 жыл бұрын

Ctrl + Shift + [

@user-fu6qi8gm7e 2 жыл бұрын

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

@disarto.digital 2 жыл бұрын

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

@KT-ue2mx 3 жыл бұрын

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

@annancyro 2 жыл бұрын

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

@disarto.digital 2 жыл бұрын

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

@verashuvalova7870 3 жыл бұрын

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

@disarto.digital 3 жыл бұрын

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

@verashuvalova7870 3 жыл бұрын

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

@papercane6423 3 жыл бұрын

о уенно

@vladimirbondarev478 4 жыл бұрын

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

@disarto.digital 4 жыл бұрын

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

@katerynamoroziuk1973 3 жыл бұрын

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

@disarto.digital 3 жыл бұрын

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

@desperatehousewife.14 3 жыл бұрын

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

@verashuvalova7870 3 жыл бұрын

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

@altrie 4 жыл бұрын

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

@disarto.digital 4 жыл бұрын

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

@Leonid60000 3 жыл бұрын

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

@disarto.digital 3 жыл бұрын

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

@user-ub7pv3by9b 4 жыл бұрын

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

@disarto.digital 4 жыл бұрын

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

@user-ub7pv3by9b 4 жыл бұрын

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

@je5ica 8 ай бұрын

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

@disarto.digital 8 ай бұрын

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

@alexmint9540 4 жыл бұрын

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

@lordykillin1920 3 жыл бұрын

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

@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.