Unity Figma Gradients

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

Установка через Unity Package Manager / Add package from git URL: https://github.com/Nox7atra/Unity-Figma-Gradients.git?path=/Assets/Figma%20Gradients

Для использования необходимо добавить компонент соответствующего типа градиента на RectTransform внутри канваса.

На данный момент есть 4 вида градиентов:

UIFigmaGradientLinearDrawer - линейный градиент

UIFigmaGradientAngularDrawer - конический градиент (не полная поддержка)

UIFigmaGradientRadialDrawer - сферический градиент

UIFigmaGradinetDiamondDrawer - ромбовый градиент

Импорт из CSS

Для UIFigmaGradientLinearDrawer есть специальная функция для импорта параметров с помощью CSS из Figma. Для этого необходимо скопировать строку из поля background:

Пример строки: linear-gradient(0deg, #FECC66 0%, #F83062 100%);

Данная функция для остальных типов градиентов в разработке.

Полезные поля классов:

Gradient Resolution - так как градиенты работают через генерацию текстуры размера 1хGradientResolution то данное поле позволяет подобрать минимальное подходящее разрешение для вашего градиента.

Статья с описанием принципов работы: https://habr.com/ru/post/537256/

Unity Figma Gradients - EN

A library that implements Figma gradients in the UI in Unity using shaders to reduce build weight and avoid compression artifacts on gradients.

To use it, you need to add a component of the appropriate type of gradient to the RectTransform inside the canvas.

There are currently 4 types of gradients:

UIFigmaGradientLinearDrawer - linear gradient

UIFigmaGradientAngularDrawer - conical gradient (not full support)

UIFigmaGradientRadialDrawer - spherical gradient

UIFigmaGradinetDiamondDrawer - diamond gradient

Import from CSS

There is a dedicated function for UIFigmaGradientLinearDrawer to import parameters using CSS from Figma. To do this, copy the line from the background field:

Example line: linear-gradient (0deg, # FECC66 0%, # F83062 100%);

This function is for other types of gradients in development.

Useful class fields:

Gradient Resolution - since gradients work through generating a texture of size 1xGradientResolution, this field allows you to choose the minimum suitable resolution for your gradient.