This is some text inside of a div block.
BF2023
Click to copy
Use this code while checkout for 50% discount for any product or subscription
Time's ticking! This deal will be gone after December 1st
Product Title
0.00
The standard VAT rate may be charged, following the law of your country
Ok
BF2022
Coupon successfully applied
Sorry, the coupon does not exist
You can subscribe to Unlimited Access instead, starting from just $10/mo, and get access to all assets
Please add your email
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Enter your password
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reset Password
Create an account for faster downloads in future
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Subscribe
Please use your real email
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
We are going to send a reset email link to your inbox
Send email
Check your inbox, we have sent you an email with a link
Close
Add a password to your account for faster logins
in future
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Loading
$00.0
Tax
$00.0
Total
$00.0
Thank you for purchasing
Click to download
Go to Profile
Follow us on X (Twitter)

How to create an aqua effect in Figma

July 22, 2023

We’ve recently launched a new version of the Mockup Plugin where we’ve added the ability to transform shapes into various surfaces using neural networks. And one of the most complex styles to configure is the aqua effect.

The model is trained to work with simple vector shapes.

It works with:

  • Large letters
  • Simple logos
  • Basic geometric shapes

It doesn’t work with:

  • Photographs
  • Illustrations
  • Small text

The aqua effect is a complex and temperamental style. It may not handle text well as the neural network will strive to give volume and refractions to the text, which is challenging for fine details. Hence, if given a choice between two images, a simple one (like the one on the left) would yield better results.

To begin, launch the plugin and switch to the AI section. Select the aqua style and initiate the first generation. You may observe that the first generation may not be successful due to significant shape deformation.

As you can see, the first generation is not successful, the shape is too heavily deformed.

To rectify this, access the Advanced setup and slightly augment the shape. The logic behind this function is such that the higher the value you set, the less the effect takes over the style, but the better the original style is preserved. Striking a balance here is crucial, and the optimal slider value always depends on the shape of your original design.

The improvement will be noticeable. The neural network should be able to handle the task and create a beautiful picture.

You’ll notice an improvement in the result. The neural network should be able to create a visually pleasing picture. At this stage, you can experiment further by adjusting Precision and Style. For a more vibrant picture, you can add prompts like: glass, refraction, colorful, and aberration.

After these steps, the result should be visually appealing. Additional style and shape can be added for a richer look.

If you want to make the picture more complex, install the Fig3d plugin. Repaint the letter in white and launch the plugin. Add perspective

[optimize output image]

And then try the generation.

At the very end, don’t forget to first click on ‘enhance’ and then ‘upscale’ to get a 4K image.

The style also works well when layering elements on top of each other. Therefore, I put together this composition.

Here, I made the text semi-transparent and added a circle shape to the background.

After generating your image, you can always further adjust color correction in Figma. To do this, double-click on the image layer.

Experiment and inspire!

More Ideas