How DhiWise Simplifies app Development with Figma to Code Support

How DhiWise Simplifies app Development with Figma to Code Support

Are you planning to build a beautiful front-end application with Kotlin in less time without affecting your code quality? DhiWise provides you a definitive and cost-effective way to build your front-end app without compromising on code quality. 

This article is for those who want to create a user interface design for an app on their own and for the developers or designers searching for a way to convert their Figma design into Kotlin code.

Figma is a vector graphics editor and prototyping tool that enables designers and developers to create incredible interface designs. With Figma Mirror companion app for Android and iOS allows viewing Figma prototypes in real-time on mobile devices.

However, there is no tool that can instantly convert your Figma design into Kotlin code. 

DhiWise: A ProCode platform with Figma to Code support

DhiWise is a ProCode platform that enables developers to build web and mobile apps faster by supporting modern technologies such as Node, React, and Kotlin. It speeds up your app development by eliminating repetitive tasks. 

If you are building a mobile app frontend with Kotlin then you might need Figma to code support. DhiWise Kotlin builder simplifies it, just assign Figma ID, Token, and app details to get started. 

Want to know how it works?

Convert Figma design to Kotlin Code with DhiWise Kotlin builder

To start building UI for your app first select Android (Kotlin) to get started. 


CS
Create Kotlin application

Once you select Android(Kotlin) it will open a new window as shown below. Here, you need to add input such as application name, Figma ID, and Figma token to set up your project.. 


CS
Setting up your Project

How to get Figma id and Figma token?

To get the Figma ID, follow the steps below:

1. Login to your figma.com account and open the Figma file on your browser or desktop app.

2. Copy the file URL from the address bar. If you are using the Figma Desktop app right-click the file tab to copy the link and paste it into the browser’s address bar to view and copy the file ID. 

3. The file ID in the URL will be like:

      https://www.figma.com/file/figma_file_id/project_name 

Copy the Figma file id and paste it into the DhiWise platform.


Getting Figma file id from URL

To get the Figma Token, follow the steps below:

1. Login to your figma.com account or Figma desktop app

2. Click on the initial of your account name at the top right corner. Select  “Settings” from the drop-down as shown below,

CS
Getting Figma Token from Setting


3. It will open a pop-up, under the “Account” tab scroll down the page, and check “Personal access tokens”.  Add the name in the text-box and “Create a new personal access token”

CS
Generate Figma Token

Then hit enter to generate Figma token. Copy generated Figma token and paste it to the DhiWise platform as shown below.


CS
Add Figma id and Figma token

Once you click on the Create application your app will be generated. Here you can set visual routes, create an actions lifecycle for the apps once you have the UI.

Update user interface 

Now you can add navigation and action to the screen, create product flavor configuration, manage your API, add constants, and database. 

CS
Update UI

Build App

Finally, click on “Build app” to create your Android project.

CS
Build Project

Download project source code

And here is your project source code ready to download.

CS
Download Source Code

“Don’t waste time starting from scratch, convert your Figma design to Kotlin code and build your Android(Kotilin) app instantly in few steps.”

DhiWise provides the best features such as support for clean code architecture, version control, Git synchronization, third-party API and SDK support collaborative environment, and more. 

Summing up

Creating code from scratch for  Android applications can be literally frustrating and it will be worse if you are working on multiple projects at the same time. 

Get your work done faster with DhiWise and use your extra time to solve complex problems in your app and keep your app up to date. 

Simply use DhiWise Kotlin builder to convert your Figma design to Kotlin code!!

Try DhiWise Toady!!

Related Blogs