September 13, 2023

From Figma to WordPress – Quickly Create Simple Backgrounds for Free

Play Video

Ever noticed how a small touch can make a big difference? That’s what we’re about to do with our website’s design. By exporting your design from Figma to WordPress you can transform your site with some nifty background tricks.

Setting the Scene

Imagine a hero image on your website. It looks good, but it could use a little extra something to make it pop. That’s where our Figma background comes into play.

Getting Started with Figma

Here’s how to set the stage:

  1. Set Up a Free Figma Account
    This is where our journey begins.
  2. Add a New Frame
    Choose the desktop size to visualize your design.
  3. Explore the Tools Panel
    For now, we’ll use the ellipse tool to create some shapes.

Designing the Background

Let’s add some color:

  1. Create a few oval shapes and position them.
  2. Choose your colors, in this example, we are using:
    – Blue
    – Pink
    – Teal

Blurring the Background for Effect

To give our background a unique touch:

  1. Select all the shapes.
  2. Navigate to the effects panel.
  3. Apply a layer blur to smudge the colors.
  4. Adjust the blur settings to your preference.

Exporting the Design

Once you’re satisfied:

  1. Group the shapes together.
  2. Export them as an SVG.

Implementing the Design in WordPress

Now, let’s bring our design from Figma to WordPress:

  1. Head over to your WordPress editor.
  2. Find the container where you want the background.
  3. Upload the SVG file.
  4. Adjust its position and size to fit your site perfectly.

Comparing the Before and After

Take a moment to admire your work. The new background should add depth and interest to your design.


Using Figma to create backgrounds is a straightforward process that can elevate your website’s design. And integrating it into WordPress is a breeze.

Tip: “Design is subjective. Trust your instincts and don’t be afraid to experiment.”

Required Resources

Figma Logo
Free Options
Credit to The Admin Bar
The Admin Bar is a resourceful platform dedicated to WordPress. From insightful videos on optimizing your WordPress tech stack to creative hacks for faster web page creation, the channel is a treasure trove for both beginners and advanced WordPress users.
From Figma to WordPress – Quickly Create Simple Backgrounds for Free
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.