Руководства›Figma
Figma
Рисуйте встроенным эффектом Glass в Figma, а в продукт ставьте этот пакет. Большинство настроек называются одинаково, поэтому передача сводится к короткому списку значений.
Как пользоваться
Выделите слой, добавьте эффект Glass в панели Effects и снизьте непрозрачность заливки. У каждого слоя свои значения.
Настройки
Это стартовые значения. Движки разные, поэтому проверяйте результат на настоящем фоне и подгоняйте на глаз.
| Figma | Пакет | Как перевести |
|---|---|---|
Light | light | То же значение, в долях. 30% это 0.3. |
Light angle | light-angle | Те же градусы. Проверьте направление на первом элементе. |
Refraction | refraction | То же значение, в долях. |
Depth | depth | Те же пиксели, до 96. |
Dispersion | dispersion | То же значение, в долях. |
Frost | frost | Figma считает в пикселях, пакет от 0 до 1. Начните с пикселей, делённых на 16. |
Splay | splay | Приведите к диапазону от 0 до 1 и подгоните на глаз. |
Fill | tint | Цвет заливки. |
Fill opacity | transparency | Единица минус непрозрачность. 15% это 0.85. |
Corner radius | --glass-radius | Те же пиксели. |
Только в пакете
В Figma нет аналога для bloom, rim, glint, lift и настроек движения. Оставьте значения по умолчанию и подберите их в песочнице.
С Claude
В репозитории для Figma есть скилл для Claude с этой таблицей. Подключите сервер Figma MCP, скопируйте скилл в папку скиллов и попросите Claude перевести фрейм в код.
cp -r skills/edinstvo-glass-figma ~/.claude/skills/Шейдер
Для живой линзы с видом как в пакете есть шейдерный эффект. Добавьте его на фрейм, и он увидит всё, что внутри. Линза двигается ручкой на холсте.
Шейдер видит фрейм как одну плоскую картинку, поэтому не различает объекты. Один эффект это одна линза. Для второй линзы оберните фрейм ещё в один фрейм. В Community шейдера пока нет, его код лежит в том же репозитории.