Dev Tools Tab

Using the Dev Tools Tab

Note

To access this tab, the option Development in the Settings tab must be enabled;

The Dev Tools tab allows you to edit and troubleshoot the design before handoff to developers.

The left-top dropdown allows you to alternate among Xaml Preview, Global Resources, and Json File. Contextual controls at the bottom of the tab allow you to: render changes and copy the Xaml code to the pasteboard (these control are only available on the Xaml Preview selection);

Note

Proper generation depends on usage of the proper templates and components. Please, read the New design guidelines before starting a new project;

Steps to Use Export Tab

1. Select the page or component to inspect or edit;
2. From Figma's Plugins menu select Uno Platform;
3. Click the Dev Tools tab (fifth one from the left);
4. Edit the file changing a component;
5. Click the Render button at the bottom of the tab;
6. Click the Preview tab to see the applied changes;