Zoom Webinar: Learn and enhance your TypeScript skills | 28th March 2023 | 10 AM PST [10:30 PM IST] Register here
Functionalities

Day 1 of DhiWise Launch Week 3 comes with Auto Identification of Components V2.0 and Figma Refresh

logo

Nidhi Sorathiya | Engineering

August 22, 2022
image
Author
logo

Nidhi Sorathiya | Engineering

{
August 22, 2022
}

Auto Identification of Components V2.0

Now, we are bringing to you even more enhancement and their advanced version, Version 2.0, for identifying the components and optimisation in the generated code for the UI design.

What's new with Advanced Algorithms?

Enhanced Algorithms for accurate Design

Using 200+ algorithms, DhiWise can understand any design and convert it into a valid design code. Every supported component identification is now improved which in turn identifies all your designs, so you can easily modify your app designs.

Supports every Figma Design

Previously in V1.0, our identification used to only work with the designs done using Groups and Rectangle. Now, DhiWise is capable to identify designs made using any Parent node, which means it supports designs done using Frames, Components, Boolean Operations(Union, Intersect, Subtract and Exclude), and even newly introduced Widgets support from Figma. Now, bring any app design, create your amazing app and the rest will be covered by DhiWise!

Learn more from our Design guidelines to follow DhiWise design standards and get all your application UI identified easily.

Optimised Code Structure with Reduced Code Size for Design

We managed to reduce the size of the code of a screen which was generated previously to half with our V1.0 algorithms.

Our identification algorithms are now powered with such an advancement that they auto-identify all your design clutters and remove them while you import your designs into DhiWise. This helps in generating optimised design code by removing unnecessary code views and giving better view hierarchy results, which helps to reduce code size.

Managed View Hierarchy

We managed to reduce the size of the code of a screen which was generated previously to half with our V1.0 algorithms.

Our identification algorithms are now powered with such an advancement that they auto-identify all your design clutters and remove them while you import your designs into DhiWise. This helps in generating optimised design code by removing unnecessary code views and giving better view hierarchy results, which helps to reduce code size.

Managed View Hierarchy

In V1.0, identification algorithms were incapable to manage the view hierarchy generation when the design was done with overlapping components or the design had Z-indexed components. For such designs, the view hierarchy was not generated in proper order, but now DhiWise handles the view hierarchy in a sorted manner. No matter how the design is being layered in Figma, our algorithms will manage all your design components in proper order.

More enhanced component identification

DhiWise identifies all the UI components very smoothly ever since our first version. Now, it has extended its support for more components, so you have no chance to face issues and can smoothly build your application in DhiWise.

Image

In case components are not identified, or it is not according to proper design guides, then tag that particular component. To learn more refer to Tagging Components in Figma doc.

Auto Icon Detection

DhiWise now also identifies all your icons from the design. It identifies icons and also gives them a name using which you can easily get familiar with your design. Icons designed using Fonts are also now identified and icon identification alo helps in auto-identifying the screen actions.

Image

Using icon identification, the identification of components has been improved. For example, if the search icon is identified then it is effortless to identify SearchView on the app screen.

Read more from Auto Icon Detection doc.

Auto Action Setup

You heard it right! Now Actions are automatically set on your app screens. Based on the icon detected on the screen, action is set in the app screen and the related code is also generated in the app code. This saves your time now even more and so you can focus on your meaningful tasks.

Read out the Auto Action Setup doc to know which actions are supported and much more.

Image

New Supported Components

New components are added to the list of supported components in the auto-identification feature of DhiWise. Components like ChipView, ExpandableList, Slider and SearchView are now included.

Storybook Integration

For React developers, we have some great news! We now have Storybook integration with the help of which a developer can visualise their complete design components and can preview them. It allows us, the developers, to create and test components in isolation. It runs outside of the app, too, so project dependencies won't affect the behaviour of components.

Read out Storybook Integration to learn how you can set up it in your React application.

Figma Refresh

Many times during the app development process, there are many design changes and modifications made to the design. To get those changes reflected in your app in DhiWise, Figma Refresh comes in to help you with that.

Figma refresh avoids the need of switching back to Figma designs and instead lets you get all your changes right here in your DhiWise application.

Refer to Figma Refresh doc to know more about it.

Read more

Image

Auto identification of components has been an amazing feature in DhiWise. Our advanced algorithms help you identify all your designs in one go, and now they are even more powerful with new supported components and enhancements.