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

Добавил пользователь Дмитрий К.
Обновлено: 09.09.2024

Команда Figma говорит — скажите прощай платной подписке InVision.

Выбор устройства

iPhone: X, 8, 8 Plus, SE;
Google Pixel: 2, 2XL;
Google Nexus 5x;
iPad: Mini, 9.7";
iPad Pro: 10,5", 12,9",;
Surface Pro 4;
Apple Watch: 42mm, 38mm;
Custom size – позвояляет выбрать границы отображаемой зоны без какой-либо визуальной рамки в виде девайса. iPad, Apple Watch, Surface, Google Pixel, Google Nexus и их версии.

Анимация

Теперь можно устанавливать следующие настройки анимации смены макетов (Transition):

Behavior (Поведение) – каким образом будет происходить смена одного макета на другой:

Duration – продолжительность анимации в милисекундах (ms).

Direction – направление в которое будет двигаться объект при возникновении.

Easing - эта настройка позволяет указать ускорение и замедление во время движения с помощью следующих параметров:

Ease In — медленное движение в начале, постепенно ускоряясь;
Ease Out — быстрое начало движения с постепенным замедлением;
Ease In and Out — медленное начало, ускорение движения к середине, а затем постепенное замедление.

Scrolling - настройки прокрутки

Стили

Это то, чего действительно нехватало Figma для полноценной работы дизайнера. С этой функций очень просто создавать и изменять для всей дизайн системы проекта. Изменил в одном месте — изменилось везде, где применен этот стиль.

Теперь каждой группе свойств можно задавать стили. Отдельные стили для:

заливок (Fill);
текста (Text);
эффектов (Effects);
рамок (Stroke);
сеток (Layout Grid) (можно создать несколько сеток одновременно и объединить их в один стиль).

Организация

Повились дополнительные настройки для управления уровнями доступа. Теперь можно разделить команду на разные подразделения имеющие разные настройки.

Комментарии • 94

ВНИМАНИЕ! Тут раскрыл более подробнее и понятнее, как делать скролл. Посмотрите это видео:

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

У меня синдром асбергера из-за чего мне невозможно выполнять работу где требуется как-то взаимодействовать с людьми, и очень бедная семья чтобы позволить мне хоть какое-то обучение, а такие уроки как у тебя дают надежду и уверенность что я не пропаду. Спасибо тебе большое за твои труды.

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

@Отличный Дизайнер конечно. Я могу провести лекцию или дать ответы (видео или по скайпу) на ваши вопросы.

Напишите в телеграм или инстаграм.

@Хроники веб-дизайнера Спасибо, я сумел путем проб и ошибок сделать. Был бы рад, если бы вы за плату помогли мне с рядом вопросов. Могу по этому поводу написать вам?

Понял. Извиняюсь, т.к. только начинал и не все мог продумать) Если есть вопросы - напишите мне в телеграм - я все покажу индивидуально)

Я работаю в Фигме и объяснение как раз то что надо, не пришлось проматывать азы. Большое спасибо! Не знала, что Unsplash на несколько блоков сразу может фото добавить))))

Спасибо!)
Уже записал видео где более понятно объяснил) скоро опубликую)

Шикарная фича! Как раз недавно задумывался, как что-то подобное можно сделать)

Клиенты тоже в восторге от нее)

спасибо, полезно. Вроде все сделала пошагово как в уроке. даже нашла урок от другого автора. Но у меня скролл в презентации не работает. Какие могут быть причины?

Не знаю. Что-то не сделал или не ограничила площадь фрейма. Скинь в телеграм ссылку на проект - гляну)

Спасибо, быстро, то что нужно. Те, кто сразу не поняли урок, наверное просто мало в фигме работали

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

Так просто это не объяснить. Реализовать можно, но описать - сложно)

@Хроники веб-дизайнера Объясню подробнее: на экране карта (например google maps). На карте стоят 5 меток (например всех продуктовых магазинов поблизости). По умолчанию уже выбрана какая-либо метка.
Снизу описание этих магазинов (каждый в своей карточке и эти карточки скролятся горизонтально)
Но при выборе другой метки (метки другого магазина) нижняя строка с карточками должна самостоятельно проскролиться до той, которая привязана к этой метке.
Вопрос такой: как назначить экрану, в котором уже выбрана следующая метка, отображение следующей карточки? (при том, что пользователь должен видеть и слева и справа от действующей карточки другие карточки, привязанные к другим меткам на карте.

В видео показано как сделать горизонтальный скролл видя на главном экране самую первую карточку ( то есть с которой начинается прокрутка - крайняя правая)
А мне нужно на главном экране показать, допустим вторую

где момент как кучка прямоуголников которые программой определяються как прямоугольники резко стали опредяться программой как фрейм?

Lana I

Спасибо, все очень понятно

Test Test

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

Виктория Романова

оочень полезный совет)

Dasha Malikova

Выключаю clip content, но ничего не изменяется, подскажи, пожалуйста, что сделать (

Aleksandr Fest

доброго времени суток ! после всех проделанных манипуляций при просмотре отображаются только объекты скрола ,остальная часть страницы пустая
что я делаю не так?)

Isuno

Спасибо, быстро, то что нужно. Те, кто сразу не поняли урок, наверное просто мало в фигме работали

Dmitry Kutsenko

Смотрю этот ролик с твоего потока по копировнию сайтов) Спасибо!

Анечка Степанова

Искандер Абдуллин

Очень быстро и не понятнл

Bradford V

А чтобы прокрутить направо при нажатии на стрелку вправо например нужно отдельный фрейм делать? или в одном фрейме можно . Если в одном то как?

Кртстина Шаханова

Очень нужна данная функция в проекте, но ни как не получается. Можно где-нибудь более подробно просмотреть?

Zoferi. V

Разве в браузере так скролят? Для десктопа это не подойдет

Alina Abdullina

почему у меня монтажная область раздвигается вместе с картинками?

CHELOVEK89

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

Чтобы в разы ускорить разработку - использование клавиатурных сокращений обязательно.

Найти все клавиатурные сокращения вы можете, нажав в левом нижнем углу на знак вопроса и, перейдя во вкладку “Keyboard Shortcuts”. Или вы можете использовать клавиатурное сокращение “Ctrl + Shift + ?”.

Ниже я привел скриншоты с разделами, а также с переводом.

Вкладка №1 (Основные параметры)

Вкладка №2 (Инструменты)

Столбец №1:

1 - Стандартный инструмент выделения
2 - Инструмент создания фреймов
3 - Инструмент “Перо”
4 - Инструмент “Карандаш” (Как “Перо” только рисовать можно любые формы)

Столбец №2:

1 - Инструмент “Текст”
2 - Инструмент “Прямоугольник”
3 - Инстурмент “Элипс”
4 - Инструмент “Линия”
5 - Инструмент “Стрелка”

Столбец №3:

1 - Добавить или показать комментарии к текущему макету
2 - Инструмент “Пипетка”
3 - Инструмент “Нож” (Вырезает область в виде картинки)

Вкладка №3 (Просмотр):

Столбец №1:

1 - Показать/Скрыть “Линейки”
2 - Показать/Скрыть “Обводки всех элементов”
3 - Показать/Скрыть “Пиксельный просмотр”

Столбец №2:

1 - Показать/Скрыть “Сетку”
2 - Показать/Скрыть “Пиксельную сетку”

Столбец №3:

1 - Показать/Скрыть “Боковые панели”
2 - Показать/Скрыть “Курсоры других пользователей”
3 - Показать/Скрыть “Только слои”
4 - Показать/Скрыть “Только компоненты”
5 - Показать/Скрыть “Многопользовательская библиотека”

Вкладка №4 (Масштабирование):

Столбец №1:

1 - Перемещение по рабочему пространству
2 - Увеличение масштаба
3 - Уменьшение масштаба
4 - Включить отображение 1:1 к экрану

Столбец №2:

1 - Масштабировать все рабочее пространство
2 - Масштабировать выделенный элемент
3 - Масштабировать предыдущий фрейм
4 - Масштабировать следующий фрейм

Столбец №3:

1 - Предыдущая страница
2 - Следующая страница
3 - Предыдущий фрейм
4 - Следующий фрейм

Вкладка №5 (Инструмент “Текст”):

Столбец №1:

1 - Выделить жирным
2 - Выделить курсивом
3 - Подчеркнуть
4 - Вставить и сопоставить элемент

Столбец №2:

1 - Выровнять текст по левому краю
2 - Выровнять текст по центру
3 - Выровнять текст по правому краю
4 - Выровнять текст по ширине

Столбец №3:

1 - Изменение размера текста
2 - Изменение расстояния между символами
3 - Изменение расстояния между строками

Вкладка №6 (Векторные изображения):

Столбец №1:

1 - Перо
2 - Карандаш
3 - Заливка

Столбец №2:

1 - Удалить заливку
2 - Удалить обводку
3 - Поменять местами обводку и заливку
4 - Преобразовать в кривые
5 - Также преобразование в кривые (но функция отличается, я ей не пользуюсь)

Столбец №3:

Работа с точками векторных изображений (Эти функции я не использую)

Вкладка №7 (Выделение):

Столбец №1:

1 - Выделить все
2 - Выделить все, кроме…
3 - Отменить выделение
4 - Выделение слоев, которые находятся под другими слоями
5 - Выделение слоя на боковой панели

Столбец №2:

1 - Выделить дочерний элемент
2 - Выделить родительский элемент
3 - Выделить следующий по порядку элемент
4 - Выделить предыдущий по порядку элемент

Столбец №3:

1 - Сгруппировать элементы
2 - Разгруппировать элементы
3 - Преобразовать в фрейм
4 - Показать/Скрыть элемент
5 - Заблокировать/Разблокировать элемент

Вкладка №8 (Курсор):

Столбец №1:

1 - Выделение элемент при клике
2 - Копирование элемент при движении

Столбец №2:

1 - Выделение слоев, которые находятся под другими слоями
2 - Показывается иерархия выделенного элемента

Столбец №3:

1 - Изменение размера относительно центра элемента
2 - Изменение размер пропорционально
3 - Перемещение во время изменения размеров элемента

Вкладка №9 (Редактирование):

Столбец №1:

1 - Копировать
2 - Вырезать
3 - Вставить
4 - Вставить поверх выделенного элемента

Столбец №2:

1 - Создание копии
2 - Переименование
3 - Экспорт элемента

Столбец №3:

1 - Копировать свойства элемента
2 - Вставить скопированные свойства

Вкладка №10 (Трансформирование):

Столбец №1:

1 - Отразить по горизонтали
2 - Отразить по вертикали
3 - Создать маску

Столбец №2:

1 - Включить редактирование векторных объектов или изображений
2 - Вставить изображение
3 - Обрезать изображение

Столбец №3:

1 - Задать прозрачность элементу - 10%
2 - 50%
3 - 100%

Вкладка №11 (Выравнивание):

Столбец №1:

1 - Переместить на 1 уровень ближе к переднему плану
2 - Переместить на 1 уровень дальше от переднего плана
3 - Переместить на передний план
4 - Переместить на задний план

Столбец №2:

1 - Выровнять по левой стороне
2 - Выровнять по правой стороне
3 - Выровнять по верхней стороне
4 - Выровнять по нижней стороне

Столбец №3:

1 - Выровнять согласно горизонтальной линии элементов
2 - Выровнять согласно вертикальной линии элементов
3 - Не пользуюсь функцией
4 - Выравнивание с распределением горизонтального пространства
5 - Выравнивание с распределением вертикального пространства

Вкладка №12 (Компоненты):

Также очень важный вопрос: как отменить действие в фигма? Для того чтобы отменить действие в Figma - нужно всего лишь нажать клавиатурное сокращение "Ctrl + Z". И в зависимости от количества нажатий, вы отмените предыдущие действия.

Важно! Когда вы изучили все клавиатурные сокращения в Figma - рекомендую для закрепления отработать их на реальных макетах. По этой и этой ссылкам вы можете найти готовые макеты для оттачивания своих навыков.

Читайте также: