Как настроить компоненты у ползунка на сайте через варианты в Фигме. Лайфхаки, фишки, секреты Figma
HTML-код
- Опубликовано: 1 апр 2021
- #alexeybychkov #ityoutubersru #webdesign
Как настроить компоненты у ползунка на сайте через варианты в Фигме. Лайфхаки, фишки, секреты Figma
Наши чатики в дискорде - / discord
Обучение - alexeybychkov.study/
💰❤️ Поддержать канал:
/ @alexeybychkov_
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - / alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: / alexeybychkov_
👉 Беханс: www.behance.net/alexeybychkov_
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: / dsgn.tips
👉 Твитор: / _alexeybychkov
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
Меня зовут Алексей и я веб-дизайнер фрилансер из Минска. Мне в районе 36 лет, женат на прекрасном человеке и у нас две прекрасные дочки. Работаю на лучшей бирже в рунете - Weblancer.net. И делаю это хорошо, чего скрывать =) Ведь я люблю свою работу (уже 17 лет) и всех своих заказчиков. На этом канале делюсь опытом, рассказываю про всякие детали работы веб-дизайнером на фрилансе. Тут будет не только теория про веб-дизайн, но и много практики в фигме и фотошопе!
Подробнее обо мне - alexeybychkov.com/about/
17 лет опыта - alexeybychkov.com/experience/
Пишу - alexeybychkov.com/blog/
Дизайню - alexeybychkov.com/cases/
Отзывы - clck.ru/K5Mcc
Мои книги:
«Дизайн и фриланс. Начало» - clck.ru/JE8ku
«Дизайн и фриланс. Новый уровень» - clck.ru/JE8jT
Хелп по Фигме: уроки, видео, советы, фишки - figma.help
Мир фейсов: faces.world/
#figma #фигма #фотошоп #photoshop #дизайн #design #фриланс #freelance
![[NEW] 🔥 Компоненты в Figma. Советы, лайфхаки, примеры. Новый нескучный курс по Фигме. Урок 7](http://i.ytimg.com/vi/YmPc4jVNSR4/mqdefault.jpg)
![[NEW] 🔥 Компоненты в Figma. Советы, лайфхаки, примеры. Новый нескучный курс по Фигме. Урок 7](/img/tr.png)
![Finesse2Tymes - Pretty Ricky [Official Music Video]](http://i.ytimg.com/vi/xIoP_mhYRT0/mqdefault.jpg)
Спасибо вам за комментарии и сердечки! ❤️
Расскажите, а каким вариантом воспользовались бы, если нужно сделать ползунки?
Доступ к закрытом чату: советы, лайфхаки, ответы на вопросы, ранний доступ к видео и тд:
бусти - boosty.to/alexeybychkov - русский интерфейс, рубли
патреон - www.patreon.com/alexeybychkov - английский, доллары
Подглядывать за мной можно тут:
👉 Инстаграм: instagram.com/alexeybychkov_
👉 Беханс: www.behance.net/alexeybychkov_
👉 Телеграм: t.me/dsgn_tips
👉 Фейсбук: facebook.com/dsgn.tips/
Эти способы использовать это точно незаконно - магия! А еще незаконно делать такой качественный контент) Просто пушка💣💣💣
Супер)) Рад, что нравится!
Говорят, что если умеешь что-то делать хорошо, делиться знаниями - святое дело. Автору плюсик в карму и огромная благодарность от подписчиков.
Круто, спасибо!
Линия через текст - офигенно! В голове укоренилось после фотошопа, что текст надо в вектор переводить, а тут просто в фигме используем для создания линии. Это гениально. Шедевр!) Ты всегда умеешь удивить множеством способов решения. Спасибо. 🤩
суперр))
афигеть)) очень прикольная фишка получилась. не догадалась бы такие вещи компонентить)))
спасибо за просмотр!
ТракБар. полоса прокрутки... Алексей, твой вариант названия ползунка?))))) Алексей, ты Гений! Маэстро .. Дай Бог тебе здоровья! Вот как ты щедро делишься всякими премудростями с нами, так пусть тебе куча положительного приумножается! Твой курс обучающий огненный)).
Спасибо) ❤️ селектором называю
🔥🔥🔥 Чудеса с текстом - просто взрыв мозга) Спасибо, что поделился! Всегда range в вёрстке называл такой компонент
ага, range slider называется
Как объяснить сложные и неочевидные вещи, да еще и за 9 минут? Это нелегально! Супер контент, спасибо, как всегда топ 😎🤘🏻
Спасибо!
Как всегда Агонь! 😉 Вариант с текстом - это волшебство) Ну а я обязательно буду использовать четвёртый, как самый быстрый и без заморочек👍
супер)
С вариантами у меня вообще беда, почему-то не люблю их. Но когда есть и другие лайфхаки и фишки - это же агонь 🔥🔥🔥
@@llelya *отбил пятюню* да, помню свои страдания при отрисовке дашборда, где тож варианты были 😅
и я вариантами пользуюсь раз в году))
Этот лайфхак просто взрывает мозг)))) Гениально!!!! Как вообще такое можно было придумать с ползунками?!
так каждый день в фигме по многу часов проводишь, методом тыка все и узнаешь :)
О-о-о! Эти вставочки с неудачными кадрами просто супер! Мне кажется, людям всегда интересен бэкстейдж. А контент как всегда топ :) Единственное, верстальщик с ума может сойти от некоторых из этих способов.
P.s. эти ползунки "по-научному" называются slider controls
а я думал range slider ;)
@@alexeybychkov_ главное, что slider :) А то многие слайдерами называют карусели
Какие крутые варианты настройки ползунков. Спасибо за идею. Буду пользоваться 👍🏼
пожалуйста)
Вау, линия через текст это очень креативно! Для настройки ползунков больше всего приглянулся последний вариант :)
Спасибо за просмотр)
надо же придумать такое)) Рубрика "очумелые ручки" из пока все дома передачи на ТВ напомнило. ))
Видео как всегда замечательное, спасибо что делишься с нами. Очень ценно.
Ага, смотрел в детстве :)
Классно когда сложные вещи рассказывают простым языком, спасибо за ролик!)
супер)
Надо ещё раз пересмотреть видео) я вообще удивляюсь, как ты находишь такие фишки)
так в фигме каждый день много времени ковыряешься, вот и находишь
@@alexeybychkov_ Мне казалось, только в фотошопе одну задачу можно решить разными способами, ан нет)
Класс, спасибо. На втором варианте я укрепила свои знания в создании вариантов, а последний самый классный, даже с привязками малость подружилась)
супер, рад, что полезно!
Надо подружиться с автолейаутами 😁, а то слишком классные и неочевидные у тебя решения, это же ааагонь🔥🔥🔥
Без автолейаута нынче тяжко :)
Сложная тема с лёгкой подачей 🤘 как всегда, никакой воды, только суть и реально эффективный подход 😎 ну жара 🔥
агонь)) Спасибо, что смотришь и комментируешь!
Нужно больше закадровых сцен))
)) больше не помещаются под отведенные для них 20 секунд
Вариант с текстом просто какой-то бомбический!! спасибо!
Огонь
Ого, да это же гениально и противозаконно печатать линию, действительно магия. Спасибо, что во всех твоих видео лежит качественная и полезная инфа.
)) пожалуйста!
Вариант с текстом - вообще гениальная тема. Но третий вариант зашел больше всего, буду пользоваться, спасибо!
@@llelya там где фрейм ставишь? Блин, я думал что третий) тоже пошел пересматривать
Первый - разломать компонент
Второй через варианты
Третий - напечатать
Четвертый через привязки
Это просто какое то волшебство! 4-ый вариант однозначно мой фаворит! Спасибо!!!
супер) спасибо за просмотр!
Ну какая же красота, когда есть у кого учиться...🔥
круто))
Очень полезное видео! Сложное простым понятным языком. Спасибо!
пожалуйста)
Буквально, месяц назад вписался в тему веба и ui/ux, имея на борту только фундамент по карандашной академ. графике, но за неделю с вашими видосами прокачался "мама, не горюй" - бегом устроился в студию, пересматриваю твои видосы с кайфом и набираю скорость навыков. Подача, материал, настроение.. крутейше! После этого только поток мотивации и с улыбкой дизайнить, ни секунды рефлексии))
3 вариант👍
Ееееее рад, что нравится! Спасибо))
Это что-то незаконное! Невероятно печатать линию! НО пользовалась бы последним способом) И большой привет неудачным кадрам)
Тоже последним пользуюсь :)
Спасибо))
3 и 4 варианты - огонь. Спасибо! 🔥🔥🔥
Супер)
❤ Супер-класс!!! Надо же такое придумать! Алексей - ты гений! ❤
спасибо))
последний вариант очень легкий и быстрый ,удобненько .Большое спасибки!
супер, пожалуйста!
Лайк поставила, посмотрю попозже, уверена что видео пушка🚀
спасибо)
Это же какая полезность! При варианте где ты текстом двигал ползунок, у меня глаза по 5 рублей стали) Как ты до этого додумываешься?)) Но последний вариант самый быстрый, понравился больше всех👍 Спасибо за такие советы, на вес золота просто))
спасибо за просмотр)
А я помню одно время делала какие-то нереально адовые компоненты. Точнее нам так надо было делать по дизайн-системе) В чем суть: берешь и пихаешь максимум фич в мастер-компонент. А потом от него создаешь дефолтные состояния, в которых ненужные моменты отключаешь. Типа как сейчас если варианты собрать в одном компоненте... Например инпут с заголовком, внутри подсказка + маска для телефона. Используешь инпут для телефона - отключаешь все остальное, и так далее по принципу. Думаю не стоит говорить, к какой лютой путанице это в итоге привело. Особенно когда диз с другого проекта перенастраивал компонент под себя, а у тебя в итоге все слетало к чертовой бабушке)))
представляю) Когда только автолейаут появился, думаю, многие пробовали что-то такое собрать :)
Второй вариант, который с текстом, оказался супер неожиданным :D Пойду опробую.
Как и всегда, спасибо за жменю классных лайфхаков и фишек :)) Подача материала на высшем уровне!
круто) спасибо!
Оо, Алексей, неожиданно)) кайфовый ролик 😎
спасибо тебе))
Посмотрела два раза ) мне ещё не все доходит с первого). Спасибо большое ! Прикольно! 👍
спасибо за перепросмотры))
Это гениально! Компоненты и автолейаут как всегда помогают создавать магию! Думала, что как раз границы должны соответствовать границе элементов, а теперь уже нет) Спасибо
Спасибо за просмотр)
Блин, один вариант круче другого)) автолейаут меня поразил)
ага, печатать линию это весело!
Как всегда спасибо за полезнятину!) Столько пользы с твоей подачей и позитивом однозначно стоят лайка)
Спасибо! Рад, что нравится!
Это уже незаконно крутые фишки. Спасибо большое)). Лайк
супер
СЛОЖНААА, мозг кипит, надо еще раз 5 пересмотреть и сделать, чтобы уложить. Спасибо, заставляешь мозги работать!!!)))) И спасибо за вариативность))))))))))
😀 Спасибо за просмотр)
Недавно смотрела этот ролик и вот сегодня мне понадобилось сделать прогресс бар и эти лайфаки мне как раз пришлись кстати) крутой ролик, спасибо😍😍
рад, что пригодился!
Та как так-то 🤣🤣🤣
Алексей сломал систему в очередной раз 🙈🙈🙈 Спасибо за годноту 🙌
🤣 пожалуйста
Спасибо ! Очень полезный ролик. Сложное простыми словами) пойду пробовать😁
пожалуйста!
Гениально, черт возьми!
ну класс)
Спасибо) насколько я помню в материал дизайне это Слайдеры) мне давно нравится вариант с текстом, конечно)
ага, range slider называется)
Ну блин! Как это я раньше не посмотрел! :)
Вот именно)
4ый зашел! Благодарю! Пришлось смотреть 4е раза чтобы вдуплиться 🤓
супер)) спасибо за просмотр!
Быстро и полезно! Спасибо, Алексей))
пожалуйста!
Прикольно. Вариант 4 мне бы зашел проще всего, но и печатать тоже прикольно) хорошо, что можно скруглять фреймы )))
это точно))
@@alexeybychkov_ это было смешно😁
Спасибо большое!
Буду последним вариантом пользоваться) с текстом конечно прикольно, обесцвечивала текст, когда надо было вставить вектор в абзац, а там все по привязкам.
пожалуйста большое)
Лайфхак про двигать ползунки правым отступом АЛ обязательно возьму на заметку.
Огнище🔥
Супер
Познавательно. Больше всего понравился третий вариант, но удивил второй ( с текстом). Я думаю хорошо уметь, и применять все три варианта, в зависимости от задачи. А ползунки, - фейдеры, но это не точно....
мне последний больше всего по душе. Быстрее всего и любые значения можно показать
@@alexeybychkov_ И я об этом же, но удивил вариант с текстом, хоть и костыль, но очень оригинальный.
И да, видео улетает в мою отдельную папку (созданную специально под твои ролики) 😀 Настолько они полезные, что просто класс))
супер)
Максимально полезніе, интересніе и драйвовіе видео!!)) СПАСИБО!🥰🥰🥰🥰
очень рад)
Спасибо. Последний вариант мне больше всего понравился.
Пожалуйста)
С текстом неожиданный вариант) 😄Мне по душе 3-ий, буду пользоваться им)) спасибо за лайфхаки🤗
Спасибо за просмотр)
Ахахха, ну с текстом это конечно вообще прикол) Как до такого вообще додуматься можно?))
Самый правильный всё таки четвёртый вариант, буду пользоваться им, как раз и привязки подтяну) Спасибо!
Тоже почти всегда 4-ым вариантом пользуюсь
Класс! Как всегда у Алексея самые лучшие лайфхаки👍
спасибо)
интересно) второй как на меня самый "правильный", ибо я думаю за текстовку верстальщик по головке не погладит)) но весьма оригинально
Да, вряд ли же он будет вникать, что там текст внутри еще и непрозрачный )) Возьмет размер и цвет полоски и видели того верстальщка
Автор, да ты гений) Лайк не глядя)
Спасибо))
Спасибо, записала себе в тетрадь новые лайфхаки😊
Уже несколько раз замечала у себя дежавю при просмотре некоторых роликов, хотя лайки не стояли (всегда у просмотренных ставлю лайки). Всё не могла понять, почему так
А недавно сообразила, что часть роликов я просто смотрела с другого аккаунта😂
8:15 😱
о, двойные лайки выходит привезли)) круто)
В дашике дошла до такого элемента. Голову сломала, потом вспомнила, что ты недавно разбор делал. Ура! Получилось по четвертому варианту! )
Спасибо за просмотр)
Супер и как раз в тему!!!! Третий вариант очень удивил! Леша, ты гений! Спасибо!!!!
пожалуйста)
Ого, второй вариант крутой
да крутой!
Классные лайфхаки, спасибо, Алексей!
Пожалуйста
Гений...
Алексей, расскажите, пожалуйста, откуда у вас хватает мотивации всё это делать? Для чего всё это?)
Такие люди, как вы, на вес золота. Спасибо вам большое 🙏🏻
Мне просто это нравится :)
Спасибо)
Добрый день. Только освоила варианты, а уже и обновления в фигме и вот этот вот ролик. Получается, уже и не нужны почти ))
Привет. Варианты никуда не делись, но их упростили)
Это гениально! Спасибо!
Супер)
Вырезанные кадры в конце видео повеселили))
)) ага, появилась новая фишка - вставлять неудачные кадры
Отличный вариант с "печатью" линий 🔥🔥🔥
😅
Алексей, спасибо, что привносишь в нашу жизнь столько пользы! Огромная порция мотивации и вдохновения от каждого ролика- просто супер! Вот что значит, энергия через край🔥🔥
Это пожалуйста!
Магия🙌 просто о сложном. Спасибо!
🎩
Что-то на незаконном...😅 Спасибо большое! Обязательно попробую все способы))
Супер, пожалуйста!
Привет) я немного обалдела от варианта с текстом)) это же нужно додуматься!
привет))
Заливка автолэйаута это ж магия 😳 я в шоке... анреееал 🚀
да, неочевидный лайфхак. Иногда удобно использовать
Полезные фишки, спасибо)
супер
Мне понравилось "это что-то незаконное" :)
спасибо за просмотр!
Второй вариант ааагоооонь 🔥🔥🔥
а мне последний больше всего по душе. Быстрее всего и любые значения можно показать
@@alexeybychkov_ ты про текстовку, залитую во фрейме? я ее имела ввиду) раскомпонентить мне вообще кажется слишком старым способом) а у ты ассоциируешься с чем-то новаторским, неочевидным) из ряда "а так можно было?"
Не, я про последний четвертый вариант с привязками. Мне он больше всего в таких случаях нравится
@@alexeybychkov_ значит, стоит попробовать))
Вариант с текстом, просто и гениально.
есть такое))
4 способ линию и кружок в auto layout. Потом линию в привязках поменять на заполнить до границ и можно смело расстягивать. Похож на 3 пример
спасибо за просмотр)
Алексей, ты лучший просто ♥♥♥♥♥♥
спасибо!
Спасибо, очень помог урок!!!)))
Супер)
Про скругление фреймов в конце видео, ну очень смешно)))))
😄 мне тоже было очень смешно))
Я просто пока пытаюсь руку набивать, наверное, через варианты) Типа «по-умному») Просто смещение границ компонента потом могут влиять на выравнивание 🤔 В этом примере, наверное, не актуально, но в принципе.
спасибо за мнение :)
Столько способов, чтоб сделать одно и то же. Круто)
Ага))
ты чертов гений 🤗
🥹
будут еще розыгрыши обучения у вас)) ??
хочу к вам попасть, но уже вписался в другие курсы и жалею что раньше не узнал хорошо вас))
после просмотра ваших видео не отпадает желание развиваться в дизайне))
Да, перед каждой новой группой буду места разыгрывать
«Спустя год пригодилось» - посмеялась от души ))))
Я тоже))
Я склоняюсь к двум последним) третий самый неординарный)) чудеса фигмы))) ну а четвертый - быстро и как-то правильнее что ли или, если ссылаться на предыдущий вариант - законнее))))
ага)) законнее!
Это гениально)))))
наверное))
@@alexeybychkov_ Леша, есть идея для нового видео! Запиши, пожалуйста, материал как правильно подписывать слои в макете сайта. Может у тебя есть типичная подборка из таких названий, будет полезно глянуть её. Спасибо! ))
Если не ошибаюсь, ползунки называются-тугл бар)
P.S ан-нет, пролистал комменты ниже, выходит что ошибся)
ага) range slider это
Закадровка просто сок 😂
у меня появилась проблема как закодровку сокращать до 20 секунд, а то каждый раз сильно больше всего получается)
Самый классный способ с буквами и последний с изменениями границ компонента
спасибо за просмотр)
Очень полезно, интересно и круто круто? круто!
супер)
Круто спасибо
пожалуйста!
Леха, ну это уже переборщ) 1й способ годнота для маленьких проектов, 2й для больших) 3ий просто лютый костыль) а 4й норм но корявый)
Респект за широту кругозора) заодно и мой расширяешь)
способы на любой вкус))
Отвал бошки! Спасиииибо)))❤
пожалуйста!