Skip to content

Settings

Open the settings drawer with the gear icon in the plugin's footer. Settings persist between sessions.

The settings drawer

Import Options

SettingDefaultWhat it does
Use Auto LayoutOffConverts flex containers to Auto Layout frames — see the mapping
Icon RenderingSVG (vector)How detected icons are imported: as true vectors, or As image (rasterized)

Auto Layout is off by default because plain measured positioning is the high-fidelity mode: every layer sits exactly where the browser drew it. Turn Auto Layout on when you plan to keep editing the layout — resizing frames, adding items — and pixel-perfect placement matters less than responsive behavior. The same toggle is mirrored on the main screen as Try Auto Layout (flex containers).

Advanced Settings

SettingDefaultWhat it does
Create local styles & variablesOnCreates Figma paint styles for every fill, border, and shadow color in the import, named by color (Border - …, Shadow - …), and binds them to the layers
Create style sheetOffBuilds a separate Style Sheet frame beside the import: a hue-sorted color grid with hex labels, detected typography bucketed into H1–H5 / body / caption specimens, and the page's icons and images
Use existing local stylesOnReuses your document's existing paint styles when a color matches instead of creating duplicates — the log reports how many were created vs. reused

Together the defaults mean a fresh file gets a tidy set of named color styles, and a file with an established library keeps using its own. The style sheet is great for auditing an existing product's design language — one import gives you its palette and type scale as a reference sheet.

Enhancements

SettingDefaultWhat it does
High-res images PROOffOff, images are compressed for speed and file size. On, images import at their original full resolution

Appearance

SettingDefaultWhat it does
Dark ModeOffSwitches the plugin UI to a dark theme — the import itself is unaffected