Чтобы сделать эффект стекла в Фигме, выделите слой и нажмите плюс в разделе Effects на правой панели. В выпадающем списке выберите Glass, затем снизьте непрозрачность заливки слоя ниже 100 %: при сплошной заливке стекла не видно. Силу размытия, преломление на краю и блик настраивают в меню Effect settings. Старый способ тоже работает: Background blur и полупрозрачная белая заливка дают матовую плашку.
Ниже разберём оба способа, ползунки Glass, размытие картинки и краёв фото, ошибки, из-за которых стекло не видно, и перенос эффекта в CSS. Если редактор вам пока незнаком, начните с обзора возможностей Figma.
CheckroiПодборка курсов по Figma356 курсов • 56 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Как сделать эффект стекла в Фигме через Glass
Путь взят из справки Figma об эффектах. Интерфейс у редактора английский, официального перевода нет, поэтому названия пунктов приводим как в программе. Подробнее в статье о том, можно ли сделать Figma на русском.
- Положите под будущее стекло что-нибудь яркое: фото, градиент или цветные круги. На ровном белом фоне эффект почти незаметен.
- Нарисуйте поверх прямоугольник или фрейм и скруглите углы.
- Справа в разделе Effects нажмите плюс.
- В выпадающем списке выберите Glass.
- В разделе Fill снизьте непрозрачность заливки, например до 10–30 %.
- Откройте Effect settings и подвигайте ползунки Frost, Refraction и Depth, пока край не начнёт преломлять фон.
Стекло не появится на слое со 100 % заливки. В справке так и сказано: Glass will not be visible on objects with a fill set to 100% opacity. Если после шага 4 на холсте ничего не изменилось, первым делом проверьте заливку.
Glass можно поставить на любой тип слоя, но только один на слой. Эффекты меняют только с правом редактирования: у файла, открытого по ссылке на просмотр, раздел Effects не отредактировать.
Что делают ползунки Glass
Описания параметров переведены из справки Figma. Колонку «С чего начать» мы заполнили по своему опыту работы с макетами, это не рекомендация вендора.
| Параметр | Что меняет | С чего начать |
|---|---|---|
| Light angle | направление, с которого на объект падает свет | свет сверху слева, как у системных окон |
| Light intensity | яркость этого света | слабый блик, иначе край выглядит пластиковым |
| Refraction | силу оптического искажения вдоль изогнутого края | умеренно, чтобы фон на краю плыл, но читался |
| Depth | насколько изогнутый край заходит внутрь от границы объекта; чем выше, тем объект выпуклее | небольшое значение для плоской карточки, побольше для круглой кнопки |
| Dispersion | силу разложения цвета на краю; чем выше, тем заметнее радуга | около нуля в интерфейсе, радуга отвлекает от текста |
| Frost | сколько размытия фона есть на стекле | столько, чтобы текст на плашке читался |
| Splay | насколько свет растекается по стеклу | подбирать в паре с Light intensity |
Если вы видели «жидкое стекло» в iOS 26, это тот же приём. В справке Figma написано, что UI-кит Apple для iOS и iPadOS 26 моделирует вид Liquid Glass как раз эффектом Glass. Готовые настройки удобно подсмотреть в этом ките.
Канал основателя Checkroi Вани Буявца3 800 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяМатовое стекло через Background blur
До появления Glass стекломорфизм в Фигме делали размытием фона. В режиме Uniform у него одна настройка, сила размытия. Берите его, когда нужно матовое стекло без преломления на краях:
- Выделите плашку поверх яркого фона.
- В разделе Effects нажмите плюс. В выпадающем списке выберите Background blur.
- Откройте Effect settings и задайте силу размытия.
- В разделе Fill поставьте белую заливку и снизьте её непрозрачность.
Непрозрачность заливки должна быть от 0,1 до 99,99 %. Это порог из справки: при 100 % размытие фона не видно совсем.
Путают тут две настройки. Прозрачность задают в разделе Fill, у заливки. Ползунок непрозрачности всего слоя для этого не нужен: он делает бледнее всю плашку вместе с текстом.
У Background blur два режима. Uniform размывает фон одинаково по всей площади. Progressive позволяет задать, где размытие начинается и где кончается, его силу и направление. Плавное размытие под шапкой приложения делают как раз вторым режимом.
Если под плашкой ровная заливка одного цвета, размывать нечего, и Background blur ничего не покажет. Проверяйте эффект на фото или градиенте.
Если стекло нужно на готовой фотографии, а не в макете интерфейса, тот же приём делают в Фотошопе фильтрами размытия. Как это устроено, есть в статье о том, как сделать размытие в Фотошопе.
Как сделать стекло реалистичнее: обводка, блик, шум
Одно размытие даёт полупрозрачную плашку. Стеклом она становится, когда появляется край и свет. Здесь наш набор приёмов для обоих способов:
- Обводка. Тонкая белая обводка в 1 px с непрозрачностью 30–50 % рисует грань стекла. Для объёма сделайте обводку градиентной: светлой сверху и почти прозрачной снизу. Как настроить переход цвета, есть в статье о том, как сделать градиент в Фигме.
- Градиент в заливке. Белый сверху с непрозрачностью 25 % и белый снизу с 10 % дают перепад света по высоте плашки, как у настоящего стекла.
- Внутренняя тень. Светлая Inner shadow по верхнему краю имитирует блик.
- Тень снаружи. Мягкая Drop shadow отрывает карточку от фона. Красьте её в цвет фона: чёрная тень под светлым стеклом ложится грязным пятном.
- Шум. Эффект Noise с малой плотностью даёт зерно, как у настоящего матового стекла. По справке Figma на объект можно добавить не больше двух эффектов Noise.
Порядок эффектов в списке влияет на результат: Figma рисует их по слоям, и размытие фона и стекло всегда идут нижним слоем. Перетаскивать их выше бесполезно. А вот порядок Layer blur, Noise и Texture между собой на картинку влияет.
Пример: стеклянная карточка с нуля
Ниже наши значения для карточки, которая потом без потерь переносится в вёрстку. С них удобно начать, но под тёмный фон цифры придётся подвинуть.
- Фон: фрейм 600 × 400 px с ярким градиентом и жёлтым кругом в углу, чтобы стеклу было что размывать.
- Карточка: прямоугольник 300 × 180 px, скругление углов 24 px.
- Заливка: белый цвет, непрозрачность 20 %.
- Эффект: Background blur в режиме Uniform, сила 16.
- Обводка: внутренняя, 1 px, белый с непрозрачностью 40 %.
- Текст: тёмный, не тоньше Regular, проверка контраста по самому светлому месту фона.
Эти же цифры стоят в CSS-примере ниже, поэтому макет и вёрстка совпадут. Нужен вариант с преломлением края? Продублируйте карточку, снимите с копии Background blur и поставьте Glass. Два эффекта на одном слое, напомним, не уживаются.
Такие карточки собирают на первых же учебных проектах. Если хочется разбирать макеты с наставником, сравните онлайн-курсы по Figma по длительности и цене.
Стекло на тексте и иконках
Glass, по справке Figma, ставится на слой любого типа, значит, и на текст. На тонком шрифте преломление съедает буквы, поэтому берите крупный жирный заголовок или толстую иконку. Заливку текста так же снижайте ниже 100 %, иначе стекла не будет видно.
Как размыть картинку, фото или края в Фигме
Когда нужно размыть саму картинку, а не то, что под ней, берите Layer blur. Он размывает содержимое слоя, к которому применён.
- Выделите фото на холсте. Если картинка ещё не в макете, вот как вставить картинку в Фигму.
- В разделе Effects нажмите плюс и выберите Layer blur.
- В Effect settings задайте силу размытия.
Режимы те же: Uniform размывает фото целиком, Progressive от чёткого края к размытому. Вторым режимом удобно размыть фото снизу, чтобы на нём читалась подпись.
Размыть только края фото можно через копию:
- Продублируйте фото, на нижнюю копию поставьте Layer blur, а верхнюю обрежьте до центральной части кадра. Края возьмутся с нижней размытой копии.
- Чтобы граница между копиями не бросалась в глаза, поставьте на верхнюю слабый Layer blur в режиме Progressive. Как кадрировать рамкой и по контуру, есть в статье о том, как обрезать картинку в Фигме.
Скрыть номер телефона или фамилию на скриншоте тоже можно размытием. В справке Figma среди задач Layer blur прямо названо скрытие информации, а Background blur, по той же справке, можно использовать, чтобы закрыть текст или личные данные на скриншоте. Только проверьте сильным размытием: слабое не всегда прячет цифры.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 800 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналGlass или Background blur: что выбрать
Оба эффекта размывают фон, но вместе на одном слое не работают. По справке Figma, если поставить оба, отрисуется только тот, что встретится первым.
| Задача | Glass | Background blur |
|---|---|---|
| Преломление и блик на краю | есть: Refraction, Depth, Light | нет, только размытие |
| Плавное размытие от края к краю | в настройках нет | есть, режим Progressive |
| Экспорт в SVG | не поддерживается, нужен PNG | в справке ограничения нет |
| Сайт в Figma Sites | не поддерживается | в справке ограничения нет |
| Стекло поверх стекла | нижнее стекло не учитывается при отрисовке верхнего | другие размытия фона Figma игнорирует, а не умножает |
| Перенос в вёрстку | одной строкой CSS не повторить | повторяется свойством backdrop-filter |
Наше правило: для интерфейса, который пойдёт в разработку, берите Background blur. Glass хорош для промо-баннеров, обложек и концептов под iOS 26, которые выгружаются картинкой.
Есть ещё одна тонкость из справки. Объект с Background blur, положенный поверх стеклянного, не даст стеклу отрисоваться. Наоборот, стекло поверх размытия фона рисуется нормально.
Почему эффект стекла не работает: частые ошибки
| Что видно | Почему | Что сделать |
|---|---|---|
| Эффект добавлен, а слой не изменился | заливка слоя стоит на 100 % | снизьте непрозрачность заливки в разделе Fill |
| Плашка побледнела вместе с текстом | снижена непрозрачность всего слоя, а не заливки | верните слою 100 %, прозрачность задайте в Fill |
| Размытия не видно, хотя заливка полупрозрачная | под плашкой ровный одноцветный фон | подложите фото, градиент или цветные пятна |
| Включён Glass, но стекла нет | на том же слое стоит ещё и Background blur | оставьте один эффект |
| Стекло пропало в экспорте | выгрузили в SVG | экспортируйте в PNG |
| Файл тормозит | размытий фона на холсте слишком много | временно скройте часть эффектов значком видимости |
Последний пункт тоже из справки: размытие фона Figma называет обычно самым медленным в отрисовке эффектом. Готовый макет со стеклом удобнее выгружать в PNG, как выбрать формат и масштаб, есть в статье о том, как сохранить проект в Фигме.
Как перенести стекло в вёрстку
В CSS размытие фона за элементом делает свойство backdrop-filter. По справочнику MDN, чтобы увидеть эффект, элемент или его фон должны быть хотя бы частично прозрачными. Это то же правило, что и с заливкой в Фигме. Вот карточка, которую мы проверили в Chrome:
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 24px;
}Строку с префиксом -webkit- мы оставили для старых браузеров: по MDN свойство стало Baseline только в 2024 году. Если про сами стили пока мало знаете, начните со статьи что такое CSS.
С Glass сложнее. Преломление, глубину края и радугу по краю свойство backdrop-filter не повторит: оно умеет размытие и цветовые фильтры. Поэтому в макет для разработки кладите вариант на Background blur, а Glass оставляйте для картинок.
Проверьте контраст текста на стекле. Фон под плашкой меняется, и текст, читаемый на одном фото, пропадает на другом. Критерий 1.4.3 стандарта доступности WCAG 2.2 задаёт контраст не ниже 4,5:1 для обычного текста и 3:1 для крупного. Проверяйте по самому светлому и самому тёмному месту фона под плашкой.
Стеклянные плашки, карточки и меню в макетах собирает дизайнер интерфейсов. Что ещё входит в его работу и сколько он получает, рассказали в статье о том, кто такой UI-дизайнер.
Где освоить Figma системно
Эффект стекла настраивается за пару минут, а вот чувство композиции, цвета и сетки приходит с практикой и обратной связью. Если хотите собирать интерфейсы уверенно, посмотрите курсы по Figma в каталоге Checkroi: там можно сравнить программы по длительности, цене и формату.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Основы дизайна в Figma Перейти на сайт курса |  Bonnie & Slide | 42 800 ₽ | 2366 ₽/мес. | 4 недели | Обзор курса |
| Figma 2.0 Перейти на сайт курса |  Skillbox | 29 394 ₽ | 4899 ₽/мес. | 2 месяца | Обзор курса |
| Figma с нуля до PRO Перейти на сайт курса |  Академия Синергия | 31 836 ₽ | 2653 ₽/мес. | 2 месяца | Обзор курса |
| Figma с нуля до PRO Перейти на сайт курса | Skillbox | 39 334 ₽ | 1091 ₽/мес. | 2 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по Figma
