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

How to create a Liquid Effect in Figma

August 1, 2023

First of all, you need the basic shape of letter composition. You can draw these shapes manually using the Pen Tool. Alternatively, there are some plugins available that can help simplify the process.

  • Choose a font and type your text.

You can experiment with different font options, but what's more important is the simplicity of the outline, not the shape of the letters. I recommend using sans-serif and display fonts for their simplicity.

  • Flatten text by using Ctrl + E.

The path should be simple; a single character should not have too many points.

Athelas font has too many points, then Bahiana font has a minimum points.

If there are too many points, fix it, by using the “Simplify” plugin. It reduces points and simplifies a vector path. Bear in mind, before using this plugin, split text by letter, using another useful plugin called "Text Splitter". It is important because the "Simplify" plugin attempts to connect all the points into a single curve, which can be inconvenient during letter shapes editing.

Connected path
Splited path
  • Edit the path. Use the path tool to adjust the path for smoother letter shapes. Delete or modify anchor points. Vector edit mode lets you can select, adjust, or change properties of individual points, lines, or entire shapes. When you're editing an object, you can interact with the existing points and the lines between them. You can also use the  Pen tool to plot additional points and manipulate those as well.

To enter vector edit mode:

  • Select a path and press Return / Enter
  • To exit vector edit mode, press Return / Enter again, or click Done in the toolbar.

To access a point’s Bézier handles:

  1. Select a vector network.
  2. Click in the toolbar or press Return / Enter to enter edit mode.
  3. If it is a curve, the handles will already be showing. If it is a corner with no handles, hold ⌘ Command / Control and click the point to show the handles and create a mirrored curve.
  4. Click and drag the handles to adjust the path's curve.

Try to create imperfect forms, unpredictable distortions, and smooth curves. Imagine you are writing with liquid ink on a glossy surface. However, you can still experiment with shape, sharpness of angles, and degree of distortion to achieve extraordinary results.

  • Add letter compositions to artboard and set colors. You can experiment with stylization, such as gradients or shadows, as you wish.
  • Run the "Mockup" plugin and navigate to the "AI Surfaces" feature. Select your composition and choose the "Inflated" style. Adjust your settings accordingly by setting "Precision" to 100% and checking the "Try to preserve colors" box at 100%. Hit “Generate”, until you attain best result. Upscale and Paste in canvas.
Set "Precision" to 100% and "Try to preserve colors" to 100%.
Built-in upscaller, 2048x2048 pixels and 4096x4096 pixels with enhancing.

To remove the background, select the pasted image and run the "Icons8 Background Remover" plugin. The background will be automatically removed. Well done! You can use this compositions to create stunning and stylish posters, shots, posts, stories, landings, and more.

You can also apply adjustments to Images. These work like the filters or settings you'd see in photo editing software. You can apply Image Adjustments via the Image options menu.

More Ideas