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

Belov Digital are true professionals and worked diligently within the timeframe we had to diagnose the problems I was having with my website. Super responsive and attentive. My new go-to for anything web-dev agency. Thank you!
Belov Digital Agency - WordPress Development - Reviews

Rodrigo Campos

Belov Digital Agency are thorough and easy to work with. Good communication and offers understandable, clear answers to my questions.
Belov Digital Agency - WordPress Development - Reviews

Meredith Pangrace

I appreciate all the work Belov has done on my site. The team is very prompt, and delivers. I also appreciate that they explains everything very well. I would very much recommend Belov Digital and will hire them again. Thank you!
Belov Digital Agency - WordPress Development - Reviews

Michaela Farkasovska