Figma Components
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
без сомнений это самое топовое видео по компонентам в русскоязычном сегменте ютуба.
Спасибо что вышел за рамки, показал как можно с этим работать. А то у большинства в тутроиалах только вода про компоненты
@IsHardynafthardynaft
3 жыл бұрын
А у них и в голове вода. Делают уроки для количества. Влоххеры бля))
Супер! Я с десяток видео посмотрел, чтобы найти как заменять изображение в компонентах, а нашёл толковое объяснение только здесь! Переделал свой собственный проект по этому уроку, и всё отлично получилось.Огромное спасибо автору!
Я посмотрел 13 видео до этого и только в этом понял ценность компонентов! Очень круто!
Первое действительно полезное видео из подобных! Спасибо!
Я просто в восторге от вашей подачи. Смотрю и улыбаюсь))
Большое спасибо за ваш труд. Прекрасные видео и все сразу становится понятно.
Самые крутые уроки. Понятно про компоненты сразу все стало! Спасибо огромное!
Спасибо большое за годный урок! Доступное объяснение материала и живой пример - отличное сочетание. Так держать)
Нашла ваше видео и наконец разобралась с компонентами. Огромное спасибо, за такой качественный контент!))) Лучшее видео по компонентам.)
Огромное спасибо! Очень подробно разжевано. Привел отличные практические примеры. Я в восторге от урока!
ура, наконец-то что-то дельное по компонентам, спасибо большое!)
Нашел то, что искал! Спасибо тебе :)
Лучший урок! Авторитетно заявляю это как уберчайник. Очень понравилось.
Отличное видео, наконец-то дошло до меня , как работать с компонентами. Спасибо))
У Вас талант преподавания! Спасибо! Очень полезная информация.
Большое спасибо за прекраснейший контент, продолжай в том же духе!!)
Спасибо за замечательный контент, только начала изучать фигму и были проблемы с компонентами, но сейчас так ясно стало в голове! Чудесно)
@disarto.digital
4 жыл бұрын
Рад слышать :)
полезный урок и без воды )) Спасибо
Исчерпывающе, спасибо на добром слове!
да!да!да!)я Вас люблю и уважаю с первой секунды этого урока- просто начать с того, о чем сказано в заголовке,и слушатели счастливы.спасибо за урок,очень круто.не исчезайте пожалуйста)
с удовльствием посмотрел видео- полезно. спасибо
Хочу присоединиться ко всем комментариям) прекрасное объяснение!! Спасибо вам огромное🤗
Безумно крутой стиль у вас и урок полезный!
Спасибо за урок, все четко, понятно и приятно слушать
Спасибо, автор! Приятно смотреть, приятно слушать. Контент топ. Лайк, подписка.
Вы просто разложили все по полочкам! Спасибо!
Наконец кто-то доступно разжевал. Спасибо!
Спасибо, все просто и понятно! Давно работаю в фигме, но через костыли ctrl+c > ctrl+v, но пришла серьезная задача, где такой механикой не обойтись, поэтому улучшаю знания, и ваше видео просто топ!
Дуже дякую за те, що все з компонентами нарешті прояснилось:) дуже доступно) Після перегляду зрозуміла, що можна витрачати значно менше часу на дизайн, якщо не робити все вручну)
Огромное спасибо за видео!)
Спасибо! Ваше видео просто спасение! :)
Супер! очень понятно и доходчиво))
Отличный урок, спасибо 👍🏻
Спасибо большое! все четко и понятно!
Доступно объяснил, спасибо!
Спасибо большое за удобоваримую подачу.
Большое спасибо! Всё по делу :)
Спасибо, очень круто и хорошие примеры на практике
Класс! Спасибо за видео
блин наконец видео которое нужно. А не эта вода сплошная кругом. Теперь ясно как делать иконки. и карточки на практике. Спасибо большое! ПОДПИСКА :)
В компонентах уже случилось много изменений. Например, уже нет необходимости делать 8 компонентов для состояний. Появилась функция Variants, чтобы стейт можно было выбрать в параметрах компонента. Очень удобно. Спасибо за ваше видео :)
Спасибо. Я так сам догадался до кое чего. Но теперь интуитивное стало осознанным. 😎🤗
Супер, спасибо, очень полезно и понятно 🤍
Вообще не знал что это, но после просмотра видео, видимо придется посмотреть еще раз и попробовать :D
Отличный видос. Спасибо :)
Спасибо! Лучшее видео про компоненты на ютуб! Жду отдельное видео)
Супер! Давай еще про Стили!
Спасибо. Очень хороший урок вышел.
Useful lesson, thanks a lot!
Очень ценное видео! Спасибо
супер материал, спасибо!
Спасибо за крутой контент.
спасибо, было интересно))
Очень полезный видос! кнопка ctrl (deep selection) мне оочень упростила жизнь)
ОГРОМНЕЙШЕЕ СПАСИБО !!!!
шикарне відео!!!
Спасибо! Продолжа ;)
Большое спасибо за информацию 🙏
Спасибо. Очень полезно.
Двойнуя работу сделал, молодец, очень полезная фича)
Брат, спасибо, друг!
Интересно! Можно больше реальных примеров на практике? Спасибо за видео! Лайкос! !!
чувак, ты просто бог!
отличное видео. спасибо.
очень хорошие видео !!
Спасибо за видео!
Ууух, прокачался, спасибо громадное
Топове видео, спасибо
дай бог тебе здоровья!
спасибо! полезно и наглядно!
Хороший видос! Было бы круто чтобы подсвечивались комбинации клавиш
Файнае відэа, дзякуй!
Очень крутые уроки по Figme! Я прохожу курс от Skillbox по Figme, так там одна вода и ничего не понятно, приходится на ютубе искать более подробную информацию. У тебя классный контент!
@disarto.digital
4 жыл бұрын
Спасибо. Приятно слышать 🙂
Можно менять размер копии.. для этого необходимо просто заранее определить позиционирование дочерних компонентов елементов, так же можно вставлять другие иконки в компоненты (хотя это другой набор элементов, для этого их нужно класть в мастер компонент и скрывать, а на необходимой копии включать видимость интересующей вас группы дочерних элементов.
спасибо ! все понятно
супер, спасибо большое
Компоненты очень удобно с вариантами комбинировать =)
Жаль что не приближаете во время пояснений...было бы крупнее и нагляднее :)
Спасибо!!!!
спасибо!
спасибо!!!!!!!
дякую)
Большое спасибо за урок! Вопрос: а как редактировать инструментом "Перо"? Есть что-то похожее на работу с "пером" в "Иллюстраторе"?
Почему когда меняешь текст в копии компонента его потом нельзя выровнять относительно плашки? Что в этом случае делать и как его редактировать?
Как быстро копировать объекты в столбец, как показывается в видео уроке ?
Даже сохраню.
Огромное спасибо за видео! Я только пошла на курсы веба и как-то тяжеловато пошло с компонентами... Хотя они ведь облегчают жизнь!!! Можно спросить, таблицу тоже делают из компонентов? Может есть какая-то ссылочка на рисование таблиц?
@disarto.digital
5 жыл бұрын
Делают таблицы как угодно, но удобнее всего компонентами :) Ссылочки на рисование таблиц под рукой к сожалению нет, но на днях выйдет новое видео, где будет разбираться ситуация, похожая на создание таблиц.
так и не понял как скопировать через промежутки так быстро? ) слой на слой вставляется )
@artemcherniavsky2410
4 жыл бұрын
кто не понял - разобрался.. (нужно не скопировать, вставить, а дублировать слой. контрл/комманд+D) сделали слой, контрл+Д, отодвинули новый слой и нажали снова контрл+д нужное кол-во раз.
Отличное видео! А как вы копируете так быстро? после того как два элемента с отступом сделали, дальше как-будто остальны копии с отступом через клавишу идут.
@disarto.digital
3 жыл бұрын
Ctrl + D (на windows)
Привет! Во-первых благодарю за уроки! Во-вторых хочу узнать откуда можно скачать уже готовые иконки? По схеме как ты скачивал ассеты для ios11 с фб для скеча (кстати они уже там есть специально для Фигмы). Спасибо! Пожалуйста записывай еще уроки по фигме! Супер!
@user-yz1vs3qy6r
4 жыл бұрын
я тоже хочу узнать где лучше поскачивать все необходимое!
@vitaliy9948
4 жыл бұрын
плагин с иконками flaticon.com есть.
Здравствуйте! Подскажите, пожалуйста, как вы поотдельности форматируете логотипы (т.е. выбираете нужный фрагмент и вставляете его в заготовленное место)? Или может вы скачали откуда-то такой формат? Я сколько провозилась, так и не смогла вырезать то же яблоко , чтобы его вставить(( обычной картинкой пока поставила, как вы показывали в предыдущем уроке
@Midi25
Жыл бұрын
просто логотип сделан из кривых на черном фоне а фон отдельный слой от вектора. Если вы поставите на паузу в момент когда лого apple выделено, вы увидите слева в слоях, что лого состоит из эллипса, и двух векторных фигур (листочек и сама форма яблока). Вам надо просто сделать такой векторный обьект сразу в фигме или скачать откудато отдельно векторный белый символ apple. И тогда перетянется разумеется чисто лого яблока, поскольку это отдельная векторная фигура.
в фш есть смарт объекты (да их использование тот еще гемор, но энивей они есть)
Спасибо за урок. Подскажите , пожалуйста, как один из элементов , образованных из компонента, сделать снова просто элементом, на который компонент больше не влияет? Возможно ли это?
@disarto.digital
4 жыл бұрын
Разумеется, для этого нажмите на элемент правой кнопкой мыши и выберите Detach Instance (отсоединить экземпляр).
Жаль, что когда, к примеру, создаешь два и более компонентов для одного и того же объекта, чтобы потом легко переключаться между внешний видом инстанса на разных экранах/страницах, смарт анимация перестает работать. Ну либо оставлять у компонентов одинаковое название в независимости от состояния, тогда смарт анимация будет работать, только вот в списке компонентов появляется куча компонентов с одинаковым названием, что не особо юзабильно.
Какой горячей клавишей вы делаете сразу подряд несколько копий на одинаковом расстоянии?
@disarto.digital
4 жыл бұрын
Ctrl + D
Доброго времени суток) Подскажите, сейчас же лучше использовать варианты, для таких случаев как в примере?
@disarto.digital
3 жыл бұрын
Приветствую. Да, варианты в большинстве случаев будут удобнее.
Когда я меняю текст в дочернем компоненте, в панели Layers текст дочернего компонента не изменяется и остается таким же как и родительского компонента, приходится менять текст вручную. Что делать? Подскажите пожалуйста
здравствуйте а если я случайно сделал компонент страницы, как нибудь можно убрать?
Чем отличается создание компонента, а потом применение авто лейаут, от обратного: Сначала сделать авто лейаут, а потом компонент?
@disarto.digital
2 жыл бұрын
В целом - ничем. Однако, если создавать Auto layout для одного слоя, появятся стандартные отступы 10px. В остальном разницы нет.