Figtion with DhiWise in a Day!

Figma is one of the coolest design-specific resources. Yet, it remains only mildly accessible.

From finding it difficult to share Figma resources across multiple platforms to not getting the required Figma info without having to open each design, things can get tricky if you are on a clock. But then, Dhiwise has a solution or rather Figtion.

The General Approach towards sharing:

1. Open Figma and search for templates.
2. Find the Figmas
3. Open the Figma
4. Copy the link
5. Switch to WhatsApp/Slack
6. Find the contact
7. Send
8. Switch back to Figma
9. We are on step 2 again.

‍

What’s always ignored?

Imagine doing it for half an hour every day! That would out turn to be 26 hours per year.  And what if the number rises in ascending order? So, will be a rise in hours that will be spent doing that.

Having a platform that can select multiple Figmas at a time and share across different platforms can ease out the time factor which as a whole can be used into something more productive.

To do so, Figma provides REST APIs for listing, version logs, and comments. Also, open APIs are provided by WhatsApp and Slack too. Consuming these APIs arises “Figtion”!

DhiWise has built Figtion which is a React Web application in just 2 hours with a Figma design and APIs. Let’s explore “The How” in detail.

Exploring “The How” with DhiWise

DhiWise is a programming platform where developers can convert their designs into developer-friendly code for mobile and web apps. DhiWise automates the application development lifecycle and instantly generates readable, modular, and reusable code.

‍

Hands-on quick clicks:

1. Figma design in accordance with DhiWise Standards.
2. Made use of Figma APIs in DhiWise, therefore, added them to the “API Runner” of DhiWise.
3. Integrated APIs to the UI elements of the webpages.
4. Setup navigation.
5. Lastly, after all the integrations, built the application, pushed it to  GitHub, and deployed it on Vercel.
6. Synced the code from GitHub into the local machine.

‍

What’s more beyond Code Conversion?

“ A Good visual layout shows the logical structure of the application.”

• To set up a project from scratch requires plenty of resources in terms of manual power, time, and cost. Also, one needs to follow a proper structure that must follow some best standards.
• DhiWise generated code is well structured to understand, modify and scale. The components, services, assets, and webpages are properly structured so that they can be accessed and modified easily.

“Time isn’t the main thing, it’s the only thing!”

• With DhiWise, it’s like visualizing a timelapse of design, and development.
• Also, it took a couple of minutes to import Figma, fetch the webpages, integrate APIs, and set navigation.

“Good code is its own best documentation.”

• DhiWise-generated applications are easy to scale as the code is readable and modifiable.
• DhiWise generates reusable ReactJS components which help the developer develop more with few lines of code.
• Filtering and Integration of WhatsApp and Slack were done manually, just by writing a few lines of code.
• Manual coding in the generated code is only possible when the generated code is readable, understandable, and scalable. And guess what? DhiWise code is all of those.

“Amalgamating integration of real-time data of different platforms results in a marvelous creation.”

• DhiWise integrates API in no time!
• DhiWise provides more than one way to add an API. Add an API by building requests or importing cURL in the API Runner. DhiWise also supports importing a postman collection.
• APIs can be integrated either on the "OnMount" lifecycle event or with the click of a component!

“Being at the right place on a correct indication is a mindful activity”

• DhiWise makes it extremely easy to manage navigations. Setting up navigation can be done with under five clicks! Also, a variety of navigations like redirecting to an external URL, page navigation, and section navigation are supported.
• Moreover, arguments too can be added with navigation.

“If your code is at an appropriate place, the rest can follow!”

• DhiWise allows syncing the code with GitHub.
• Once the code is pushed to GitHub, developers’ life becomes quite carefree. Sharing, cloning, and modifying the code becomes smooth.

“Rather than just imagining, have a preview of what’s coming to you!”

• DhiWise provides the support of Vercel deployments.
• One can deploy the application on Vercel by entering the token.

As seen, Figtion from DhiWise isn’t as strange as fiction. It’s very real, allowing you to share your designs and prototypes across multiple platforms (slack and Whatsapp) is virtually no time. And how it happens has been detailed rather succinctly throughout the sections mentioned above. Spoiler alert: the approach includes React support, quick API integration, and a lot of imagination.

If you want to create something similar, DhiWise has you covered!