Figma2WP
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.
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.
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.
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.
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 – Revamp & Continuous Partnership
GearUp
KeysForWeb: Branding & Web Design
Civics Alliance
Transform Your Vision
Request your website now
Over 900 companies trust us with their online presence
Belov digital agency is extremely easy to work with, and does fast, quality work.
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 Agency was simply amazing with this project. Their expertise and communication was beyond my expectation. What others may have struggled to solve in the past, their team tackled in a matter of 1-2 days. I will continue to hire BDA for all my website needs. Thank you for your great work!
