Как сделать прокрутку в Фигма | Вертикальный и горизонтальный скролл в Figma
HTML-код
- Опубликовано: 17 окт 2024
- Видео о том, как добавить возможность в Фигме в демонстрации проекта показать прокрутку объектов, выходящих за пределы видимой страницы. Это нужно, когда клиенту или программисту необходимо показать как будет работать, например, карусель фотографий или товаров в проекте.
Также, скролл в Фигма подходит для мобильных приложений (показать работающую карту, либо навигацию по смартфону.
#figma #Фишки #Фигма #tutorial
Музыка из видео:
Frontline by Jay Someday
/ jaysomeday
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
----------------------------------------------------------------
✅ Шукаєш щось по дизайну? Все тут:
• Design.Hub: Чат дизайнерів - t.me/designhub_ua
• Design.Hub: Новини дизайну - t.me/+snU9rJ1G...
• Мій особистий телеграм - t.me/erikts7
----------------------------------------------------------------
🔥 Мої соціальні мережі:
• Instagram - / qwererik_design
• TikTok - / qwererik
• Behance - www.behance.ne...
• Dribbble - dribbble.com/q...
----------------------------------------------------------------
😘 Віддячити мені та підтримати канал:
• МоноБанка - send.monobank....
• Спонсорство - / @chronicwebdesign
Ставай спонсором, щоб отримувати переваги на каналі, та мати можливість качатись в дизайні зі мною.
ВНИМАНИЕ! Тут раскрыл более подробнее и понятнее, как делать скролл. Посмотрите это видео:
ruclips.net/video/x3h-9IY2sEM/видео.html
ruclips.net/video/x3h-9IY2sEM/видео.html
ruclips.net/video/x3h-9IY2sEM/видео.html
Спасибо что делишься опытом, это сильно помогает разобраться в программе, особенно когда у меня нет другой возможности кроме как учится по вот таким урокам.
У меня синдром асбергера из-за чего мне невозможно выполнять работу где требуется как-то взаимодействовать с людьми, и очень бедная семья чтобы позволить мне хоть какое-то обучение, а такие уроки как у тебя дают надежду и уверенность что я не пропаду. Спасибо тебе большое за твои труды.
Я всему обучился дома, читая книги и смотря видео. Рад, что тебе полезный мои видео. Если нужна будет помощь - пиши в комментариях или мне в личные сообщения. Я помогаю и подсказываю всем, кто отпишет!) Буду рад помочь)
как успехи?
Как мама мальчика с синдромом Аспергера скажу, что все у тебя получится! Аспергеры очень очень ОООООЧЕНЬ умные!
Я работаю в Фигме и объяснение как раз то что надо, не пришлось проматывать азы. Большое спасибо! Не знала, что Unsplash на несколько блоков сразу может фото добавить))))
Спасибо!)
Уже записал видео где более понятно объяснил) скоро опубликую)
Спасибо, вы мне очень помогли, вроде все делала так, но ничего не получалось. После вашего видео все заработало ❤
Я несколько часов мучалась с оверлеями и масками, а тут два шага. Обалдеть. Спасибо 🙏
Рад допомогти
Практика и ещё раз практика. Вообще по сути это элементарно, но для новичка всегда есть подводные камни и затыки.
И эти мелкие непонятки надо просто преодолеть, поняв логику создания прокрутки. Это как работа с двумя слоями:
один основной (фрейм) и в нём - содержимое, которое надо прокрутить. По сути всё просто. Спасибо.
Так) кілька разів спробувати, пошукати рішення і все вийде)
Хоть один годный ролик в ютубе по этому вопросу
Класний урок. Дякую за допомогу!!!
Дякую)
Классно, но полезно было бы сказать про то, что там нажимать надо. Клавиши.
Непонятно, внезапно появляется куча слоев, фрейм это или группа во фрейме. Не смог повторить.
Понял. Извиняюсь, т.к. только начинал и не все мог продумать) Если есть вопросы - напишите мне в телеграм - я все покажу индивидуально)
@@chronicwebdesign Спасибо, я сумел путем проб и ошибок сделать. Был бы рад, если бы вы за плату помогли мне с рядом вопросов. Могу по этому поводу написать вам?
@@Johnsson25 конечно. Я могу провести лекцию или дать ответы (видео или по скайпу) на ваши вопросы.
Напишите в телеграм или инстаграм.
Спасибо бро, реально забыл, а ты напомнил. Респект за видео!!!
Дякую
Спасибо, быстро, то что нужно. Те, кто сразу не поняли урок, наверное просто мало в фигме работали
Супер) Спасибо!)
Проста лучшииииииииий без воды и быстро
Спасибо)) Приятно)
Дякую, дуже просто пояснив, лайк)))
Спасибо!) Приятно)
Дякую за якiсний контент👍
Дякую))) Приємно)
Лучший, просто нереально лучший!
Дякую)
Очень важная информация. Только объяснять нужно лучше. Тоже не смогла повторить. Буду искать другое видео
Напиши мне - подскажу, расскажу)
спасибо огромное, очень выручили!
Дякую за коментар.
Добрый день! Все сделала по инструкции, но не понимаю, куда и как сохранять, чтобы при открытии скролл заработал. Подскажите, пожалуйста:(
Не зможу, так як не до кінця зрозумів вашу мову. Можемо перейти на іншу, більш людяну?
СПАСИБО БЫЛО ПРОСТО ВСЕ ЯСНО И ПОНЯТНО
Рад быть полезным!)
Спасибо, то что искал!!!!
Спасибо за комментарий) Если что - пишите, помогу, подскажу)
Я нажимаю на Clip content, однако всё равно не вижу то, что находится за границами фрейма. Что я сделал не так?
Не выделили нужный фрейм или весь проект
Шикарная фича! Как раз недавно задумывался, как что-то подобное можно сделать)
Клиенты тоже в восторге от нее)
блиииин спасибо большое!
Дякую)
А чтобы прокрутить направо при нажатии на стрелку вправо например нужно отдельный фрейм делать? или в одном фрейме можно . Если в одном то как?
То, что вы описали - совсем другой функционал нужно применить.
Там нужно смарт анимацию задействовать и делать в разных фреймах
0:41 какими клавишами размножаешь группу? Cntl v добавляет со сдвигом вправо вниз. И какими клавишами расставляешь по горизонтали?
Command + D
@@chronicwebdesign спасибо!
где момент как кучка прямоуголников которые программой определяються как прямоугольники резко стали опредяться программой как фрейм?
Ахахах) Есть там второе видео, где я подробнее показал всё) Я был не опытный))))
оочень полезный совет)
Спасибо!)
Класс!
Спасибо!)
А можно ли так сделать с компонентами,проьовала не получается.Возможно как-то по-другому?у меня несколько фильтров дроп-даун и задумка такая,чтоб скрол в бок был
Та можна зробити) але то треба спробувати знову, адже оновлення фігми внесли певні правки)
@@chronicwebdesign дякую.Передивилась ще раз відео,спробувала з компонентами - вийшло 🥳🥳🥳
@@Din_Ili молодці) чудово))) вітаю
доброго времени суток ! после всех проделанных манипуляций при просмотре отображаются только объекты скрола ,остальная часть страницы пустая
что я делаю не так?)
Фрейм общий у тебя есть? Напиши в телеграм - я подскажу. Скинешь скрины или покажешь экран)
@@chronicwebdesign как в телеге найти?
Быть внимательным)
@@chronicwebdesign завтра вечером отпишусь
Спасибо за отличное объяснение, очень помогло в реализации прототипа))
Супер) приємно. Дякую за коментар
Спасибо, все очень понятно
Спасибо! Если что - есть второе видео по данному уроку)
Выключаю clip content, но ничего не изменяется, подскажи, пожалуйста, что сделать (
Скорее всего выделяешь не то, что нужно.
Доброго времени суток) Можно ли сделать так чтобы постоянно скролились ?)
Да. Смарт анимацией.
Здорово!
Спасибо)
ʼВ кого не виходить скрол - ставте fix на висоту або ширину контейнера ( фрейма ) . Дякую чувак , допоміг
Дякую за ваш коментар)
спасибо, полезно. Вроде все сделала пошагово как в уроке. даже нашла урок от другого автора. Но у меня скролл в презентации не работает. Какие могут быть причины?
Не знаю. Что-то не сделал или не ограничила площадь фрейма. Скинь в телеграм ссылку на проект - гляну)
Очень нужна данная функция в проекте, но ни как не получается. Можно где-нибудь более подробно просмотреть?
ruclips.net/video/x3h-9IY2sEM/видео.html - тут уже ответил) Сам понимаю, что не очень хорошо записал видео)
А как сделать горизонтальный скрол, начиная со второго фрейма?
То есть, у меня есть 5 элементов, которые должны скролиться горизонтально, но я хочу чтобы полностью был виден второй элемент, а первый торчащим слева, третий торчащим справа и тд.
И чтобы с главного экрана была возможность сразу скролить и вправо и влево
Сложно сказать так.
Не понял дл уонца задачу)
@@chronicwebdesign Объясню подробнее: на экране карта (например google maps). На карте стоят 5 меток (например всех продуктовых магазинов поблизости). По умолчанию уже выбрана какая-либо метка.
Снизу описание этих магазинов (каждый в своей карточке и эти карточки скролятся горизонтально)
Но при выборе другой метки (метки другого магазина) нижняя строка с карточками должна самостоятельно проскролиться до той, которая привязана к этой метке.
Вопрос такой: как назначить экрану, в котором уже выбрана следующая метка, отображение следующей карточки? (при том, что пользователь должен видеть и слева и справа от действующей карточки другие карточки, привязанные к другим меткам на карте.
В видео показано как сделать горизонтальный скролл видя на главном экране самую первую карточку ( то есть с которой начинается прокрутка - крайняя правая)
А мне нужно на главном экране показать, допустим вторую
Так просто это не объяснить. Реализовать можно, но описать - сложно)
Отличное видео, но как упоминалось ранее в комментах очень быстро. Не смогла повторить к сожалению
Пиши мне - подскажу, расскажу
@@chronicwebdesign Благодарю вас за быстрый ответ и помощь в создании скролла))) 👍👍👍
@@aigerimseitova520 Рад помочь) Спасибо)
а можно сделать как-то размытие по краям фрейма?
Да, можливо. Накласти поверх додатковий слой з ефектами
@@chronicwebdesign возможно спросивший не знает мовы. Смысл отвечать всем на украинском если очень много русскоязычных тоже осваивают материал.
@@Midi25 можливо не варто було російськомовним росіянам лізти в незалежну країну?
Чому ж ви не питаєте це у русні?
СПАСИБОООООООООООООО!!!!!!!!!!!!!!!!!!
Рад помочь)) пишите если что)
супер! только немного помедленнее действия показывай, плиз :) для новичков - самое то
Понял) Спасибо, учту) Планирую снимать еще что-то полезное) Учту)
А, как скрыть этот блок. Куда нажать то???
Какое блок?) Есть ещё видео с пояснением, т.к. это видео я плохо записал.
ruclips.net/video/x3h-9IY2sEM/видео.html
почему у меня монтажная область раздвигается вместе с картинками?
При "раздвижении" зажми и удерживай Ctrl. Ты двигаешь монтажную область и содержимое в нем, а нажав Ctrl - будешь двигать лишь элемент который выделен.
@@chronicwebdesign спасибо, это помогло!
как за раз скопировали и картинки вставили...???? покажите детально .спасибо
Горячей клавишей) позже сниму об этом видео)
Да уж, объяснение скороспешное. Непонятно, что откуда и как
Да, понимаю) Спасибо за замечание. Я лишь осваивал подобное и сейчас вижу проблемы) Исправляюсь)
сделал все также только горизонтальный скроллинг когда мышкой перетаскиваешь, на колесо не реагирует(((
Є відпоавідь на цей відео, де я пересняв його))
Десь в описі подивіться)
@@chronicwebdesign нигде не нашел. Скролом не двигает. Скачал файл с инета готовый, где двигается, только там в левой панели над фреймом написано слово SCROLL. Не могу вообще разобраться
@@anrYReds ruclips.net/video/x3h-9IY2sEM/видео.html
ruclips.net/video/x3h-9IY2sEM/видео.html
ruclips.net/video/x3h-9IY2sEM/видео.html
а как сделать горизонтальный скролл по кнопкам ? Т.е. есть две копки по нажатию которых происходит скрол слайда , на след слайд
С помощью смарт анимации. Это еще проще)
Хроники веб-дизайнера не получается у меня )
@@masimmansur1910 хм) посмотрю и запишу видео)
Что вы нажимаете, чтобы быстро размножить объект?
Что такое "размножить"? Если пойму - помогу)
Вы создали один прямоугольник, а потом раз и их уже много. Как вы это сделали?
Ctrl+D или Ctrl+С в связке с Ctrl+V
как сделать скролл текста в Фрейме но что бы не уходила картинка)
как сделать сразу две?
Що саме?
А кто-нибудь знает как зафиксировать фон при скроллинге? Чтобы скроллинг шёл, а фон оставался неподвижным?
Да. Создай фон слоем и в правой панели поставь галочку "Fix position when scrolling".
@@chronicwebdesign Поставил. Но шапка просто перекрыла весь сайт. В том числе и то, что должно было скролиться на её фоне
Может не все элементы правильно расставлены
@@chronicwebdesign Проверю. В любом случае, благодарю за помощь!
@@demon_and_seraph Если что - пиши)
верстальщики скажут зачем?😂
Так це легко зверстати)
Ничего не понятно как пошагово сделать,слишком быстро все
Бывает...
Чет нифига не понятно, что-то нажимается..какие-то хоткеи жмякаются...что куда где..ни подсказок ни озвучивания действий кроме общих... жаль...
Печаль. Можно посмотреть видео про это еще одно. Ссылку добавлял.
И если не разбираетесь пока на базовом уровне - это пока вам не нужно)
@@chronicwebdesign вот именно сейчас как раз очень нужно) Поэтому я и ищу мануалы.
@@chronicwebdesign Спасибо за ссылки с корректировкой, они очень помогли)
Разве в браузере так скролят? Для десктопа это не подойдет
Хорошо, извини( удалю видео тогда(
Unsplash , распределение блоков и пр. действия сначала сделал потом сказал . .. а ты такая "чё?" это типа ролик про то какой ты молодец а не про научиться :(
:( як же по*уй на вашу думку
Очень быстро говоришь без процесса как и что делать , набираешь что-то без деталей. Диз
Мда. Тобто ти не читаєш опис та не бачиш доповнення в коментарях. Я пересняв відео
Очень быстро и не понятнл
ruclips.net/video/x3h-9IY2sEM/видео.html - тут уже ответил) Сам понимаю, что не очень хорошо записал видео)
Ничего непонятно!
Вибач. Є ще одне відео)
@@chronicwebdesign Дякую!
@@Valreius Якщо будуть питання - пиши мені в телеграмі в особисті. Там більше відповідь можу дати)
@@chronicwebdesign ось зараз зрозуміліше) спасибі!