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