Тёмный

Figma Components 

Disarto
Подписаться 41 тыс.
Просмотров 90 тыс.
50% 1

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 :)

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

 

24 фев 2019

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 161   
@arturshelaev9556
@arturshelaev9556 4 года назад
без сомнений это самое топовое видео по компонентам в русскоязычном сегменте ютуба.
@vvasilyev11
@vvasilyev11 5 лет назад
Спасибо что вышел за рамки, показал как можно с этим работать. А то у большинства в тутроиалах только вода про компоненты
@IsHardynafthardynaft
@IsHardynafthardynaft 3 года назад
А у них и в голове вода. Делают уроки для количества. Влоххеры бля))
@radistelectric6216
@radistelectric6216 4 года назад
Супер! Я с десяток видео посмотрел, чтобы найти как заменять изображение в компонентах, а нашёл толковое объяснение только здесь! Переделал свой собственный проект по этому уроку, и всё отлично получилось.Огромное спасибо автору!
@___KS___
@___KS___ Год назад
Спасибо. Я так сам догадался до кое чего. Но теперь интуитивное стало осознанным. 😎🤗
@mariamat4907
@mariamat4907 5 лет назад
Первое действительно полезное видео из подобных! Спасибо!
@cifratura
@cifratura 5 лет назад
Я посмотрел 13 видео до этого и только в этом понял ценность компонентов! Очень круто!
@NataliaGold92
@NataliaGold92 3 года назад
Большое спасибо за ваш труд. Прекрасные видео и все сразу становится понятно.
@user-gx3io6sb6q
@user-gx3io6sb6q 3 года назад
Самые крутые уроки. Понятно про компоненты сразу все стало! Спасибо огромное!
@narinehvardumyan3219
@narinehvardumyan3219 3 года назад
Я просто в восторге от вашей подачи. Смотрю и улыбаюсь))
@rovsheneyubov1539
@rovsheneyubov1539 5 лет назад
полезный урок и без воды )) Спасибо
@ennhomenko
@ennhomenko 4 года назад
Исчерпывающе, спасибо на добром слове!
@ihorvorobiov
@ihorvorobiov 4 года назад
Спасибо большое за годный урок! Доступное объяснение материала и живой пример - отличное сочетание. Так держать)
@pavelzharko7116
@pavelzharko7116 5 лет назад
Нашел то, что искал! Спасибо тебе :)
@diekunstUA
@diekunstUA 5 лет назад
с удовльствием посмотрел видео- полезно. спасибо
@ksenya7793
@ksenya7793 3 года назад
Нашла ваше видео и наконец разобралась с компонентами. Огромное спасибо, за такой качественный контент!))) Лучшее видео по компонентам.)
@user-tl1rv4jh1v
@user-tl1rv4jh1v 3 года назад
Огромное спасибо! Очень подробно разжевано. Привел отличные практические примеры. Я в восторге от урока!
@igorstocky2228
@igorstocky2228 4 года назад
У Вас талант преподавания! Спасибо! Очень полезная информация.
@libertyanka
@libertyanka 5 лет назад
ура, наконец-то что-то дельное по компонентам, спасибо большое!)
@manikawow5866
@manikawow5866 4 года назад
Спасибо за урок, все четко, понятно и приятно слушать
@user-yo7yf1pf9n
@user-yo7yf1pf9n 4 года назад
да!да!да!)я Вас люблю и уважаю с первой секунды этого урока- просто начать с того, о чем сказано в заголовке,и слушатели счастливы.спасибо за урок,очень круто.не исчезайте пожалуйста)
@GeknForever
@GeknForever 4 года назад
Лучший урок! Авторитетно заявляю это как уберчайник. Очень понравилось.
@zairahajiyeva4511
@zairahajiyeva4511 3 года назад
Вы просто разложили все по полочкам! Спасибо!
@DKniazeff
@DKniazeff 4 года назад
Наконец кто-то доступно разжевал. Спасибо!
@sashazlobin
@sashazlobin 5 лет назад
Отличный урок, спасибо 👍🏻
@VictoriaSyvak
@VictoriaSyvak 3 года назад
Дуже дякую за те, що все з компонентами нарешті прояснилось:) дуже доступно) Після перегляду зрозуміла, що можна витрачати значно менше часу на дизайн, якщо не робити все вручну)
@nataliiaalbul9625
@nataliiaalbul9625 4 года назад
Спасибо за замечательный контент, только начала изучать фигму и были проблемы с компонентами, но сейчас так ясно стало в голове! Чудесно)
@disarto.digital
@disarto.digital 4 года назад
Рад слышать :)
@user-ch8oz1yq3l
@user-ch8oz1yq3l 4 года назад
Отличное видео, наконец-то дошло до меня , как работать с компонентами. Спасибо))
@sergiiandrosov1729
@sergiiandrosov1729 4 года назад
Спасибо большое за удобоваримую подачу.
@Aegiro_07
@Aegiro_07 4 года назад
Большое спасибо за прекраснейший контент, продолжай в том же духе!!)
@anastasiapavlova_kuzmina3378
@anastasiapavlova_kuzmina3378 4 года назад
Спасибо большое! все четко и понятно!
@Drampam
@Drampam 3 года назад
Безумно крутой стиль у вас и урок полезный!
@alinashchebetun1000
@alinashchebetun1000 4 года назад
Огромное спасибо за видео!)
@alinarolinsky3404
@alinarolinsky3404 5 лет назад
Большое спасибо! Всё по делу :)
@wonderfulworld8667
@wonderfulworld8667 Год назад
Спасибо, все просто и понятно! Давно работаю в фигме, но через костыли ctrl+c > ctrl+v, но пришла серьезная задача, где такой механикой не обойтись, поэтому улучшаю знания, и ваше видео просто топ!
@viktoriya-photo
@viktoriya-photo 2 года назад
Хочу присоединиться ко всем комментариям) прекрасное объяснение!! Спасибо вам огромное🤗
@user-wt2rc8er7j
@user-wt2rc8er7j 3 года назад
Спасибо! Ваше видео просто спасение! :)
@andriihelever1793
@andriihelever1793 4 года назад
Спасибо, очень круто и хорошие примеры на практике
@adamsteklov
@adamsteklov 2 года назад
Вообще не знал что это, но после просмотра видео, видимо придется посмотреть еще раз и попробовать :D
@big_papa_Joe
@big_papa_Joe 3 года назад
Спасибо, автор! Приятно смотреть, приятно слушать. Контент топ. Лайк, подписка.
@liteleak4049
@liteleak4049 3 года назад
Спасибо. Очень хороший урок вышел.
@raevskaya_elizaveta
@raevskaya_elizaveta 2 года назад
Супер, спасибо, очень полезно и понятно 🤍
@valeryoks8847
@valeryoks8847 3 года назад
Супер! очень понятно и доходчиво))
@annasedova6386
@annasedova6386 Год назад
Доступно объяснил, спасибо!
@hyper_hal
@hyper_hal 4 года назад
Отличный видос. Спасибо :)
@natalitarasova5449
@natalitarasova5449 4 года назад
Класс! Спасибо за видео
@MaximGuzko
@MaximGuzko 2 года назад
Большое спасибо за информацию 🙏
@spagettification
@spagettification Год назад
В компонентах уже случилось много изменений. Например, уже нет необходимости делать 8 компонентов для состояний. Появилась функция Variants, чтобы стейт можно было выбрать в параметрах компонента. Очень удобно. Спасибо за ваше видео :)
@kodjaka
@kodjaka 4 года назад
Супер! Давай еще про Стили!
@user-od2qn1kp1d
@user-od2qn1kp1d 3 года назад
Очень ценное видео! Спасибо
@dmitriyzhukov4592
@dmitriyzhukov4592 4 года назад
Спасибо. Очень полезно.
@catriarchiv
@catriarchiv 4 года назад
Спасибо за крутой контент.
@juliya_kim
@juliya_kim 2 года назад
супер материал, спасибо!
@boykodmitriy
@boykodmitriy 5 лет назад
Спасибо! Продолжа ;)
@AndrewConfident
@AndrewConfident 3 года назад
Очень полезный видос! кнопка ctrl (deep selection) мне оочень упростила жизнь)
@yanapapikian
@yanapapikian 2 года назад
Useful lesson, thanks a lot!
@amanrozyev5527
@amanrozyev5527 3 года назад
блин наконец видео которое нужно. А не эта вода сплошная кругом. Теперь ясно как делать иконки. и карточки на практике. Спасибо большое! ПОДПИСКА :)
@diekunstUA
@diekunstUA 5 лет назад
отличное видео. спасибо.
@nickchernitsyn3354
@nickchernitsyn3354 5 лет назад
Брат, спасибо, друг!
@user-vz8ce9pv2o
@user-vz8ce9pv2o 3 года назад
чувак, ты просто бог!
@uuu78798b
@uuu78798b 5 лет назад
спасибо, было интересно))
@alsoualsou9
@alsoualsou9 3 года назад
ОГРОМНЕЙШЕЕ СПАСИБО !!!!
@user-hs3yp8vi8m
@user-hs3yp8vi8m 3 года назад
Ууух, прокачался, спасибо громадное
@user-dw5rz5cs4y
@user-dw5rz5cs4y 4 года назад
Интересно! Можно больше реальных примеров на практике? Спасибо за видео! Лайкос! !!
@user-zk6om8yd3p
@user-zk6om8yd3p Год назад
дай бог тебе здоровья!
@websharkstudio
@websharkstudio 3 года назад
Спасибо за видео!
@Mi-jt6nn
@Mi-jt6nn 4 года назад
Можно менять размер копии.. для этого необходимо просто заранее определить позиционирование дочерних компонентов елементов, так же можно вставлять другие иконки в компоненты (хотя это другой набор элементов, для этого их нужно класть в мастер компонент и скрывать, а на необходимой копии включать видимость интересующей вас группы дочерних элементов.
@girlblueeyedrnd
@girlblueeyedrnd 3 года назад
спасибо! полезно и наглядно!
@MobilStok
@MobilStok 3 года назад
очень хорошие видео !!
@user-tt2vv9qo6e
@user-tt2vv9qo6e 5 лет назад
Спасибо! Лучшее видео про компоненты на ютуб! Жду отдельное видео)
@va1ga
@va1ga 3 года назад
Компоненты очень удобно с вариантами комбинировать =)
@leonid_anat
@leonid_anat 2 года назад
Топове видео, спасибо
@Frie666
@Frie666 3 года назад
Хороший видос! Было бы круто чтобы подсвечивались комбинации клавиш
@romans8324
@romans8324 5 лет назад
Двойнуя работу сделал, молодец, очень полезная фича)
@aleks3388
@aleks3388 3 года назад
спасибо ! все понятно
@user-hm6qe5yh3g
@user-hm6qe5yh3g 3 года назад
супер, спасибо большое
@user-vx1yv9wg2h
@user-vx1yv9wg2h 3 года назад
шикарне відео!!!
@ValentinaSmirnova9
@ValentinaSmirnova9 2 года назад
Большое спасибо за урок! Вопрос: а как редактировать инструментом "Перо"? Есть что-то похожее на работу с "пером" в "Иллюстраторе"?
@komkoff91
@komkoff91 4 года назад
Очень крутые уроки по Figme! Я прохожу курс от Skillbox по Figme, так там одна вода и ничего не понятно, приходится на ютубе искать более подробную информацию. У тебя классный контент!
@disarto.digital
@disarto.digital 4 года назад
Спасибо. Приятно слышать 🙂
@anton_youtube_1
@anton_youtube_1 3 года назад
Почему когда меняешь текст в копии компонента его потом нельзя выровнять относительно плашки? Что в этом случае делать и как его редактировать?
@marynakuryshka3583
@marynakuryshka3583 5 лет назад
Файнае відэа, дзякуй!
@ekaterinasaltanova2541
@ekaterinasaltanova2541 5 лет назад
Огромное спасибо за видео! Я только пошла на курсы веба и как-то тяжеловато пошло с компонентами... Хотя они ведь облегчают жизнь!!! Можно спросить, таблицу тоже делают из компонентов? Может есть какая-то ссылочка на рисование таблиц?
@disarto.digital
@disarto.digital 5 лет назад
Делают таблицы как угодно, но удобнее всего компонентами :) Ссылочки на рисование таблиц под рукой к сожалению нет, но на днях выйдет новое видео, где будет разбираться ситуация, похожая на создание таблиц.
@user-lz9nd9pr1e
@user-lz9nd9pr1e 3 года назад
Жаль что не приближаете во время пояснений...было бы крупнее и нагляднее :)
@muksumarturqizi6117
@muksumarturqizi6117 2 года назад
спасибо!
@irinapalamarchuk4688
@irinapalamarchuk4688 4 года назад
Спасибо!!!!
@glebklochkov2823
@glebklochkov2823 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 года назад
спасибо!!!!!!!
@qqqq2412
@qqqq2412 4 года назад
Привет! Во-первых благодарю за уроки! Во-вторых хочу узнать откуда можно скачать уже готовые иконки? По схеме как ты скачивал ассеты для ios11 с фб для скеча (кстати они уже там есть специально для Фигмы). Спасибо! Пожалуйста записывай еще уроки по фигме! Супер!
@user-yz1vs3qy6r
@user-yz1vs3qy6r 4 года назад
я тоже хочу узнать где лучше поскачивать все необходимое!
@vitaliy9948
@vitaliy9948 4 года назад
плагин с иконками flaticon.com есть.
@vladislavvelev432
@vladislavvelev432 3 года назад
Доброго времени суток) Подскажите, сейчас же лучше использовать варианты, для таких случаев как в примере?
@disarto.digital
@disarto.digital 3 года назад
Приветствую. Да, варианты в большинстве случаев будут удобнее.
@CrazyDreamCD
@CrazyDreamCD Год назад
Здравствуйте! Подскажите, пожалуйста, как вы поотдельности форматируете логотипы (т.е. выбираете нужный фрагмент и вставляете его в заготовленное место)? Или может вы скачали откуда-то такой формат? Я сколько провозилась, так и не смогла вырезать то же яблоко , чтобы его вставить(( обычной картинкой пока поставила, как вы показывали в предыдущем уроке
@Midi25
@Midi25 Год назад
просто логотип сделан из кривых на черном фоне а фон отдельный слой от вектора. Если вы поставите на паузу в момент когда лого apple выделено, вы увидите слева в слоях, что лого состоит из эллипса, и двух векторных фигур (листочек и сама форма яблока). Вам надо просто сделать такой векторный обьект сразу в фигме или скачать откудато отдельно векторный белый символ apple. И тогда перетянется разумеется чисто лого яблока, поскольку это отдельная векторная фигура.
@vikasytnik
@vikasytnik 4 года назад
дякую)
@artemcherniavsky2410
@artemcherniavsky2410 4 года назад
так и не понял как скопировать через промежутки так быстро? ) слой на слой вставляется )
@artemcherniavsky2410
@artemcherniavsky2410 4 года назад
кто не понял - разобрался.. (нужно не скопировать, вставить, а дублировать слой. контрл/комманд+D) сделали слой, контрл+Д, отодвинули новый слой и нажали снова контрл+д нужное кол-во раз.
@leisangalimova8168
@leisangalimova8168 4 года назад
меня интересует тот момент (на 20-50 мин), где Вы накосячили, что там было не так?и как исправили?
@disarto.digital
@disarto.digital 4 года назад
Вместо компонента скопировал обычный слой) Исправил соответственно копированием компонента внутрь другого компонента.
@leisangalimova8168
@leisangalimova8168 4 года назад
@@disarto.digital спасибо
@FAILZONEVIDEOS
@FAILZONEVIDEOS 4 года назад
Какой горячей клавишей вы делаете сразу подряд несколько копий на одинаковом расстоянии?
@disarto.digital
@disarto.digital 4 года назад
Ctrl + D
@MrPaul-yb2zb
@MrPaul-yb2zb 4 года назад
скажи пожалуйста, зачем ты делаешь каждый раз новый фрейм для других компонентов, немного не понял этот момент. Точнее даже не фрейм а борд отдельный.
@disarto.digital
@disarto.digital 4 года назад
Тут есть несколько причин. 1. Логично группировать иконки с иконками, аватарки с аватарками, карточки с карточками и т.д. В дальнейшем, при росте дизайн-системы будет легче ориентироваться во всем этом деле. Это особенно важно, если над дизайном работают несколько человек. Любой должен посмотреть на страницу и сразу понять, где что находится. 2. Компоненты, сгруппированные в одном фрейме ложатся в один и тот же список Instance. Т.е. ты сделал 20 иконок, и назвал фрейм Icons. Теперь, когда ты будешь использовать иконки в дизайне, то в любой момент сможешь менять эти 20 иконок друг на друга. Самое главное, что в этом списке не будет компонентов с других фреймов, иначе этим было бы очень неудобно пользоваться. Если ты просто закинешь 100 компонентов в один фрейм, и захочешь потом в процессе поменять одну иконку на другую, у тебя в списке будет много нерелевантных компонентов: карточки, логотипы, кнопки, инпуты и т.д.
@alexmase
@alexmase 4 года назад
@@disarto.digital А ещё, помимо разделения на фреймы, можно делать вложенность для компонентов с помощью нэйминга через /. Нэйминг через / позволяет создавать вложенные меню в списке компонентов в панели выбора инстэнса. Так можно выстраивать целые уровни компонентов со своей иерархией, группировать их по признаку и состояниям. К примеру, у нас есть кнопка btn и у нее 2 признака (primary и ghost) и у каждого признака по 3 состояния (default, hover, active). Мы именуем каждый компонент в формате btn/признак/состояние Это позволит сделать следующую иерархию в меню инстэнса: btn >primary >>default >>hover >>active >ghost >>default >>hover >>active Очень удобно на больших дизайн системах.
@malikovazamat
@malikovazamat 4 года назад
Какими клавишами так быстро скопировал объекты и расположил их по порядку на 1.35 минуте? Спасибо.
@disarto.digital
@disarto.digital 4 года назад
Копирование объекта, удерживая Alt, затем Ctrl+D для повторения операции (Windows)
@met4ltech
@met4ltech 4 года назад
Даже сохраню.
@thenigmatic8414
@thenigmatic8414 4 года назад
как ты выделяешь элементы под которыми находятся другие слои? у меня сразу слой ниже выделяется и начинает смещаться
@disarto.digital
@disarto.digital 4 года назад
любой элемент можно выделить 3-мя способами: 1. щелчок ЛКМ; 2. щелчок ЛКМ + двойной клик (каждый последующий двойной клик спускает ниже по иерархии слоев); 3. щелчок ЛКМ с зажатым Ctrl (выделяет слой внутри групп и фреймов, вне зависимости от вложенности).
@thenigmatic8414
@thenigmatic8414 4 года назад
@@disarto.digital выделение с ктрл, то что мне надо было, спасибо)
@alizhilov1391
@alizhilov1391 3 года назад
здравствуйте а если я случайно сделал компонент страницы, как нибудь можно убрать?
Далее
Creating dashboard using components in Figma
31:06
Просмотров 18 тыс.
Прилетели в Дубай
00:17
Просмотров 75 тыс.
ГЕНИИ МАРКЕТИНГА 😂
00:35
Просмотров 2,1 млн
🎙Пою Вживую!
2:59:56
Просмотров 1,2 млн
Figma Tips: Фреймы и компоненты
6:46
Figma Variants
48:47
Просмотров 23 тыс.
Best Figma plugins 2020
26:39
Просмотров 18 тыс.