Как размыть фото в фигме

Как в Figma сделать направленное размытие текста

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

Иллюстрация: Оля Ежак для Skillbox Media

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

В Figma есть много всяких эффектов, которые помогают дизайнерам сделать по‑быстрому что-то интересное и достаточно качественное для коммерческого проекта. А благодаря плагинам этот функционал редактора можно сильно расширить и работать ещё быстрее.

В этой инструкции рассказываем, как с помощью плагинов Filter / effects и Noise размыть часть текста — часто этот эффект в интернете называют grain text distortion.

Перед выполнением инструкций установите плагины:

Подготовка текста

Сделайте чёрный фрейм и добавьте на него любую надпись — желательно с жирным начертанием semi bold, bold или black.
Нажмите на текстовый слой правой кнопкой мыши, выберите Plugins и нажмите Filter / effects.
В появившемся окне нажмите на плюсик и в выпадающем списке найдите Gaussian blur.
В окне с настройками размытия укажите нужные параметры. Мы сделаем так: Amount посредине, Axis максимально, Angle сместим влево (чтобы размытие было под углом примерно −30 градусов). Делать так, как у нас, необязательно.
Нажмите кнопку Back и затем — Save as new image. У вас на холсте появится новая картинка с заблюренным текстом.

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

Каталог эффектов в Figma, которые помогут сделать ваш проект интереснее.

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

Другие короткие инструкции по Figma

Как сделать эффект параллакса в Figma
Пересечение любых цветов
Анимированный чекбокс
«Пушистый» контур
Анимированный переключатель
Плашка с прозрачным текстом
Анимированный градиент
Объёмный градиент для букв
Объёмная фигура из градиентов

КАК РАЗМЫТЬ ГРАДИЕНТ В ФИГМЕ

Размыть градиент в Figma — действие, которое может пригодиться дизайнеру для создания более мягкого и плавного перехода между цветами в градиенте. Для этого следует выбрать объект с градиентом и применить к нему эффект размытия.

Эффект размытия можно найти в панели «Эффекты» справа от экрана или в контекстном меню объекта. После выбора этого эффекта следует настроить его параметры, например, радиус размытия, направление и интенсивность. Также можно выбрать тип размытия: радиальный или линейный.

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

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

ЛИНИИ В FIGMA. Как сделать пунктирные, волнистые, сплошные — Уроки фигма на русском

Плагина Figma для создания сложных градиентов

Размытие края изображения в фигме

#16 Figma Tutorial: Masks. Как запрозрачить картинку в Фигме. Урок от Sovisart.

Размытие градиентом в Figma

Как создать Mesh Gradient в Figma

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

Как сделать плавный градиент для картинки в Figma

Секреты создания уникальных сайтов: градиенты в дизайне

Тени и размытие в Figma: как настроить

Рассказываем о базовых эффектах и показываем, как за две минуты сделать «матовое стекло».

Иллюстрация: Meery Mary для Skillbox Media

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Базовых эффектов в Figma всего два — тени и размытие. Но с помощью них дизайнеры создают элементы интерфейса, которые очень похожи на реальные аналоги и помогают людям понять, как пользоваться приложением. О том, где найти все эти эффекты и как их настроить, — читайте в нашей инструкции.

Тени

Drop Shadow — внешняя тень, подходит для отделения объекта от фона. Inner Shadow — внутренняя, подходит для создания объёмных объектов:

Чтобы добавить тень, в разделе Effects нажмите на плюсик. По умолчанию Figma добавит обычную тень, но если нажать на надпись Drop Shadow, в выпадающем меню его можно изменить на Inner Shadow.

Базовые настройки у теней одинаковые, но работают они немного по-разному:

Blur — размытие краёв тени.
Spread — размер тени.
X и Y — смещение относительно центра объекта. X — влево и вправо, а Y — вверх и вниз.
Также у тени можно настроить её цвет и непрозрачность.

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

Также у тени можно изменить цвет и режим наложения. Работает это как в Photoshop — в зависимости от режима и цвета тень будет подстраиваться под фон:

Обычно тени используют в интерфейсах, чтобы показать уровни взаимодействия кнопок или сделать их похожими на реальные аналоги. О том, как правильно сделать тени для вашего приложения, читайте в инструкции дизайнера Марии Булиной:

Размытие

В Figma есть два вида размытия: Layer blur и Background blur. Настроить у них можно только уровень размытия, но работает он в этих режимах по-разному.

Чтобы добавить размытие, в разделе Effects нажмите на плюсик. Затем нажмите на надпись Drop Shadow и в выпадающем меню выберите Layer blur или Background blur.

Layer blur просто размывает слой целиком в зависимости от выбранного значения в настройках .

Background blur работает немного хитрее. Если просто указать у него уровень размытия, то ничего не произойдёт. Но если в пункте Fill снизить непрозрачность заливки, то фон под слоем с Background blur будет размыт:

Не путайте непрозрачность слоя (Layer) и заливки (Fill). Если вы снизите непрозрачность слоя, то эффект Background blur работать не будет.

Сочетание эффектов

В разделе Effects можно добавить сколько угодно разных эффектов: например, несколько теней и несколько размытий. Благодаря этому можно добиться интересных результатов. Для примера рассмотрим, как сделать эффект матового стекла.

Добавьте на макет фотографию и поверх неё наложите любую фигуру: круг, квадрат, треугольник.
В настройках эффектов фигуры добавьте тень со следующими настройками: X и Y — 12, Blur — 25, Spread — 2, непрозрачность тени — 25%.
В настройках эффектов фигуры добавьте Background blur с размытием 25.
Снизьте непрозрачность заливки фигуры до 10%.
По желанию можно добавить обводку с непрозрачностью 50%.

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

Подробнее о том, как можно сочетать разные эффекты в Figma, читайте в нашей инструкции по морфизмам в интерфейсах:

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

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

Далее нужно выбрать вкладку «эффекты» и найти в списке нужный эффект размытия. В Figma доступны различные виды размытия, например, размытие движения, радиусное размытие и так далее. Выбирайте тот эффект, который подойдет под ваш дизайн.

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

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

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

Размытие в Фигме

# 23 Как сделать эффект стекла в Figma. Glass Morphism — новый тренд в дизайне интерфейсов.

Figma фишки #1 — Как сделать размытый фон как на iPhone в Figma — Figma tips\u0026tricks Blur background

2 постера за полчаса! Делаем эффект размытого текста в Figma