Design Web Ads in Figma – Stepwise Tutorial!

Web Ads Design

Web ads or standard ads have become omnipresent in this computerized age and it would be a loss for advertisers to not capitalize on them. And it is very critical for web ad design to be attractive otherwise you will only lose money. The more attractive a web ad is the higher chance it has that people will click on that ad and you can then convert that click into your customer.

Figma is one of the most popular designing software out there. It is free web-based software like canva. It is primarily used for designing UI and UX. It is also used mostly in web design. As it is a lightweight software it is also very popular among graphic designers because of its easy-to-use interface. In this tutorial, we are going to design Web Ads in Figma. So let’s start the design.

Web Ads Sizes:

Before getting into Figma you should know the dimension of web ad design. Web ads come in different sizes. Below is the list of popular web ad sizes.

Leaderboard728 × 90 px
Large Rectangle336 × 280 px
Medium Rectangle300 × 250 px
Wide Skyscraper160 × 600 px
Skyscraper120 × 600 px
Button 1120 × 90 px
Button 2120 × 60 px
Microbar88 × 31 px

Web Ads Design in Figma:

Open a new file in Figma.

Web Ads Design
Frame tool

From the left top corner selects the “Frame tool”(it looks like a hashtag).

figma frame Web Ads Design
frame dimensions

Now click on the canvas and draw a rectangle of size of 160px by 600px. This is the dimension for the “Wide Skyscraper” ad. And gave it a dark colour.

Unsplash plugin figma
Unsplash Plugin

Import your image or you can use the free “Unsplash” plugin for Figma. Just right-click and go to “Plugins > Find more plugins” or click on the component tab at the left top.

Web Ads Design
image imported in Figma using Unsplash plugin

Just search for the image you want as I searched for “photography” and I got many image options. Just click on the image you like and it will be imported directly into your Figma.

gradient figma
Web Ads Design
adding gradient

I then placed the image at the bottom of the rectangle and add a gradient above my image. Add gradient using the plus button on the right top as shown in the image. And change the Solid option to linear from the dropdown.

Web Ads Design
text for ad

Now just place the text you want using the text tool or by pressing ” T” as a shortcut on your keyboard into your ad, like I added this text which you can see above.

You can either use the “Register now” button png or just place a rectangle and round its corner and place text inside the rectangle.

Now just simply add your logo at the top and you are done.

Web Ads Design
Final Ad

Leave a Reply

Your email address will not be published.