Skip to main content

Sync Design Changes

Sync design changes help you to avoid switching back to Figma designs repeatedly and creating a new app in DhiWise again to bring all your new design changes. It helps to save a lot of time in a single click and helps you get your modified design right here all the way from the Figma file. No need to switch to the design file for it, we have it covered all; right here.

note

Following are some scenarios to be kept in mind while Figma sync.

  • Before doing a Figma sync or Figma page sync, if you’ve applied any Styles from DhiWise; then all those styles will be applied even after the sync.
  • If you’ve created Mixin and applied it to the components before Figma sync or Figma page sync on DhiWise, then it will be applied even after the sync.
  • If you’ve created a Component before Figma sync/Figma page sync with DhiWise, then your changes will still prevail even after sync. To overwrite them, detach your component and resync your Figma.
caution

Sync design changes don't work with templates.

How to sync design changes from a Figma file?​

Figma Sync can be done in two ways.

  1. Sync the entire Figma
  2. Sync a page from Figma

Sync the entire Figma​

1: Go to Page Settings and Sync design changes.​

Go to pages, on the top-right click Page Settings ⚙️, and select Sync design changes 🔄 .

Go to Page Settings and Sync design change

2: Refresh Figma design, select the desired screens, and fetch them.​

Click on Refresh to go ahead with syncing design changes. Select the screens that you want in your application and click Fetch Screen to fetch them.

This will fetch all the selected screens and sync your design with the latest one.

caution

While selecting the screens, if you deselect a screen that’s existing in the previous set of screens on DhiWise; then it will be removed from the list of available screens on syncing.

Select desired screen and fetch

Fectched screens

Sync a Page​

1: Go to Sync design changes​

Click on Sync design changes on the top. As you click on it, you will see two options as mentioned below:

Only current screen: Sync design changes for a single screen.

All the screens: Sync design changes for all the application screens.

Click Only current screen to sync changes for the current screen.

info

To sync the entire Figma, Click All the Page and follow the same steps as mentioned above.

Go to Sync design changes

2: Refresh Figma design​

Click on the Refresh button for syncing the latest design changes. This will fetch the current screen from your Figma and sync your current design with the latest one.

Refresh current page



Got a question? Ask here.