Как сделать слайдер реакций в Figma

Шаг 1

• Создаём 4 текстовых слоя (T), с разными словами, которые будут меняться на фоне нашего слайдера.
• Выстраиваем их в столбик с одинаковым расстоянием между слоями.
• Выделяем все тексты и группируем (Ctrl+G).

Шаг 2

• Создаём фрейм (F).
• Во фрейм добавляем прямоугольник и растягиваем его по размерам нашего фрейма.
• В пункте Филл добавляем несколько цветов. У всех, кроме одного, ставим непрозрачность 0%.

Шаг 3

• Переносим группу с текстом во фрейм с прямоугольником и выравниваем по центру.
• Добавляем новый прямоугольник поверх текста с градиентом от непрозрачного к прозрачному.
• Копируем градиенты у прямоугольника и добавляем те же цвета, которые добавляли прямоугольнику на фоне.

Шаг 4

• Добавляем смайлики в наш проект.
• Векторные эмоджи можно взять здесь.

• Размещаем смайлики друг под другом и переносим их во фрейм.

• Также добавляем ещё несколько элементов (маленький текст и шкалу).

Шаг 5

• Дублируем наш фрейм.
• На копии фрейма сдвигаем текст на фоне вверх до следующего слова. Для удобства выравнивания можно воспользоваться направляющими.

• Непрозрачность второго цвета у прямоугольника и градиента ставим 100%, а цвету, который был, задаём непрозрачность 0%.
• Выключаем верхний смайл, и сдвигаем оставшиеся элементы (текст и ползунок).

Шаг 6

• Дублируем наш фрейм.
• На копии фрейма сдвигаем текст на фоне вверх до следующего слова. Для удобства выравнивания можно воспользоваться направляющими.

• Непрозрачность третьего цвета у прямоугольника и градиента ставим 100%, а цвету, который был, задаём непрозрачность 0%.
• Выключаем верхний смайл, и сдвигаем оставшиеся элементы (текст и ползунок).

Шаг 7

Дублируем фрейм и совершаем те же действия, что мы делали в шагах 5 и 6, для оставшихся цветов и смайлов.

Шаг 8

Связываем фреймы по порядку со следующими настройками:


• On Click
• Smart animate
• Slow — 600ms.

Готово!

Теперь ты умеешь создавать красивый слайдер реакций в Figma. Такой слайдер украсит любую форму обратной связи, когда вы собираете фидбек у пользователя.

Рекомендуем ознакомиться:

Анимация параллакс эффекта в Figma

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