Figma Components

  Рет қаралды 89,780

Disarto

Disarto

5 жыл бұрын

Let's talk about components in Figma. We will go from simple things to complex: what are the components and why they are needed, how to create and edit them, what attributes we can change at the instances, how to use the components in real work, etc.. The topic is big and very important, so the video turned out to be voluminous :)

Пікірлер: 161
@arturshelaev9556
@arturshelaev9556 4 жыл бұрын
без сомнений это самое топовое видео по компонентам в русскоязычном сегменте ютуба.
@vvasilyev11
@vvasilyev11 5 жыл бұрын
Спасибо что вышел за рамки, показал как можно с этим работать. А то у большинства в тутроиалах только вода про компоненты
@IsHardynafthardynaft
@IsHardynafthardynaft 3 жыл бұрын
А у них и в голове вода. Делают уроки для количества. Влоххеры бля))
@radistelectric6216
@radistelectric6216 4 жыл бұрын
Супер! Я с десяток видео посмотрел, чтобы найти как заменять изображение в компонентах, а нашёл толковое объяснение только здесь! Переделал свой собственный проект по этому уроку, и всё отлично получилось.Огромное спасибо автору!
@___KS___
@___KS___ Жыл бұрын
Спасибо. Я так сам догадался до кое чего. Но теперь интуитивное стало осознанным. 😎🤗
@cifratura
@cifratura 5 жыл бұрын
Я посмотрел 13 видео до этого и только в этом понял ценность компонентов! Очень круто!
@mariamat4907
@mariamat4907 5 жыл бұрын
Первое действительно полезное видео из подобных! Спасибо!
@user-gx3io6sb6q
@user-gx3io6sb6q 3 жыл бұрын
Самые крутые уроки. Понятно про компоненты сразу все стало! Спасибо огромное!
@NataliaGold92
@NataliaGold92 3 жыл бұрын
Большое спасибо за ваш труд. Прекрасные видео и все сразу становится понятно.
@nataliiaalbul9625
@nataliiaalbul9625 4 жыл бұрын
Спасибо за замечательный контент, только начала изучать фигму и были проблемы с компонентами, но сейчас так ясно стало в голове! Чудесно)
@disarto.digital
@disarto.digital 4 жыл бұрын
Рад слышать :)
@user-tl1rv4jh1v
@user-tl1rv4jh1v 3 жыл бұрын
Огромное спасибо! Очень подробно разжевано. Привел отличные практические примеры. Я в восторге от урока!
@narinehvardumyan3219
@narinehvardumyan3219 3 жыл бұрын
Я просто в восторге от вашей подачи. Смотрю и улыбаюсь))
@ihorvorobiov
@ihorvorobiov 4 жыл бұрын
Спасибо большое за годный урок! Доступное объяснение материала и живой пример - отличное сочетание. Так держать)
@ennhomenko
@ennhomenko 4 жыл бұрын
Исчерпывающе, спасибо на добром слове!
@igorstocky2228
@igorstocky2228 3 жыл бұрын
У Вас талант преподавания! Спасибо! Очень полезная информация.
@ksenya7793
@ksenya7793 3 жыл бұрын
Нашла ваше видео и наконец разобралась с компонентами. Огромное спасибо, за такой качественный контент!))) Лучшее видео по компонентам.)
@GeknForever
@GeknForever 4 жыл бұрын
Лучший урок! Авторитетно заявляю это как уберчайник. Очень понравилось.
@rovsheneyubov1539
@rovsheneyubov1539 5 жыл бұрын
полезный урок и без воды )) Спасибо
@adamsteklov
@adamsteklov 2 жыл бұрын
Вообще не знал что это, но после просмотра видео, видимо придется посмотреть еще раз и попробовать :D
@user-yo7yf1pf9n
@user-yo7yf1pf9n 4 жыл бұрын
да!да!да!)я Вас люблю и уважаю с первой секунды этого урока- просто начать с того, о чем сказано в заголовке,и слушатели счастливы.спасибо за урок,очень круто.не исчезайте пожалуйста)
@libertyanka
@libertyanka 5 жыл бұрын
ура, наконец-то что-то дельное по компонентам, спасибо большое!)
@diekunstUA
@diekunstUA 5 жыл бұрын
с удовльствием посмотрел видео- полезно. спасибо
@user-ch8oz1yq3l
@user-ch8oz1yq3l 4 жыл бұрын
Отличное видео, наконец-то дошло до меня , как работать с компонентами. Спасибо))
@manikawow5866
@manikawow5866 4 жыл бұрын
Спасибо за урок, все четко, понятно и приятно слушать
@DKniazeff
@DKniazeff 4 жыл бұрын
Наконец кто-то доступно разжевал. Спасибо!
@wonderfulworld8667
@wonderfulworld8667 Жыл бұрын
Спасибо, все просто и понятно! Давно работаю в фигме, но через костыли ctrl+c > ctrl+v, но пришла серьезная задача, где такой механикой не обойтись, поэтому улучшаю знания, и ваше видео просто топ!
@pavelzharko7116
@pavelzharko7116 5 жыл бұрын
Нашел то, что искал! Спасибо тебе :)
@VictoriaSyvak
@VictoriaSyvak 3 жыл бұрын
Дуже дякую за те, що все з компонентами нарешті прояснилось:) дуже доступно) Після перегляду зрозуміла, що можна витрачати значно менше часу на дизайн, якщо не робити все вручну)
@zairahajiyeva4511
@zairahajiyeva4511 3 жыл бұрын
Вы просто разложили все по полочкам! Спасибо!
@Aegiro_07
@Aegiro_07 3 жыл бұрын
Большое спасибо за прекраснейший контент, продолжай в том же духе!!)
@viktoriya-photo
@viktoriya-photo 2 жыл бұрын
Хочу присоединиться ко всем комментариям) прекрасное объяснение!! Спасибо вам огромное🤗
@Drampam
@Drampam 3 жыл бұрын
Безумно крутой стиль у вас и урок полезный!
@spagettification
@spagettification Жыл бұрын
В компонентах уже случилось много изменений. Например, уже нет необходимости делать 8 компонентов для состояний. Появилась функция Variants, чтобы стейт можно было выбрать в параметрах компонента. Очень удобно. Спасибо за ваше видео :)
@sashazlobin
@sashazlobin 5 жыл бұрын
Отличный урок, спасибо 👍🏻
@sergiiandrosov1729
@sergiiandrosov1729 4 жыл бұрын
Спасибо большое за удобоваримую подачу.
@anastasiapavlova_kuzmina3378
@anastasiapavlova_kuzmina3378 4 жыл бұрын
Спасибо большое! все четко и понятно!
@annasedova6386
@annasedova6386 Жыл бұрын
Доступно объяснил, спасибо!
@alinashchebetun1000
@alinashchebetun1000 4 жыл бұрын
Огромное спасибо за видео!)
@big_papa_Joe
@big_papa_Joe 3 жыл бұрын
Спасибо, автор! Приятно смотреть, приятно слушать. Контент топ. Лайк, подписка.
@andriihelever1793
@andriihelever1793 4 жыл бұрын
Спасибо, очень круто и хорошие примеры на практике
@Mi-jt6nn
@Mi-jt6nn 4 жыл бұрын
Можно менять размер копии.. для этого необходимо просто заранее определить позиционирование дочерних компонентов елементов, так же можно вставлять другие иконки в компоненты (хотя это другой набор элементов, для этого их нужно класть в мастер компонент и скрывать, а на необходимой копии включать видимость интересующей вас группы дочерних элементов.
@user-dw5rz5cs4y
@user-dw5rz5cs4y 4 жыл бұрын
Интересно! Можно больше реальных примеров на практике? Спасибо за видео! Лайкос! !!
@liteleak4049
@liteleak4049 3 жыл бұрын
Спасибо. Очень хороший урок вышел.
@AndrewConfident
@AndrewConfident 3 жыл бұрын
Очень полезный видос! кнопка ctrl (deep selection) мне оочень упростила жизнь)
@alinarolinsky3404
@alinarolinsky3404 5 жыл бұрын
Большое спасибо! Всё по делу :)
@user-wt2rc8er7j
@user-wt2rc8er7j 3 жыл бұрын
Спасибо! Ваше видео просто спасение! :)
@amanrozyev5527
@amanrozyev5527 3 жыл бұрын
блин наконец видео которое нужно. А не эта вода сплошная кругом. Теперь ясно как делать иконки. и карточки на практике. Спасибо большое! ПОДПИСКА :)
@MaximGuzko
@MaximGuzko 2 жыл бұрын
Большое спасибо за информацию 🙏
@raevskaya_elizaveta
@raevskaya_elizaveta 2 жыл бұрын
Супер, спасибо, очень полезно и понятно 🤍
@valeryoks8847
@valeryoks8847 3 жыл бұрын
Супер! очень понятно и доходчиво))
@hyper_hal
@hyper_hal 4 жыл бұрын
Отличный видос. Спасибо :)
@natalitarasova5449
@natalitarasova5449 4 жыл бұрын
Класс! Спасибо за видео
@kodjaka
@kodjaka 4 жыл бұрын
Супер! Давай еще про Стили!
@dmitriyzhukov4592
@dmitriyzhukov4592 4 жыл бұрын
Спасибо. Очень полезно.
@user-od2qn1kp1d
@user-od2qn1kp1d 3 жыл бұрын
Очень ценное видео! Спасибо
@yanapapikian
@yanapapikian 2 жыл бұрын
Useful lesson, thanks a lot!
@catriarchiv
@catriarchiv 4 жыл бұрын
Спасибо за крутой контент.
@user-vz8ce9pv2o
@user-vz8ce9pv2o 3 жыл бұрын
чувак, ты просто бог!
@alsoualsou9
@alsoualsou9 3 жыл бұрын
ОГРОМНЕЙШЕЕ СПАСИБО !!!!
@nickchernitsyn3354
@nickchernitsyn3354 5 жыл бұрын
Брат, спасибо, друг!
@Frie666
@Frie666 3 жыл бұрын
Хороший видос! Было бы круто чтобы подсвечивались комбинации клавиш
@boykodmitriy
@boykodmitriy 5 жыл бұрын
Спасибо! Продолжа ;)
@user-tt2vv9qo6e
@user-tt2vv9qo6e 5 жыл бұрын
Спасибо! Лучшее видео про компоненты на ютуб! Жду отдельное видео)
@komkoff91
@komkoff91 4 жыл бұрын
Очень крутые уроки по Figme! Я прохожу курс от Skillbox по Figme, так там одна вода и ничего не понятно, приходится на ютубе искать более подробную информацию. У тебя классный контент!
@disarto.digital
@disarto.digital 4 жыл бұрын
Спасибо. Приятно слышать 🙂
@diekunstUA
@diekunstUA 5 жыл бұрын
отличное видео. спасибо.
@va1ga
@va1ga 3 жыл бұрын
Компоненты очень удобно с вариантами комбинировать =)
@user-zk6om8yd3p
@user-zk6om8yd3p Жыл бұрын
дай бог тебе здоровья!
@uuu78798b
@uuu78798b 5 жыл бұрын
спасибо, было интересно))
@juliya_kim
@juliya_kim 2 жыл бұрын
супер материал, спасибо!
@user-hs3yp8vi8m
@user-hs3yp8vi8m 3 жыл бұрын
Ууух, прокачался, спасибо громадное
@websharkstudio
@websharkstudio 3 жыл бұрын
Спасибо за видео!
@romans8324
@romans8324 5 жыл бұрын
Двойнуя работу сделал, молодец, очень полезная фича)
@girlblueeyedrnd
@girlblueeyedrnd 3 жыл бұрын
спасибо! полезно и наглядно!
@ValentinaSmirnova9
@ValentinaSmirnova9 2 жыл бұрын
Большое спасибо за урок! Вопрос: а как редактировать инструментом "Перо"? Есть что-то похожее на работу с "пером" в "Иллюстраторе"?
@user-hm6qe5yh3g
@user-hm6qe5yh3g 3 жыл бұрын
супер, спасибо большое
@user-lz9nd9pr1e
@user-lz9nd9pr1e 3 жыл бұрын
Жаль что не приближаете во время пояснений...было бы крупнее и нагляднее :)
@aleks3388
@aleks3388 3 жыл бұрын
спасибо ! все понятно
@MobilStok
@MobilStok 3 жыл бұрын
очень хорошие видео !!
@leonid_anat
@leonid_anat 2 жыл бұрын
Топове видео, спасибо
@marynakuryshka3583
@marynakuryshka3583 5 жыл бұрын
Файнае відэа, дзякуй!
@user-vx1yv9wg2h
@user-vx1yv9wg2h 3 жыл бұрын
шикарне відео!!!
@anton_youtube_1
@anton_youtube_1 3 жыл бұрын
Почему когда меняешь текст в копии компонента его потом нельзя выровнять относительно плашки? Что в этом случае делать и как его редактировать?
@irinapalamarchuk4688
@irinapalamarchuk4688 4 жыл бұрын
Спасибо!!!!
@ekaterinasaltanova2541
@ekaterinasaltanova2541 5 жыл бұрын
Огромное спасибо за видео! Я только пошла на курсы веба и как-то тяжеловато пошло с компонентами... Хотя они ведь облегчают жизнь!!! Можно спросить, таблицу тоже делают из компонентов? Может есть какая-то ссылочка на рисование таблиц?
@disarto.digital
@disarto.digital 5 жыл бұрын
Делают таблицы как угодно, но удобнее всего компонентами :) Ссылочки на рисование таблиц под рукой к сожалению нет, но на днях выйдет новое видео, где будет разбираться ситуация, похожая на создание таблиц.
@glebklochkov2823
@glebklochkov2823 4 жыл бұрын
Как быстро копировать объекты в столбец, как показывается в видео уроке ?
@AnnaDavtyan
@AnnaDavtyan 4 жыл бұрын
спасибо!
@user-qe8hx7xe4j
@user-qe8hx7xe4j 4 жыл бұрын
Спасибо за урок. Подскажите , пожалуйста, как один из элементов , образованных из компонента, сделать снова просто элементом, на который компонент больше не влияет? Возможно ли это?
@disarto.digital
@disarto.digital 4 жыл бұрын
Разумеется, для этого нажмите на элемент правой кнопкой мыши и выберите Detach Instance (отсоединить экземпляр).
@kseniapolza1852
@kseniapolza1852 3 жыл бұрын
Отличное видео! А как вы копируете так быстро? после того как два элемента с отступом сделали, дальше как-будто остальны копии с отступом через клавишу идут.
@disarto.digital
@disarto.digital 3 жыл бұрын
Ctrl + D (на windows)
@danyadanyadanyadanya1592
@danyadanyadanyadanya1592 4 жыл бұрын
спасибо!!!!!!!
@CrazyDreamCD
@CrazyDreamCD Жыл бұрын
Здравствуйте! Подскажите, пожалуйста, как вы поотдельности форматируете логотипы (т.е. выбираете нужный фрагмент и вставляете его в заготовленное место)? Или может вы скачали откуда-то такой формат? Я сколько провозилась, так и не смогла вырезать то же яблоко , чтобы его вставить(( обычной картинкой пока поставила, как вы показывали в предыдущем уроке
@Midi25
@Midi25 Жыл бұрын
просто логотип сделан из кривых на черном фоне а фон отдельный слой от вектора. Если вы поставите на паузу в момент когда лого apple выделено, вы увидите слева в слоях, что лого состоит из эллипса, и двух векторных фигур (листочек и сама форма яблока). Вам надо просто сделать такой векторный обьект сразу в фигме или скачать откудато отдельно векторный белый символ apple. И тогда перетянется разумеется чисто лого яблока, поскольку это отдельная векторная фигура.
@qqqq2412
@qqqq2412 4 жыл бұрын
Привет! Во-первых благодарю за уроки! Во-вторых хочу узнать откуда можно скачать уже готовые иконки? По схеме как ты скачивал ассеты для ios11 с фб для скеча (кстати они уже там есть специально для Фигмы). Спасибо! Пожалуйста записывай еще уроки по фигме! Супер!
@user-yz1vs3qy6r
@user-yz1vs3qy6r 4 жыл бұрын
я тоже хочу узнать где лучше поскачивать все необходимое!
@vitaliy9948
@vitaliy9948 4 жыл бұрын
плагин с иконками flaticon.com есть.
@vladislavvelev432
@vladislavvelev432 3 жыл бұрын
Доброго времени суток) Подскажите, сейчас же лучше использовать варианты, для таких случаев как в примере?
@disarto.digital
@disarto.digital 3 жыл бұрын
Приветствую. Да, варианты в большинстве случаев будут удобнее.
@artemcherniavsky2410
@artemcherniavsky2410 4 жыл бұрын
так и не понял как скопировать через промежутки так быстро? ) слой на слой вставляется )
@artemcherniavsky2410
@artemcherniavsky2410 4 жыл бұрын
кто не понял - разобрался.. (нужно не скопировать, вставить, а дублировать слой. контрл/комманд+D) сделали слой, контрл+Д, отодвинули новый слой и нажали снова контрл+д нужное кол-во раз.
@vikasytnik
@vikasytnik 4 жыл бұрын
дякую)
@vneplanov299
@vneplanov299 4 жыл бұрын
Жаль, что когда, к примеру, создаешь два и более компонентов для одного и того же объекта, чтобы потом легко переключаться между внешний видом инстанса на разных экранах/страницах, смарт анимация перестает работать. Ну либо оставлять у компонентов одинаковое название в независимости от состояния, тогда смарт анимация будет работать, только вот в списке компонентов появляется куча компонентов с одинаковым названием, что не особо юзабильно.
@alizhilov1391
@alizhilov1391 3 жыл бұрын
здравствуйте а если я случайно сделал компонент страницы, как нибудь можно убрать?
@FAILZONEVIDEOS
@FAILZONEVIDEOS 4 жыл бұрын
Какой горячей клавишей вы делаете сразу подряд несколько копий на одинаковом расстоянии?
@disarto.digital
@disarto.digital 4 жыл бұрын
Ctrl + D
@vovk389
@vovk389 3 жыл бұрын
в фш есть смарт объекты (да их использование тот еще гемор, но энивей они есть)
@malikovazamat
@malikovazamat 4 жыл бұрын
Какими клавишами так быстро скопировал объекты и расположил их по порядку на 1.35 минуте? Спасибо.
@disarto.digital
@disarto.digital 4 жыл бұрын
Копирование объекта, удерживая Alt, затем Ctrl+D для повторения операции (Windows)
@leisangalimova8168
@leisangalimova8168 4 жыл бұрын
меня интересует тот момент (на 20-50 мин), где Вы накосячили, что там было не так?и как исправили?
@disarto.digital
@disarto.digital 4 жыл бұрын
Вместо компонента скопировал обычный слой) Исправил соответственно копированием компонента внутрь другого компонента.
@leisangalimova8168
@leisangalimova8168 4 жыл бұрын
@@disarto.digital спасибо
@met4ltech
@met4ltech 3 жыл бұрын
Даже сохраню.
Creating dashboard using components in Figma
31:06
Disarto
Рет қаралды 18 М.
Styles in Figma
24:04
Disarto
Рет қаралды 17 М.
[Vowel]물고기는 물에서 살아야 해🐟🤣Fish have to live in the water #funny
00:53
SHE WANTED CHIPS, BUT SHE GOT CARROTS 🤣🥕
00:19
OKUNJATA
Рет қаралды 14 МЛН
顔面水槽がブサイク過ぎるwwwww
00:58
はじめしゃちょー(hajime)
Рет қаралды 123 МЛН
Figma auto layout
12:44
Disarto
Рет қаралды 17 М.
Figma Variants
48:47
Disarto
Рет қаралды 23 М.
Переменные в Фигме
37:40
Disarto
Рет қаралды 16 М.
Design system / UI Kit in Figma #1
30:32
Disarto
Рет қаралды 46 М.
[Vowel]물고기는 물에서 살아야 해🐟🤣Fish have to live in the water #funny
00:53