Супер! Я с десяток видео посмотрел, чтобы найти как заменять изображение в компонентах, а нашёл толковое объяснение только здесь! Переделал свой собственный проект по этому уроку, и всё отлично получилось.Огромное спасибо автору!
Дуже дякую за те, що все з компонентами нарешті прояснилось:) дуже доступно) Після перегляду зрозуміла, що можна витрачати значно менше часу на дизайн, якщо не робити все вручну)
Спасибо, все просто и понятно! Давно работаю в фигме, но через костыли ctrl+c > ctrl+v, но пришла серьезная задача, где такой механикой не обойтись, поэтому улучшаю знания, и ваше видео просто топ!
да!да!да!)я Вас люблю и уважаю с первой секунды этого урока- просто начать с того, о чем сказано в заголовке,и слушатели счастливы.спасибо за урок,очень круто.не исчезайте пожалуйста)
В компонентах уже случилось много изменений. Например, уже нет необходимости делать 8 компонентов для состояний. Появилась функция Variants, чтобы стейт можно было выбрать в параметрах компонента. Очень удобно. Спасибо за ваше видео :)
Очень крутые уроки по Figme! Я прохожу курс от Skillbox по Figme, так там одна вода и ничего не понятно, приходится на ютубе искать более подробную информацию. У тебя классный контент!
Можно менять размер копии.. для этого необходимо просто заранее определить позиционирование дочерних компонентов елементов, так же можно вставлять другие иконки в компоненты (хотя это другой набор элементов, для этого их нужно класть в мастер компонент и скрывать, а на необходимой копии включать видимость интересующей вас группы дочерних элементов.
Здравствуйте! Подскажите, пожалуйста, как вы поотдельности форматируете логотипы (т.е. выбираете нужный фрагмент и вставляете его в заготовленное место)? Или может вы скачали откуда-то такой формат? Я сколько провозилась, так и не смогла вырезать то же яблоко , чтобы его вставить(( обычной картинкой пока поставила, как вы показывали в предыдущем уроке
просто логотип сделан из кривых на черном фоне а фон отдельный слой от вектора. Если вы поставите на паузу в момент когда лого apple выделено, вы увидите слева в слоях, что лого состоит из эллипса, и двух векторных фигур (листочек и сама форма яблока). Вам надо просто сделать такой векторный обьект сразу в фигме или скачать откудато отдельно векторный белый символ apple. И тогда перетянется разумеется чисто лого яблока, поскольку это отдельная векторная фигура.
Отличное видео! А как вы копируете так быстро? после того как два элемента с отступом сделали, дальше как-будто остальны копии с отступом через клавишу идут.
Привет! Во-первых благодарю за уроки! Во-вторых хочу узнать откуда можно скачать уже готовые иконки? По схеме как ты скачивал ассеты для ios11 с фб для скеча (кстати они уже там есть специально для Фигмы). Спасибо! Пожалуйста записывай еще уроки по фигме! Супер!
Огромное спасибо за видео! Я только пошла на курсы веба и как-то тяжеловато пошло с компонентами... Хотя они ведь облегчают жизнь!!! Можно спросить, таблицу тоже делают из компонентов? Может есть какая-то ссылочка на рисование таблиц?
Делают таблицы как угодно, но удобнее всего компонентами :) Ссылочки на рисование таблиц под рукой к сожалению нет, но на днях выйдет новое видео, где будет разбираться ситуация, похожая на создание таблиц.
Когда я меняю текст в дочернем компоненте, в панели Layers текст дочернего компонента не изменяется и остается таким же как и родительского компонента, приходится менять текст вручную. Что делать? Подскажите пожалуйста
Спасибо за урок. Подскажите , пожалуйста, как один из элементов , образованных из компонента, сделать снова просто элементом, на который компонент больше не влияет? Возможно ли это?
кто не понял - разобрался.. (нужно не скопировать, вставить, а дублировать слой. контрл/комманд+D) сделали слой, контрл+Д, отодвинули новый слой и нажали снова контрл+д нужное кол-во раз.
любой элемент можно выделить 3-мя способами: 1. щелчок ЛКМ; 2. щелчок ЛКМ + двойной клик (каждый последующий двойной клик спускает ниже по иерархии слоев); 3. щелчок ЛКМ с зажатым Ctrl (выделяет слой внутри групп и фреймов, вне зависимости от вложенности).
Тут есть несколько причин. 1. Логично группировать иконки с иконками, аватарки с аватарками, карточки с карточками и т.д. В дальнейшем, при росте дизайн-системы будет легче ориентироваться во всем этом деле. Это особенно важно, если над дизайном работают несколько человек. Любой должен посмотреть на страницу и сразу понять, где что находится. 2. Компоненты, сгруппированные в одном фрейме ложатся в один и тот же список Instance. Т.е. ты сделал 20 иконок, и назвал фрейм Icons. Теперь, когда ты будешь использовать иконки в дизайне, то в любой момент сможешь менять эти 20 иконок друг на друга. Самое главное, что в этом списке не будет компонентов с других фреймов, иначе этим было бы очень неудобно пользоваться. Если ты просто закинешь 100 компонентов в один фрейм, и захочешь потом в процессе поменять одну иконку на другую, у тебя в списке будет много нерелевантных компонентов: карточки, логотипы, кнопки, инпуты и т.д.
@@disarto.digital А ещё, помимо разделения на фреймы, можно делать вложенность для компонентов с помощью нэйминга через /. Нэйминг через / позволяет создавать вложенные меню в списке компонентов в панели выбора инстэнса. Так можно выстраивать целые уровни компонентов со своей иерархией, группировать их по признаку и состояниям. К примеру, у нас есть кнопка btn и у нее 2 признака (primary и ghost) и у каждого признака по 3 состояния (default, hover, active). Мы именуем каждый компонент в формате btn/признак/состояние Это позволит сделать следующую иерархию в меню инстэнса: btn >primary >>default >>hover >>active >ghost >>default >>hover >>active Очень удобно на больших дизайн системах.
Жаль, что когда, к примеру, создаешь два и более компонентов для одного и того же объекта, чтобы потом легко переключаться между внешний видом инстанса на разных экранах/страницах, смарт анимация перестает работать. Ну либо оставлять у компонентов одинаковое название в независимости от состояния, тогда смарт анимация будет работать, только вот в списке компонентов появляется куча компонентов с одинаковым названием, что не особо юзабильно.
![BRASIL vs. PERÚ [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/tbyOJKXfQnI/mqdefault.jpg)
без сомнений это самое топовое видео по компонентам в русскоязычном сегменте ютуба.
Спасибо что вышел за рамки, показал как можно с этим работать.
А то у большинства в тутроиалах только вода про компоненты
А у них и в голове вода. Делают уроки для количества. Влоххеры бля))
Супер! Я с десяток видео посмотрел, чтобы найти как заменять изображение в компонентах, а нашёл толковое объяснение только здесь! Переделал свой собственный проект по этому уроку, и всё отлично получилось.Огромное спасибо автору!
Я посмотрел 13 видео до этого и только в этом понял ценность компонентов! Очень круто!
Первое действительно полезное видео из подобных! Спасибо!
Дуже дякую за те, що все з компонентами нарешті прояснилось:) дуже доступно) Після перегляду зрозуміла, що можна витрачати значно менше часу на дизайн, якщо не робити все вручну)
Лучший урок! Авторитетно заявляю это как уберчайник. Очень понравилось.
Самые крутые уроки. Понятно про компоненты сразу все стало! Спасибо огромное!
Большое спасибо за ваш труд. Прекрасные видео и все сразу становится понятно.
Спасибо, все просто и понятно! Давно работаю в фигме, но через костыли ctrl+c > ctrl+v, но пришла серьезная задача, где такой механикой не обойтись, поэтому улучшаю знания, и ваше видео просто топ!
Спасибо за замечательный контент, только начала изучать фигму и были проблемы с компонентами, но сейчас так ясно стало в голове! Чудесно)
Рад слышать :)
Огромное спасибо! Очень подробно разжевано. Привел отличные практические примеры. Я в восторге от урока!
Спасибо.
Я так сам догадался до кое чего.
Но теперь интуитивное стало осознанным. 😎🤗
Спасибо большое за годный урок! Доступное объяснение материала и живой пример - отличное сочетание. Так держать)
да!да!да!)я Вас люблю и уважаю с первой секунды этого урока- просто начать с того, о чем сказано в заголовке,и слушатели счастливы.спасибо за урок,очень круто.не исчезайте пожалуйста)
У Вас талант преподавания! Спасибо! Очень полезная информация.
Нашла ваше видео и наконец разобралась с компонентами. Огромное спасибо, за такой качественный контент!))) Лучшее видео по компонентам.)
Хочу присоединиться ко всем комментариям) прекрасное объяснение!! Спасибо вам огромное🤗
Я просто в восторге от вашей подачи. Смотрю и улыбаюсь))
Отличное видео, наконец-то дошло до меня , как работать с компонентами. Спасибо))
В компонентах уже случилось много изменений. Например, уже нет необходимости делать 8 компонентов для состояний. Появилась функция Variants, чтобы стейт можно было выбрать в параметрах компонента. Очень удобно. Спасибо за ваше видео :)
Вообще не знал что это, но после просмотра видео, видимо придется посмотреть еще раз и попробовать :D
Безумно крутой стиль у вас и урок полезный!
Наконец кто-то доступно разжевал. Спасибо!
блин наконец видео которое нужно. А не эта вода сплошная кругом. Теперь ясно как делать иконки. и карточки на практике. Спасибо большое! ПОДПИСКА :)
полезный урок и без воды )) Спасибо
ура, наконец-то что-то дельное по компонентам, спасибо большое!)
Доступно объяснил, спасибо!
Очень полезный видос! кнопка ctrl (deep selection) мне оочень упростила жизнь)
Вы просто разложили все по полочкам! Спасибо!
Исчерпывающе, спасибо на добром слове!
Очень крутые уроки по Figme! Я прохожу курс от Skillbox по Figme, так там одна вода и ничего не понятно, приходится на ютубе искать более подробную информацию. У тебя классный контент!
Спасибо. Приятно слышать 🙂
с удовльствием посмотрел видео- полезно. спасибо
Можно менять размер копии.. для этого необходимо просто заранее определить позиционирование дочерних компонентов елементов, так же можно вставлять другие иконки в компоненты (хотя это другой набор элементов, для этого их нужно класть в мастер компонент и скрывать, а на необходимой копии включать видимость интересующей вас группы дочерних элементов.
Спасибо за урок, все четко, понятно и приятно слушать
Нашел то, что искал! Спасибо тебе :)
Спасибо большое за удобоваримую подачу.
Здравствуйте! Подскажите, пожалуйста, как вы поотдельности форматируете логотипы (т.е. выбираете нужный фрагмент и вставляете его в заготовленное место)? Или может вы скачали откуда-то такой формат? Я сколько провозилась, так и не смогла вырезать то же яблоко , чтобы его вставить(( обычной картинкой пока поставила, как вы показывали в предыдущем уроке
просто логотип сделан из кривых на черном фоне а фон отдельный слой от вектора. Если вы поставите на паузу в момент когда лого apple выделено, вы увидите слева в слоях, что лого состоит из эллипса, и двух векторных фигур (листочек и сама форма яблока).
Вам надо просто сделать такой векторный обьект сразу в фигме или скачать откудато отдельно векторный белый символ apple.
И тогда перетянется разумеется чисто лого яблока, поскольку это отдельная векторная фигура.
Спасибо! Ваше видео просто спасение! :)
Большое спасибо за прекраснейший контент, продолжай в том же духе!!)
чувак, ты просто бог!
Супер, спасибо, очень полезно и понятно 🤍
Спасибо, автор! Приятно смотреть, приятно слушать. Контент топ. Лайк, подписка.
Спасибо. Очень хороший урок вышел.
Спасибо! Лучшее видео про компоненты на ютуб! Жду отдельное видео)
Интересно! Можно больше реальных примеров на практике? Спасибо за видео! Лайкос! !!
Хороший видос! Было бы круто чтобы подсвечивались комбинации клавиш
Супер! очень понятно и доходчиво))
супер материал, спасибо!
Большое спасибо за информацию 🙏
Компоненты очень удобно с вариантами комбинировать =)
дай бог тебе здоровья!
шикарне відео!!!
Почему когда меняешь текст в копии компонента его потом нельзя выровнять относительно плашки? Что в этом случае делать и как его редактировать?
больше спасибо за укори! )) все круто объясняешь ))
Супер! Давай еще про Стили!
Useful lesson, thanks a lot!
Очень ценное видео! Спасибо
Спасибо большое! все четко и понятно!
Класс! Спасибо за видео
Огромное спасибо за видео!)
Ууух, прокачался, спасибо громадное
Спасибо, очень круто и хорошие примеры на практике
Отличное видео! А как вы копируете так быстро? после того как два элемента с отступом сделали, дальше как-будто остальны копии с отступом через клавишу идут.
Ctrl + D (на windows)
Привет! Во-первых благодарю за уроки! Во-вторых хочу узнать откуда можно скачать уже готовые иконки? По схеме как ты скачивал ассеты для ios11 с фб для скеча (кстати они уже там есть специально для Фигмы). Спасибо! Пожалуйста записывай еще уроки по фигме! Супер!
я тоже хочу узнать где лучше поскачивать все необходимое!
плагин с иконками flaticon.com есть.
ОГРОМНЕЙШЕЕ СПАСИБО !!!!
Отличный урок, спасибо 👍🏻
Большое спасибо за урок! Вопрос: а как редактировать инструментом "Перо"? Есть что-то похожее на работу с "пером" в "Иллюстраторе"?
Большое спасибо! Всё по делу :)
спасибо ! все понятно
спасибо! полезно и наглядно!
Спасибо за видео!
Доброго времени суток)
Подскажите, сейчас же лучше использовать варианты, для таких случаев как в примере?
Приветствую. Да, варианты в большинстве случаев будут удобнее.
Какой горячей клавишей вы делаете сразу подряд несколько копий на одинаковом расстоянии?
Ctrl + D
Двойнуя работу сделал, молодец, очень полезная фича)
очень хорошие видео !!
Топове видео, спасибо
Огромное спасибо за видео! Я только пошла на курсы веба и как-то тяжеловато пошло с компонентами... Хотя они ведь облегчают жизнь!!! Можно спросить, таблицу тоже делают из компонентов? Может есть какая-то ссылочка на рисование таблиц?
Делают таблицы как угодно, но удобнее всего компонентами :) Ссылочки на рисование таблиц под рукой к сожалению нет, но на днях выйдет новое видео, где будет разбираться ситуация, похожая на создание таблиц.
Жаль что не приближаете во время пояснений...было бы крупнее и нагляднее :)
Отличный видос. Спасибо :)
Брат, спасибо, друг!
Когда я меняю текст в дочернем компоненте, в панели Layers текст дочернего компонента не изменяется и остается таким же как и родительского компонента, приходится менять текст вручную. Что делать? Подскажите пожалуйста
супер, спасибо большое
Спасибо за урок. Подскажите , пожалуйста, как один из элементов , образованных из компонента, сделать снова просто элементом, на который компонент больше не влияет? Возможно ли это?
Разумеется, для этого нажмите на элемент правой кнопкой мыши и выберите Detach Instance (отсоединить экземпляр).
Спасибо за крутой контент.
Спасибо! Продолжа ;)
так и не понял как скопировать через промежутки так быстро? ) слой на слой вставляется )
кто не понял - разобрался.. (нужно не скопировать, вставить, а дублировать слой. контрл/комманд+D) сделали слой, контрл+Д, отодвинули новый слой и нажали снова контрл+д нужное кол-во раз.
как ты выделяешь элементы под которыми находятся другие слои? у меня сразу слой ниже выделяется и начинает смещаться
любой элемент можно выделить 3-мя способами: 1. щелчок ЛКМ; 2. щелчок ЛКМ + двойной клик (каждый последующий двойной клик спускает ниже по иерархии слоев); 3. щелчок ЛКМ с зажатым Ctrl (выделяет слой внутри групп и фреймов, вне зависимости от вложенности).
@@disarto.digital выделение с ктрл, то что мне надо было, спасибо)
Как быстро копировать объекты в столбец, как показывается в видео уроке ?
отличное видео. спасибо.
спасибо!
Какими клавишами так быстро скопировал объекты и расположил их по порядку на 1.35 минуте? Спасибо.
Копирование объекта, удерживая Alt, затем Ctrl+D для повторения операции (Windows)
Чем отличается создание компонента, а потом применение авто лейаут, от обратного:
Сначала сделать авто лейаут, а потом компонент?
В целом - ничем. Однако, если создавать Auto layout для одного слоя, появятся стандартные отступы 10px. В остальном разницы нет.
здравствуйте а если я случайно сделал компонент страницы, как нибудь можно убрать?
скажи пожалуйста, зачем ты делаешь каждый раз новый фрейм для других компонентов, немного не понял этот момент. Точнее даже не фрейм а борд отдельный.
Тут есть несколько причин.
1. Логично группировать иконки с иконками, аватарки с аватарками, карточки с карточками и т.д. В дальнейшем, при росте дизайн-системы будет легче ориентироваться во всем этом деле. Это особенно важно, если над дизайном работают несколько человек. Любой должен посмотреть на страницу и сразу понять, где что находится.
2. Компоненты, сгруппированные в одном фрейме ложатся в один и тот же список Instance. Т.е. ты сделал 20 иконок, и назвал фрейм Icons. Теперь, когда ты будешь использовать иконки в дизайне, то в любой момент сможешь менять эти 20 иконок друг на друга. Самое главное, что в этом списке не будет компонентов с других фреймов, иначе этим было бы очень неудобно пользоваться. Если ты просто закинешь 100 компонентов в один фрейм, и захочешь потом в процессе поменять одну иконку на другую, у тебя в списке будет много нерелевантных компонентов: карточки, логотипы, кнопки, инпуты и т.д.
@@disarto.digital А ещё, помимо разделения на фреймы, можно делать вложенность для компонентов с помощью нэйминга через /. Нэйминг через / позволяет создавать вложенные меню в списке компонентов в панели выбора инстэнса.
Так можно выстраивать целые уровни компонентов со своей иерархией, группировать их по признаку и состояниям.
К примеру, у нас есть кнопка btn и у нее 2 признака (primary и ghost) и у каждого признака по 3 состояния (default, hover, active). Мы именуем каждый компонент в формате btn/признак/состояние
Это позволит сделать следующую иерархию в меню инстэнса:
btn
>primary
>>default
>>hover
>>active
>ghost
>>default
>>hover
>>active
Очень удобно на больших дизайн системах.
Жаль, что когда, к примеру, создаешь два и более компонентов для одного и того же объекта, чтобы потом легко переключаться между внешний видом инстанса на разных экранах/страницах, смарт анимация перестает работать. Ну либо оставлять у компонентов одинаковое название в независимости от состояния, тогда смарт анимация будет работать, только вот в списке компонентов появляется куча компонентов с одинаковым названием, что не особо юзабильно.
меня интересует тот момент (на 20-50 мин), где Вы накосячили, что там было не так?и как исправили?
Вместо компонента скопировал обычный слой) Исправил соответственно копированием компонента внутрь другого компонента.
@@disarto.digital спасибо
Спасибо!!!!
спасибо, было интересно))
Файнае відэа, дзякуй!