From Figma’s design into React component using DhiWise

Rakesh Purohit
DhiWise
Published in
5 min readJul 7, 2022

I am a React Developer at DhiWise; trust me; it’s fun out here. DhiWise is a Pro-Code, developer-centric programming platform. It allows you to put your potential into creative work by reducing mundane tasks you might have been doing since you started your career as a developer. No offence, though!

Yet, today isn’t about the development saga that makes us special. Instead, it is about the React-specific features for that favourite front-end panel.

As a result, we have recently rolled out change view support for a few following features to get your code as React component. These include:

1. Dropdown components.

2. Chart components.

3. Seek bar and Range seek bar.

4. Search View.

5. Circular & Linear Progress bar.

6. Floating Button.

7. Modal component.

I have already written an article on charts waiting for you on the DhiWise platform. So in this article, I’d like to explore them. Today, we are here to understand how to generate a ‘select component’ from your Figma design using DhiWise for your React web app.

Create Application on DhiWise:

  1. Sign in to DhiWise and navigate to “Application list” page and click on New application button to create a new application
  2. You will get a screen as below to select technology to build an application.
Select Technology page in DhiWise

3. Select React web app, and it will ask the following options for your input.

You can use XD/Sketch or go with the ready-made templates provided by DhiWise by selecting the “Don’t have a design” option. For now, I will select Figma as I already have a Figma file ready to be converted into React web app.

4. As you select the Figma option, you will be required to integrate your Figma account with DhiWise, if you haven’t yet.

If you have integrated your Figma account with DhiWise, it will give you the below screen and ask for your Figma design file URL.

5. Click Next, and It will ask you to select screens.

You can select the whole page or just a few screens. Once done, you are ready to fetch resources from Figma. It will take a while for you to fetch all resources.

Once done, it will redirect you to the dashboard with all the screens.

Change View Functionality:

The philosophy behind this feature is freedom. It allows you to change the algorithm-detected components into your desired components. The best thing about this feature is that you can use it repeatedly. I feel joyful while using it to change the UI Component from one view to another.

Dropdowns

1. Click on the screen item having drop-down in it. Select that component and right click on it. Choose “Change view” option.

Screen config page having dropdown (select component)

After that, you will be focused on the properties of the selected view. Pick “Dropdown” from the panel on your left (only marvel fans will get this).

2. It will give below pop-up which has two options:

1. Autocomplete: It will make the component autocomplete based on the options provided.

2. Multi-Selection: If you need this component to allow multiple selections to the user, check this to get this functionality.

3. By clicking “Continue”, it will convert the view to drop-down.

DhiWise uses React-Select library for the best performance and match all your future development requirement by creating a common, reusable component import “react-select” library component which helps to maintain the component structure. You can find the component code under the following path:

/src/components/SelectBox/index.js

Charts

  1. On that same left panel, you will get “Charts” option. That will give options to select your chart type. You can select any of them based on your UI.

2. Selecting the chart type will redirect you to the next screen. Here it will ask you to configure that particular chart type and library selection.

Based on the options available in a library, you will get configuration options.

You will get that star ⭐️ button which indicates “DhiWise Recommended” library. I would prefer to use that only.

Google Maps

Well, we have this support in DhiWise now. You can now select the Google Map UI part and convert that view by changing view functionality. The process is the same as all of the above. You will get this option inside the panel on your left.

Selecting that option gives the following pop-up, which asks whether you want a marker on your map.

Modal Component

No configuration here! This is a plus point. No need to do anything. We will do it for you. DhiWise auto-generates modal components by scanning your Figma resources, and you will get the modal component code. You can you “Create action” to call that component on any click.

The below UI parts from your Figma design will be detected by the algorithm, so you’ll get the code for those components.

  1. Seek bar and Range seek bar.
  2. Circular & Linear Progress bar.
  3. Floating Button and many more …

Hope you find it helpful. I will be writing more such helpful content. To get more such from me, go to below links and feel free to connect.

Find me on: GitHub | Twitter | LinkedIn

--

--