👍 Топовый плагин для Фигмы: Component Cloner - Figma plugin (и много адаптива)
Вставка
- Опубліковано 27 лип 2024
- #figma #фигма #plugin
Привет! Это обзор топового плагина для Фигмы Component Cloner. На реальном рабочем макете посмотрим, когда компоненты лучше не клонировать, а в каких случаях с плагином очень удобно делать адаптивы.
00:00 - плагин попал в официальный обзор от Figma
1:11 - лучше не делать стрелки через клоны
3:55 - адаптивим 1000
8:02 - адаптивим 768
10:06 - адаптивим 480
15:00 - адаптивим 320
Как установить, подключить плагины Фигмы - • Подробный курс по Фигм...
Хелп по Фигме: видео, советы, фишки, ответы на вопросы - figma.help/
💰❤️ Поддержать канал:
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: / alexeybychkov_
👉 Беханс: www.behance.net/alexeybychkov_
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: / dsgn.tips
👉 Твитор: / _alexeybychkov
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне чуть больше 30 лет, женат на прекрасном человеке и у нас чудесная дочка. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 15 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
Подробнее обо мне - alexeybychkov.com/about/
15 лет опыта - alexeybychkov.com/experience/
Пишу - alexeybychkov.com/blog/
Дизайню - alexeybychkov.com/cases/sites/
Отзывы - clck.ru/K5Mcc
Мои книги:
«Дизайн и фриланс. Начало» - clck.ru/JE8ku
«Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
Хелп по Фигме: уроки, видео, советы, фишки - figma.help
Мир фейсов: faces.world/
#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance
Кроме обзора (что умеет плагин) посмотрим на реальном рабочем макете, когда компоненты лучше не клонировать, и как с плагином делать адаптивы.
0:21 - плагин попал в официальный обзор от Figma
1:11 - лучше не делать стрелки через клоны
3:55 - адаптивим 1000
8:02 - адаптивим 768
10:06 - адаптивим 480 - недавно в комментах спросили у меня зачем делать 480. Вот подробно объяснил и показал: без 480 на всем диапазоне от 320 до 767 будет одна широченная колонка контента. А это та еще шляпа :)
15:00 - адаптивим 320
5:45 перед тем как отправить батю вверх можно нажать на место где он стоит и выделиться инстанс и удалить
@@javokhir9325 да, клево, спасибо :)
Пока жду новое видео, не теряю время смотрю старые видосики, в них много полезного - для понимания общего принципа
Отличный план!
Какой полезный плагин, даже не знала о его существовании.
Спасибо большое за такой подробный разбор плагина, ещё и с полноценным уроком по адаптивам!
Вы лучший в своём деле!
на самом деле плагин уже потерял актуальность, после того как обновили в очередной раз Автолейаут)
Component Cloner бомбовый плагин для адаптивов. За подробный разбор отдельное спасибо.
И тебе спасибо!
Спасибо за обзоры, ты классный!)
Спасибо)
офигеееть, вот сидишь вроде рутину смотришь а потом бац можно вообще "нажать ресайз ту фикс" и всё, заболдеть получается, ЛАЙК !
спасибо за просмотр!
Спасибо за подробный разбор того, как работает плагин
пожалуйста!
Без этого прекрасного плагина адаптивы было бы намного унылее делать. Как хорошо, что он у нас есть!
100% не представляю как раньше делали)
Спасибо за подробный обзор)) еще нравится музыка с заставки у этих видео👍
Спасибо за просмотр)
Спасибо за крутецкое подробное видео! Очень хотелось упростить работу с адаптивами, а с плагином разобраться не очень получилось. Теперь все полетит, фил хуг!
Круто) Фил Хуг!
Спасибо) Пока еще придется понять все прелести этого волшебного плагина)
пару адаптивов сделаешь и без него жить не сможешь
После просмотра нового ролика Ютуб предложил посмотреть этот видос. Тут другая интонация, а у меня в голове твоя привычная манера подачи 😂 очень крутое развитие канала👍 а плагин классный)
Раньше унылой улиткой был)
Спасибо за полезное видео😊 Было интересно наблюдать, как адаптивишь блок)
Спасибо за просмотр)
Крутяк! Обязательно начну использовать, это же пушка! 🔥 Спасибо за ролик! 🧡
супер!
Осталось начать применять этот плагин на практике) Спасибо за такой подробный рабор! Очень полезно)🤗
пожалуйста!
какой классный плагин! я о нем не знала 😶спасибо за полезный контент! 💫💫💫
Пожалуйста!
Крутой плагин, и Автолайаут (как без него жили))) Спасибо за обзоры!!!
Спасибо за просмотр)
Спасибо! Уже установил :)
Пожалуйста)
В свои 15 решила активно изучать веб дизайн, ui/ux и прочие разные штучки, как вдруг нашла твой канал. Скажу честно, это правда лучший канал, который я когда либо видела по этой теме! Даже те видео, которые, казалось бы, старые, обьясняют все четко и понятно. Спасибо за то, что находишь время что бы пилить нам такие шикарные видосики. Посмотрела весь плейлист нескучного курса за 4 дня! Настолько он не скучный! Планирую и дальше смотреть твой канал 😁(Помогло твое видео, где ты рассказал о Win + . теперь умею смайлы ставить!)
спасибо за просмотр!
С удовольствием слушаю каждые твои обзоры: только польза, без заумностей, что даже я начинаю понимать!😄 Спасибо больше, безграничное количество сердец. 💖
очень рад)
супер полезный плагин для адаптивов, спасибо за наглядные примеры!
ну класс)
Буду тоже пытаться подружиться с этим крутышкой 💣Спасибо за крутой ролик!!!🔥
Отличный план!
Мне нравится макет, который для примера используешь. Очень интересно было наблюдать историю его создания. Лайк🤩🤩🤩🤩🤩🤩
Супер
Алексей, спасибо огромное за то, что ты делаешь! Хоть и пользуюсь уже несколько месяцев Фигмой, а все равно узнаю новые и полезные для себя приемы! И плагин просто огонь!
Рад, что все не зря :)
Отличный плагин. В домашке нужно использовать! 😊
Тоже так думаю)
благодарю за науку компонетоклонирования) адаптивы теперь не так сильно пугают)) фил хуг)
Фил Хуг!
Теперь знаю как им пользоваться 😏 адвптивы будут готовы на раз два))
ну класс!
Понятно и подробно про такой топовый плагин! Спасибо!
супер)
Интересно наблюдать за рабочим процессом, спасибо) после такой теории и практиковаться не страшно))
пожалуйста)
Плагин действительно крутой)). Спасибо за подробный разбор))
и тебе спасибо за комменты!
Про дедулю шикарно, посмеялась 😆только из-за этого момента уже стоит посмотреть этот ролик обязательно! Я вот недавно делала стрелки разными компонентами, хорошо, что посмотрела это видео)) И очень важный момент, который стоит учитывать, что в созданных компонентах через клонер заливка не изменяется. Надо проверить, пофиксили ли уже этот баг. Очень интересно смотреть на процесс создания адаптивов, спасибо! Это прям очень помогает, когда не знаешь, как начать
😂 спасибо за просмотр
Доброе утро!!!
Крутое видео, скорость подачи контента - топ.!
привет. Супер!
Прекрасный плагин, который сэкономит мне уйму времени😍. Спасибо 🔥
💯
Спасибо, точно буду использовать его в работе)
пожалуйста!
Отличный плагин. Фигма конечно же крутая и твой канал тоже😉
спасибо)
Крутой плагин) нужно наловчится все быстро делать как ты)
И как?) Спустя год)) наловчиться получилось?)
@@alexeybychkov_ Красавчик , что спросил.У меня спроси. 3 месяца занимаюсь фигмой.Спроси через год))). Спасибо за контент дружище)
@@tileshop2698 ))
Крутяк! Плагины настоящая магия вне Хогвартса! Спасибо за видео!😄😃😃😃
ну класс)
Ну всё!!! Досмотрел базу уроков, набрался энергии и пошёл оттачивать навыки) Спасибо тебе!
Раньше всем говорил - «Нафига вам фигма, когда она узкопрофильная, ведь есть фотошоп, где можно делать вообще всё. Разве это минус?». А то что я делал в основном одни баннеры, я не задумывался. Ещё нифига в фигме не сделал, но после твоих видео понимаю, как же я ошибался сук))
У меня такая же история была. Когда все кругом уже давно переехали во всякие там скетчи и фигмы, я держал оборону и не сдавался: зачем мне ваша фигма, если я в фотошопе все делаю очень быстро. Надо мной только ржали знакомые дизайнеры. Жалею теперь только, что не перешел в нее раньше :) А вчера вообще научился на хоткеи запускать определенные плагины и теперь вообще нарадоваться жизни не могу :)
@@alexeybychkov_ Скетч сразу меня порадовал отсутствием на Винде (маков у меня нет). Я этим себя оправдывал) А фигма казалась чем-то сырым (в принципе год назад наверное не было многого), то я и её откладывал в чёрный ящичек)
Раз уж ты отвечаешь быстро на все комменты, то спрошу тут. Какой должна быть ширина первого экрана на десктопе? Кто-то говорит 700, кто-то 1080.
Я просто сужу по своему обычному ноуту, где 1366х768, и где отняв шапку браузера вместе с панелью задач, остаётся около 630 пикселей в высоту. и 1080 будет прям почти как два экрана.
Ширина или высота?) Если высота, то никто не скажет точный ответ, потому что у всех разные мониторы, разрешения, разные браузеры, разные менюшки в браузерах. Кто-то полоску меню винды ставит снизу, кто-то по бокам. Поэтому нет никакого точного ответа на такой вопрос. Когда-то давно делал проект одному знакомому, с которым в офисе вместе работали. Там нужен был поэкранный дизайн: alexeybychkov.com/works/fbr/
Вот в итоге после долгих тестов он мне написал, чтобы я всегда делал в таких случаях 750 пикселей.
Но вообще на планете нет ни одного человека, который открыв сайт (на который он попал не случайно через мисс-клик, а по рекламе, ссылке, поиску и тд) сразу его закроет, не найдя в первом экране нужной инфы. Все умеют скролить. Как минимум несколько блоков минимум будут проскролены. Поэтому запихивать всего и побольше в первый экран - такая себе история, которая ничем не обоснована. Наоборот. Раньше были популярны баннеры растяжки, которые ставили в самом верху или над менюшкой или сразу под менюшкой. Сейчас их уже нигде не встретишь, потому что они не работают :) Как раз по той же причине - все умеют скролить и все всегда скролят дальше. Получилось так, что все эти баннеры под потолком оказались в мертвой зоне и тупо перестали собирать клики. Поэтому сильно заморачиваться на точную цифру высоты первого экрана -- просто бесполезное занятие :) Сайт хуже не станет если первый экран, скажем 680 или 750 или 810 или даже 1000. У всех он будет открываться по-разному. Я вот стараюсь делать 750, но особо не заморачиваюсь :)
@@alexeybychkov_ Да, высоту имел ввиду естественно:D
Спасибо большое за развёрнутый ответ. А то меня то учили делать стандартно 700, но потом глядя чужие работы, стал обращать внимание, что многие делают их выше. Понятно, что пролистают, прост не хотелось чтобы какая-нибудь кнопка на главной была видна, например, на половину)
@@FreedomToMyHome не за что :)
Очень интересно наблюдать как ты все это делаешь, спасибо за такой ролик)
спасибо за просмотр!
Большое спасибо, хочется в этом всем разбираться больше
пожалуйста!
установила уже🤗 спасибо!
супер!
Полезное видео, спасибо
Пожалуйста)
Фигма просто бомба! Только недавно для себя открыл этот инструмент, я в шоке.
Особенно поражает работа с вектором - это снос башки!!
А я еще первые дни упирался и не хотел на нее переходить. Ну фотошоп же привычнее))) Сейчас уже жизни без Фигмы не представляю))
у меня так же было) я думал я последний из сопротивления: все уже на фигме, а я за фотошоп топлю - нафига мне ваша фигма, если я в фотошопе и так быстро все делаю)
Стилистика сайта прикольная) и видос крутой) спасибо за инфу!)
супер) пожалуйста!
Отличный, годный обзор такого клевого плагина! Спасибочки😎😉
Спасибо за столько комментариев!
Год пользуюсь уже Фигмой, но многие новые штуки узнаю именно у тебя на канале( ну ещё у Пистонщика годно). Очень полезные видео.
Супер) Спасибо за просмотры)
Очень классный плагин! обязательно приму к использованию👍
ну класс)
Это же просто гениально! Спасибо)
Спасибо за просмотр)
спасибо, оочень клево, как всегда! 🔥🔥🔥
еееее! 🚀
Плагин очень полезный, буду пользоваться
супер)
Это нереально классный плагин!!! Спасибо за подробный ролик!🔥🔥🔥
тоже так думаю!
При адаптивах вообще не заменимая вещь! Особенно, когда ИМ или что то с большим кол-вом контента. Я сегодня пробовала на простеньких элементах - вроде получилось) Спасибо большое!
супер
Леша, спасибо за классный ролик) очень интересно !
пожалуйста!
информативно и полезно, спасибо)))
пожалуйста!
Имбовый плагин, благодарю :)
ага, до сих пор мой топ1
Обалденный плагин! Спасибо за обзор!
Да плагин топ)
Как же раньше было скучно, по сравнению с новыми роликами - с "говорящей головой". Молодец что добавил "голову", юмор и настроение, смотрю с удовольствием - сыплю жмени, сыплю чаю и лью пельмени)))
Насчёт плагина не понял зачем он нужен, и как им пользоваться, проще кажется autolayout🤔
Спасибо за просмотр) этот плагин топ1 среди всех плагинов)
Очень классный плагин! спасибо, что поделился)
пожалуйста!
Спасибо, крутой плагин 🔥
Пожалуйста)
Классно!
супер!
спасибо за полезный ролик! Фил Хуг🤗
Спасибо за просмотр)
Спасибо )
пожалуйста)
Прикольный плагин. Пригодится
ага)
58 комментарий из 180, Привет уже какой раз слышу))
Привет)) Спасибо большое)
Сразу скачал, спвсибо
Спасибо за просмотр)
супер
ну класс)
АФИГЕТЬ!
xD
огооооонь!
спс)
Спасибо за видео ,как всегда топ ,научится теперь бы этому всему ))
Все видео с адаптивом полезные ,никто больше так не показывает как ты . Вопрос как научится новичку ? Без таких видео нереально .
То есть получается способ из 11 выпуска через дубликат не актуален? Я сейчас как раз повторяю все ,что в уроке 10 , ломаем компоненты ))
Для общего развития все равно нужно понять, как эти дубликаты устроены. К тому же плагин - это такое дело, которое может стать платным или наоборот его могут забросить и дальше не поддерживать. Да, с плагином немного удобнее, но принцип по сути такой же как в 11 уроке.
А чего новичок научиться хочет?)) Адаптивы делать или в принципе веб-дизайну?
@@alexeybychkov_ Спасибо за ответ , значит после 10 го , буду подробно разбираться в 11 уроке , да на самом деле уже довольно таки много видео смотрел(начал где то месяца 3 назад) ,много повторял ,с фотошопом не смотрю даже , смотрел иностранные видео т.к на русс ютубе все печально было с фигмой да и сейчас в принципе кроме тебя все печально , но все видео заканчивались тем ,что вот мы сделаем сайт за час ( cмешно , сделать главную страницу ,пару еще элементов ,футер и все сайт готов!) интересно как с такими знаниями начать работать , потом на русс ютубе есть такие же кадры , с которыми особо не научишься , как ты говорил компоненты которые показаны на кнопках это их предел , ну и еще все сводится к на тебе пару видосов - замори червячка ,а дальше ВСЕ ,ЧТО ТЕБЕ НУЖНО у нас на курсе ,обещаем ! ну собственно вот ,а цены там не плохие , да и обычно кидают тебе видео , час по скайпу и все свободен ,а у меня миллион вопросов .Ну приходится по крупицам узнавать информацию , смотреть до дыр все ,повторять , ну в общем твой сайт клондайк ,страшно не если плагин забросят , а если ты канал забросишь ))) У меня есть схемы какие блоки должны быть на какой вид сайта , но нужно смотреть только на живых примерах , в общем я рассматриваю твои проекты как ты все размещаешь ,но видно плохо ,все мелкое )))Хочу понять от начала создания сайта до адаптивов , сначала я смотрел ,говорили ,что сетка не нужна только по краям чтобы выровнять , а далее по системе нисходящих отступов , я расслабился с сетками , не делал их ,в своих тренировках ,потом нашел твой канал , тут уже есть сетки )) я правда еще до конца не понял , все же элементы четко по сетке не выровняешь (как я нуб понимаю) ,ну в общем моя мечта сделать полноценный дизайн сайта со всеми адаптивами ,как у тебя на видео с реальных заказов.
@@alexeybychkov_ Ах да еще нравится ,как ты на сайте у себя описывал ,что хочет клиент , как ты сделал ,почему так думаешь , буду изучать тоже это все .
@@blackbacardi6419 так задавай вопросы, будем искать ответы :) Можешь в коментах под видосами. А если нет пока подходящего по теме видоса - на сайте. Там заметок много, по идее по всяким темам уже есть. Ну или на почту пиши :)
@@alexeybychkov_ спасибо )) Да у тебя материала много , я пока буду смотреть на сайте ,в книге у тебя , с видео , может ответ есть но еще не успел посмотреть ,чтобы лишний раз не напрягать ) Но хотел уточнить по сетке как я смотрел видео другого ютубера там говорил ,что сетка нужна чтобы не вылазить за пределы макета , ну и делить макет на 2 ,3, 4 колонки еще мы ровняем по сетке блоки ,а все что внутри блоков мы не выравниваем по сетке, внутри блоков делать правильные отступы и контраст соблюдать , это правильно? А адаптив мы сможем сделать после этого? Если только блоки привязывать.
мой топ плагинов по совету АБ на сейчас: Quantizer, Better Round to Pixel и Component Cloner))а, еще Color Compas
отличный набор!
просто разрьів сердечка❤
♥️
Может курсик по фене ой по фигме забацаешь? С удовольствием подучил бы и даже за адекватную плату купил, думаю таких не мало тут.
так есть бесплатный курс в отдельном плей-лист
Алексей,можно узнать где ты научился веб дизайну??
Вот тут подробно расписано, как я до такого докатился alexeybychkov.com/experience/ там аккордеоны раскрываются. ну, мало ли ;)
@@alexeybychkov_ Ахах, я тоже хочу до такого докатиться 😅
Алексей, может быть вы встречали что-то подобное. При использовании плагина component cloner для таблицы, происходят странные вещи) photos.app.goo.gl/VCaNbCG26nkh1K4d8 вот скриншоты. Т.е. если клонируешь одну первую строку - все ок, а, если всю таблицу или даже две строки - вот такая странность)
не приходилось копировать такое :) Есть смысл разработчику написать. Когда плагин сломался, после какого-то там обновления, автор даже не в курсе был, что плагин перестал работать. Написал ему -- через день все починил :)
спасибо! попробую написать)
То есть, для каждого адаптива лучше делать свой клон компонента?) Кстати, а почему в этом видео еще горизонтальная сетка есть?😀
Иногда мастера хватает на несколько разрешений
@@alexeybychkov_ поняла, спасибо)
Кто-нибудь знает, почему плагин может работать некорректно? Вместо всех компонентов создается клон родителя и одна его копия :(
Так происходит, если клонировать только копии без мастера. И это вроде логично. Нужен же новый мастер)
@@alexeybychkov_ нет, я копирую вместе с мастером. Эта ошибка возникает не только у меня, в фигма-чате о ней несколько раз спрашивали, но решения никто так и не нашёл.
@@uudaraful это не ошибка, а логика. Многие считают, что мастер должен находиться отдельно, вне основного макета. Автор плагина такого же мнения. Вот плагин и делает мастер + количество копий, которой было скопировано для макета
Отличный плагин, спасибо)
пожалуйста!