Figma2WP

Figma2wp - Case Study on Belov Digital Agency
Services

WordPress development

Gutenberg blocks

Easy Digital Downloads

Client

BDA in-house project

Year

2021

About the Project

Figma2WP is a Belov Digital Agency’s in-house project – a service for designers and developers who dream of transforming their Figma project into a full-fledged WordPress website. The team of top-ranked WordPress professionals will save you from unnecessary difficulties and will take the whole process into its own hands down to the smallest details.

Location

International

Competence

High-class WordPress development

Industry

Web design & development

Problem

The main goal was to design and build a full-fledged fast and pixel-perfect website as an illustration of the company’s service. It was very important to demonstrate comprehensive information about the project and make the site attractive to a potential customer.

The site needed to be interactive enough to help people understand the service better, at the same time not too overwhelming. To assist people in making the decision, we had to add a comprehensive pricing guide.

Solution

Our designers used advanced visual design technologies to make the website match its content and the target audience of the product. We chose to place the interactive pricing guide on the home page instead of a separate Pricing page so that users could get a project quote faster.

Based on this design, our development team created 12 adaptive custom blocks for all pages, including the project submission form and an iFrame for the clients’ Figma designs. The interactive blocks require no unnecessary clicks to be user-friendlier.

Overall, the website externally and internally corresponds to the product itself: it saves time and combines handy features and a professional look.

Figma2WP project dropoff form

Design upload form

Clients can share their projects with us in the order form. This is a multi-page form, the first stage of which implies sharing a design file. The site uses an iFrame for it. The rest of the fields are for detailed order processing.

Figma2WP calculator

Pricing calculator

This calculator allows configuring four main parameters of the order: the number of pages, urgency, complexity, and a required customization level. All sliders work as a scale with several discrete values – the pointer sticks to the value closest to the user’s selection. Once the client calculated their project quote, the calculator saves the data. Therefore, when they send the form for the design-to-site transfer, we will receive the estimated cost of this particular project. This helps avoid unnecessary back-and-forth and makes life easier for both sides.

A Performance-first approach in everything: from efficient collaboration to the optimized page load metrics.

Figma2WP order

Automated sales process

To avoid any doubts regarding the payment on the part of the customer, we have added the ability to make an advance payment in one click. The Easy Digital Downloads WordPress plugin helps to issue the bill and provide a payment link conveniently.

Figma to WordPress process

Unique design

The stylish and minimalistic interface created by our designers is not only highly functional but also pleasing to the eye. The site hides the header when a visitor scrolls down and shows when they scroll up. Another attractive design solution is in the How It Works block: the custom animated numbers interact with the user on hover. The images from other blocks appear with a soft sliding animation.

Result

Our team created an effective product from both the design and functionality perspectives. The Figma2WP website was fully developed in Gutenberg. Based on this editor, we have created 12 custom blocks. Unusual custom design elements like number animation attract the user’s attention to thematic blocks and decorate them.

The main driving force behind this project was convenience. Convenience in every field: starting from a detailed form for the transfer of design to a site, ending with storing the price of work calculated on the site. We have taken into account all the needs for this kind of project. And we have made the most stylish, ergonomic, and functional site to meet the requirements of customers.

More Case Studies

Explore our other projects

Vial - Case Study on Belov Digital Agency

Vial – Revamp & Continuous Partnership

We’ve re-built a website completely using the Astra theme with Elementor PRO as a base due to the urgency and..
GearUp - Case Study on Belov Digital Agency

GearUp

Our team has created an effective website for GearUp. We’ve taken into account all the visual and functional requirements and..
KeysForWeb - Case Study on Belov Digital Agency

KeysForWeb: Branding & Web Design

This is the website for KeysForWeb – our web app for requesting and sending passwords securely and conveniently. For this..
Civics Alliance - Case Study on Belov Digital Agency

Civics Alliance

For this project, we had to develop a site with 8 pages and lots of templates for different types of..

Transform Your Vision

Request your website now

Over 900 companies trust us with their online presence

The team I think did an excellent job. They were very good at communicating clearly with me online. Were very fair with their work. While I am not an expert it looks like everything was done correctly. I would work with them again without hesitation.
Belov Digital Agency - WordPress Development - Reviews

Joe Vitacco

Belov Digital team knew what they were doing and got the job done fast. I appreciate the services very much and highly recommend them for any WordPress integration.
Belov Digital Agency - WordPress Development - Reviews

Sheila Stevens

I can always count on Belov Digital to respond quickly, with outstanding development work. I’ve learned a lot from the team as well! Thanks, Alex!
Belov Digital Agency - WordPress Development - Reviews

Megan Stout