Shadows, Gradients, and Other Design Elements
In this section, we'll explore how Monday Hero works with the Figma plug-in.
Here's a list of the information that Monday Hero can process effectively to give you the best results.
Shadow and Blur Effects
You can add blur and shadow effects on Figma to add aesthetics and functionality to your designs. Figma allows you to add drop shadow, inner shadow, layer blur, and background blur effects. You can choose your desired effect with targeted properties and Monday Hero can generate the relevant code for all of them.
![](https://learn.mondayhero.io/~gitbook/image?url=https%3A%2F%2F479678609-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MEfkN8oSQyQ4BaBzwxH-4037006485%252Fuploads%252FL0sU7fdMKcer9KY3Y03B%252FGroup%2520504.png%3Falt%3Dmedia%26token%3Da0add835-bce8-47db-a257-f68177cc441a&width=768&dpr=4&quality=100&sign=b8a780fd&sv=1)
Gradients
Figma has different fill options like linear, radial, angular, and diamond to create the gradient effect. Unfortunately, Monday Hero doesn't support these gradient features. That's why, when you're uploading a design to Monday Hero, please be sure that you only use the 'solid fill' option.
![](https://learn.mondayhero.io/~gitbook/image?url=https%3A%2F%2F479678609-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MEfkN8oSQyQ4BaBzwxH-4037006485%252Fuploads%252Fe0XzwLBZHnZ6d0WudVx6%252FGroup%2520505.png%3Falt%3Dmedia%26token%3D4ae9e45d-67f6-4011-a9f8-02aa39399172&width=768&dpr=4&quality=100&sign=16cd54df&sv=1)
Borders
When you apply borders to an image, you can change its color, weight, distribution, side, and endpoint properties from Figma. With Monday Hero, you can get the relevant code of these properties.
![](https://learn.mondayhero.io/~gitbook/image?url=https%3A%2F%2F479678609-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F-MEfkN8oSQyQ4BaBzwxH-4037006485%252Fuploads%252FQnRTUA1YAaTz6Xgl4nij%252Fimage.png%3Falt%3Dmedia%26token%3Deea66c3e-1d03-43b8-a6fd-6e311b6b12d7&width=768&dpr=4&quality=100&sign=216448e8&sv=1)
Animations
Animations in Figma are not a supported feature in Monday Hero. That's why, please only upload designs with no animation.
Last updated