Эффект увеличения через «лупу» — простой и красивый приём, который помогает выделить нужный фрагмент текста или изображения. Такой приём часто используют в презентациях, интерфейсах и лендингах. Если вы уже работали с импорта макетов (например, через инструкцию как импортировать любой сайт в Figma), то понимать структуру объектов и масок вам будет ещё легче.
В этой статье разберём, как повторить эффект лупы в Figma всего за несколько шагов.
Шаг 1. Добавляем текст и круг
Напишите нужный текст и разместите поверх него круг.
Круг — это основа будущего увеличения.
Если вы используете готовые UI-блоки или сетки, удобнее всего брать их из каталога макетов сайтов в Figma — там уже всё собрано аккуратно и структурировано.
Шаг 2. Настраиваем круг
Сделайте цвет круга таким же, как фон макета.
Затем добавьте обводку — она создаст эффект края лупы.
Шаг 3. Добавляем внутренние тени (Inner shadow)
Чтобы круг выглядел мягким и объёмным, используем внутренние тени.
Настройки тени:
- X: -50
- Y: -50
- Blur: 40
- Цвет: #030304
- Прозрачность: 50%
Настройки света:
- X: 50
- Y: 50
- Blur: 40
- Цвет: #FFFFFF
- Прозрачность: 40%
Так мы получаем тот самый красивый «глянцевый» объём.
Шаг 4. Дублируем круг и текст
Создаём два дубликата:
- текста,
- круга.
Дубликат текста в слоях помещаем выше всех, чтобы он оказался поверх круга.
Если вы раньше редактировали чужие макеты (например, по гиду как редактировать чужие макеты в Figma), то принцип работы со слоями вам будет знаком.
Шаг 5. Увеличиваем текст
Выбираем инструмент Scale (горячая клавиша K)
и увеличиваем дубликат текста до нужного размера, словно лупа его реально увеличивает.
Шаг 6. Создаём аккуратную маску
Чтобы текст не заходил на обводку:
- Создаём маску из круга.
- Выбираем круг внутри этой маски.
- С зажатым Alt + Shift уменьшаем круг до идеального попадания.
Так вы получите идеальную ровную область увеличения.
Шаг 7. Готово!
У вас получился аккуратный и реалистичный эффект лупы.
Можно добавить ручку, дополнительные 3D-элементы или встроить эффект в презентацию или UI-макет.
Чтобы упростить дальнейшую работу в Figma, можете сохранять такие элементы как компоненты или сразу добавлять их в свою дизайн-систему.
