Как сделать горизонтальный скролл в фигме

КАК СДЕЛАТЬ СКРОЛЛ В ФИГМЕ

Для создания скролла в Фигме нужно использовать плагин Scrollmate. Этот плагин позволяет создать скроллируемую область внутри фрейма. После установки плагина нужно выбрать нужный фрейм, настроить параметры, выбрать направление скролла и настроить остальные параметры.

Если нужно изменить параметры скролла, то это можно сделать в любой момент. Для этого нужно выбрать фрейм, затем нажать на значок плагина Scrollmate, после чего откроется настройка параметров скролла.

Также можно создать скролл внутри группы объектов. Для этого нужно выделить нужные объекты, затем нажать клавишу C на клавиатуре, чтобы создать контейнер. После этого нужно выбрать контейнер, затем нажать на значок плагина Scrollmate и настроить параметры скролла.

Если нужно создать бесконечный скролл, то это тоже можно сделать с помощью плагина Scrollmate. Для этого нужно выбрать нужный фрейм, затем настроить параметры бесконечного скролла.

В целом, создание скролла в Фигме не сложно и можно выполнить это с помощью плагина Scrollmate. Это удобный инструмент, который позволяет создавать различные скроллируемые области и настраивать параметры скролла.

Figma Tutorial: Master Sticky Scroll in 8 Minutes

Master Figma’s New Scroll Feature in 4 Minutes

Уроки Figma — Бесконечный слайдер. [Фигма]

Как сделать карусель в Figma

Как сделать горизонтальный скролл в прототипе фигма. Делаю экран мобильного приложения.

Как сделать прокрутку в Фигма — Вертикальный и горизонтальный скролл в Figma

СКРОЛЛ АНИМАЦИЯ В FIGMA — КАК ДЕЛАТЬ АНИМАЦИЮ В FIGMA

Как делать крутое интро и параллакс в #FIGMA How to make animated intro and #Parallax in FIGMA

Configuring horizontal and vertical scrolling in Figma

Designers know how important it is to effectively communicate their designs to stakeholders. High-fidelity prototypes are a great way to do this, providing a realistic representation of final designs. With Figma, designers have a tool that allows them to create these prototypes quickly and easily.

Scrolling is an important aspect of designing user interfaces for digital products. Whether you’re designing a website or a mobile application, you’ll need to consider how users will navigate through your content. In Figma, you can configure both horizontal and vertical scrolling to create a seamless user experience.

In this article, we’ll explore how to configure scrolling in a Figma prototype to create interactive and realistic experiences for stakeholders. Not only will this make your prototypes more engaging, but it will also give stakeholders a better understanding of how the final experience will look and feel.

Configuring overflow scrolling in Figma

In Figma, designers can configure overflow scrolling for frames to ensure that their designs scroll properly. This applies to top-level frames on the canvas as well as nested frames and layers.

To enable overflow scrolling, the frame must contain “overflowing” content that extends beyond its bounds. If the content within a frame fits within its bounds, then regular scrolling will be applied because there is no overflow content.

Figma provides three different overflow behaviors: horizontal scrolling, vertical scrolling, and both combined. These options allow designers to specify how overflow content should scroll when it extends beyond the frame’s bounds.

Horizontal overflow scrolling

Horizontal scrolling can have many use cases in interactive prototypes, such as scrolling through a carousel of images or scanning a zoomed-in visualization.

To enable horizontal overflow scrolling in Figma, ensure that content extends past the width of your frame. Many designers often make the mistake of using groups instead of frames. When you use a group instead of a frame, the elements within the group will adapt to the group’s bounding box. This does not allow for overflow content, and as a result, overflow scrolling.

If your content isn’t within a frame:

First, select the Design panel in the right sidebar:

Select all objects that you wish to be contained within a frame by holding down the Shift key to multiselect:

Create a frame around the selected objects by right-clicking and selecting Frame selection from the context menu. You can also use the frame selection keyboard shortcut:

• Mac: ⌥ Option + ⌘ Command + G
• Windows: Ctrl + Alt + G

Over 200k developers and product managers use LogRocket to create better digital experiences

Learn more →

Once your frame is set, click on the frame to reveal the bounding box. Drag the bounding box horizontally to resize the frame.

You want to adjust the width of the bounding box so that the content overflows past it. Think of the bounding box as a window that displays the content within it. The overflow content should appear in the window when you scroll through it:

Next, to enable overflow scrolling, select the Prototype panel in the right sidebar:

Under Overflow scrolling, select Horizontal scrolling:

To test out your scrollable prototype, click on the Present button on the right side of the toolbar to enter presentation view. You can also use the presentation keyboard shortcut:

• Mac: ⌥ Option + ⌘ Command + Return
• Windows: Control + Alt + Enter

In presentation view, place your cursor within the bounds of your frame and scroll from side to side. Your prototype should now mimic a realistic horizontal scrolling interaction:

Vertical overflow scrolling

Vertical scrolling in prototypes is often used to reveal hidden content that lies below the fold. This is especially common for mobile websites and apps that rely on scrolling to fit content onto a page, such as a news feed.

Enabling vertical overflow scrolling is much the same as horizontal scrolling. The only difference is the direction in which your content scrolls.

To configure vertical overflow scrolling, adjust the bounding box of your frame so that the content overflows over the top or bottom bounds instead of the sides:

With your frame selected, select the Vertical scrolling option from the Overflow scrolling dropdown. Make sure you’re in the Prototype panel in the right sidebar:

Now it’s time to test your prototype. Enter presentation view and place your cursor within the bounds of your frame and scroll up and down. Your prototype should now mimic a realistic vertical scrolling interaction:

Horizontal and vertical overflow scrolling

Finally, you can enable both horizontal and vertical overflow scrolling at the same time. This option allows you to scroll in any direction, which can be useful for communicating an interactive area such as a chart or map. Let’s use a map for our example. First, ensure that the content extends past all sides of the frame:

With your frame selected, this time under Overflow scrolling, select Horizontal and vertical scrolling:

Now test out your prototype in presentation view. Place your cursor within the bounds of your frame and scroll up, down, left, and right. Your prototype should now mimic realistic scrolling in any direction:

How to clip content

In Figma, clipping content allows you to hide content within a frame that extends beyond its bounds. In many cases, your design will have multiple elements within a frame. Clipping content can be useful when you want to display only the content that appears inside the frame’s bounding box and hide all content that overflows.

Even if you resize your bounding box, the overflow content will still appear in your prototype, possibly covering up or hiding behind other elements:

To give the appearance of a “window,” select the frame that you want to clip and check the Clip Content option in the Design panel. This will create a clipping mask around the selected element, hiding any content that extends beyond its boundaries:

You’ll notice that your frame has now clipped any overflow content and only shows the content within its bounding box. Don’t worry, though — your objects haven’t been deleted. They’re simply hidden from view and will appear as such in presentation view as well:

Now your prototype features a scrollable, clipped frame. Once you’ve mastered both scrolling and clipping content, the interaction possibilities are endless:

Fix position when scrolling

When creating a prototype in Figma that uses scrolling, you might not want every element to scroll along with the screen. To keep certain elements of your design stationary when scrolling, you can fix their position by using constraints.

For instance, you might want to fix a header to the top of the screen or a navigation menu to the side.

To fix an object using constraints:

1. Select the object that you want to fix on the canvas
2. Select the Design panel in the right sidebar
3. In the Constraints section, set both horizontal and vertical constraints
4. Check the Fix position when scrolling option:

In the Layers panel, your objects within the parent frame will be categorized under Fixed or Scrolls to distinguish fixed objects from scrollable ones:

Now when you scroll through your prototype in presentation view, your objects will be fixed to their position while the rest of the frame scrolls:

Preserve scroll position

Let’s talk about an advanced scrolling technique that can be useful in order to create a realistic user experience for stakeholders. In Figma, you can preserve the scroll position when transitioning between different screens in a prototype.

Without this option enabled, the prototype will load the top of the frame every time you navigate to a different screen. This can potentially cause confusion when presenting your designs and represent an inaccurate experience. Preserving the scroll position will keep the last position when switching screens, whether you’ve scrolled horizontally or vertically.

To see how the Preserve scroll position option works, let’s walk through an example.

Example of preserving scroll position

For this example, we want to show the interaction of a card within a carousel changing state upon being clicked. Frame 1 shows the default state of the carousel with all cards unselected. Frame 2 shows one of the cards in a selected state, indicated by its dark border and Quick view button.

The prototype is set up in a way that will transition from Frame 1 to Frame 2 upon clicking the fourth card in the carousel:

In the Interaction details panel, under State management, the Preserve scroll position option remains unchecked:

Without Preserve scroll position checked, Frame 2 will load from the top of the frame once the card is selected, bringing the prototype back to the front of the carousel and preventing the user from experiencing the intended interaction as a result:

Now, let’s check Preserve scroll position to see what happens when the card is selected:

With Preserve scroll position checked, Frame 2 will load from the last scroll position of Frame. 1.

The user is now able to see the intended interaction as a result of selecting the card. By preserving the scroll position, you can elevate your prototypes to communicate realistic interactions to stakeholders:

Animations

Keep in mind that the Preserve scroll position option is only available for certain animations. If Smart Animate is selected, Figma will preserve your scroll position by default. For Instant or Dissolve animations, you will be given the option to preserve your scroll position.

However, for Slide, Push, or Move animations, you will not be given the option to preserve your scroll position.

Prototyping for different devices

More often than not, we need to consider responsive design when designing cross-platform experiences. Being able to communicate your prototypes within the frame of a specific device can be powerful.

For this purpose, Figma provides a wide selection of popular devices to choose from under the Device dropdown in the Prototype panel:

The devices available also correspond with the frame selection in the Design panel so that your screens perfectly fit into the device it was meant for:

After you’ve selected a device, your prototype will automatically scale your designs to fit the device screen in presentation view. Now you’ll be able to present your designs as if they were being shown on a real device!

Conclusion

In conclusion, Figma offers powerful prototyping features that will make your designs shine. Configuring horizontal and vertical overflow scrolling can be easily implemented to communicate various different scenarios.

Additionally, features such as clipping content, fixing object positions, and preserving scroll positions can ensure that your designs represent realistic user interactions when presenting them to stakeholders.

With Figma’s prototyping feature, you can also present your designs on different devices. Whether you are a professional designer or just getting started, these features can greatly improve your prototypes and help you present more polished designs.

LogRocket: Analytics that give you UX insights without the need for interviews

LogRocket lets you replay users’ product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.

See how design choices, interactions, and issues affect your users — try LogRocket today.

Как делать прототипы в Figma: кнопки, прокрутка и поп-апы

Рассказываем, как сделать прототип интерфейса в Figma, чтобы показать его клиенту, разработчику или арт-директору.

Кажется, что без программистов собрать из макета рабочий прототип невозможно. На самом деле это не так — в Figma предусмотрена функция прототипирования, которая поможет вам «завести» приложение и отловить все ошибки в сценариях до передачи макетов в разработку.

Рассказываем, как превратить ваши картинки из Figma в полноценный прототип — с рабочими кнопками, прокруткой и переключателями.

Интерфейс для прототипирования

На панели настроек справа в самом верху есть три вкладки: Design, Prototype и Inspected. Все настройки прототипов находятся в Prototype.

Основные настройки прототипов

Device — выбор устройства, внутри которого будет отображаться прототип. От этой настройки зависит не только то, как будет выглядеть косметическая рамка, но и плавность анимации прокрутки:

Background — цвет фона.

Flows — здесь будут ваши прототипы, на одном макете их может быть несколько.

Чтобы открыть настройки конкретного экрана, нужно просто нажать на любой фрейм, который вы хотите превратить в прототип. Об этом мы поэтапно расскажем ниже.

Кнопки и навигация

• Перейдите во вкладку Prototype.
• Выделите любой фрейм на макете. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму.
• Чтобы сделать кнопку Назад, выберите любой фрейм и на вкладке Prototype нажмите на плюсик напротив слова Interactions. В первом поле укажите Tap, а во втором — Back.
• Чтобы запустить прототип, нажмите на синюю кнопку .

Прокрутка

• Перейдите во вкладку Prototype.
• Выделите фрейм, в котором нужна прокрутка. Чтобы она работала, высота вашего фрейма должна быть больше высоты экрана устройства.
• На вкладке Prototype в пункте Overflow scrolling выберите нужный формат прокрутки — горизонтальный, вертикальный или общий.
• Чтобы зафиксировать верхнюю и нижнюю панель приложения, перейдите на вкладку Design и в блоке Constraints нажмите галочку напротив Fix position when scrolling.
• Чтобы запустить нужный экран прототипа, зажмите кнопку и перетащите её к нужному экрану, а затем нажмите на неё.

Всплывающие окна

Такие окна нередко встречаются в интерфейсах — обычно они помогают пользователю понять устройство приложения. Чтобы немного усложнить задачу, сделайте всплывающее окно изменяемым по клику.

Как настроить поп-ап

• Перейдите во вкладку Prototype.
• Выделите фрейм, по нажатию на который должен появиться поп-ап. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму, который будет выполнять функцию поп-апа.
• В появившемся окне Interaction details вместо Navigate to выберите Open overlay.
• Выберите ваш поп-ап, нажмите на плюсик напротив слова Interaction, затем — на появившийся пункт и в окне Interaction details вместо None выберите Swap overlay.
• В появившемся поле в том же окне вместо None выберите дополнительный поп-ап.
• Чтобы проверить прототип, перетащите кнопку на нужный фрейм и нажмите на неё.

Готово. Теперь у вас есть поп-ап, который открывается после нажатия на кнопку. А если нажать на него, он поменяется.

Внутренние ссылки

Часто в навигационной панели может понадобиться ссылаться на внутренние модули, например на блок «О компании». В прототип можно добавить и это по примеру простых кнопок.

Как сделать внутренние ссылки

• Перейдите во вкладку Prototype.
• В основном фрейме с экраном приложения выделите другой, по нажатии на который нужно прокрутить страницу. На одной из его сторон появится кружок — зажмите его и тяните к другому фрейму внутри основного.
• В появившемся окне укажите отступ сверху, чтобы экран не прокручивался «впритык».
• Чтобы проверить прототип, перетащите кнопку на нужный фрейм и нажмите на неё.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Больше о Figma

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Figma с нуля до PRO

Вы освоите самую популярную программу для веб-дизайна на профессиональном уровне. Научитесь создавать интерактивные прототипы, передавать макеты разработчикам и экономить время на рутинных задачах.

Interactions in Figma — Horizontal and Vertical Scrolling

Most mobile apps will have horizontal scroll bars. Let’s learn how to create horizontal and vertical scrolling in Figma within minutes.

Scrolling animations:

Vertical scrolling is the most used type of scrolling, and it has become more convenient and natural. In some scenarios, designs have horizontal scrolling mainly to represent secondary contents. Horizontal scrolling can show more content under a single category, especially on mobiles.

Let’s learn how to achieve vertical and horizontal scrolling in the Figma prototype.

Horizontal Scrolling:

To achieve scrolling, you need content that can overflow the container or frame. For example, if you have cards horizontally, there must be a frame that can clip the content.

Step 1: To achieve horizontal scrolling, group your content into a frame and ensure your frame’s width is less than the entire content. In the below image, you can see that the frame’s width is less than the whole set of cards placed inside the frame.

Note: Please make sure that you have some padding on the left and right sides of the frame. If there is no right padding, the space after the last card might not be present in the prototype.

Step 2: Click the frame and go to the prototype panel. You can able to find the overflow scrolling field. Here, you can able to select the type of scrolling you need. Here, you can choose horizontal scrolling.

Vertical Scrolling:

In most cases, vertical scrolling is used to scroll the entire content on the artboard. Scrolling the whole artboard can be achieved differently. You don’t need an extra frame to group all the contents. Instead, the artboard itself acts as a frame that can clip the content inside it and enable scrolling.

• If you’ve selected a device for prototyping, vertical scrolling is achieved automatically. Figma can wrap the artboard inside the device mockup, and if the content is overflowing, it automatically enables vertical scrolling.

• If you don’t wish to select any device mockup for prototyping, you can reduce the artboard height and choose vertical scrolling in the overflow scrolling option.
  Note: Hold cmd to reduce the height of the artboard.
• Usually, having a separate container with vertical scrolling inside the artboard is not advised and might not suit well for user experience. If you are still looking to achieve, you can have a separate frame inside the artboard and select the vertical scrolling option in the prototype panel.

Can we have both vertical and horizontal scrolling?

YES, you can. It’s more similar to how you do horizontal or vertical scrolling. Select horizontal and vertical scrolling options in the prototype panel.

I hope you learned to make horizontal and vertical scrolling for your prototyping. To learn more about components, design systems, and Figma as a tool, check this list of blogs.