Skip to main content

Settings

Configure how FigML exports your Figma designs to XML. These settings help you optimize the output for your specific use case.

Available Settings​

Use HEX color format​

Default: true

Converts all color values to HEX format (e.g., #FF0000) instead of RGB values. This makes the XML more readable and easier to use in CSS-based frameworks.

When enabled:

<Rectangle color="#6360c3" />

When disabled:

<Rectangle>
  <color r="0.388" g="0.376" b="0.765" />
</Rectangle>

Omit default values​

Default: true

Removes Figma's default attribute values from the XML output. This significantly reduces file size and improves readability by only showing properties that have been explicitly set.

Examples of omitted defaults:

  • opacity="1"
  • visible="true"
  • cornerRadius="0"
  • strokeWeight="1"
  • rotation="0"
  • blendMode="PASS_THROUGH"

When enabled:

<Rectangle x="100" y="200" width="300" height="150" cornerRadius="8" />

When disabled:

<Rectangle x="100" y="200" width="300" height="150" cornerRadius="8" 
          opacity="1" visible="true" rotation="0" blendMode="PASS_THROUGH" 
          strokeWeight="1" isMask="false" />

Default: true

Combines related properties into more concise shorthand attributes, making the XML cleaner and more intuitive.

Property groupings:

  • Stroke weights: If all four sides have the same weight, combines strokeTopWeight, strokeRightWeight, strokeBottomWeight, and strokeLeftWeight into a single strokeWeight property
  • Corner radii: If all four corners have the same radius, combines topLeftRadius, topRightRadius, bottomLeftRadius, and bottomRightRadius into a single cornerRadius property

When enabled:

<Rectangle strokeWeight="2" cornerRadius="8" />

When disabled:

<Rectangle strokeTopWeight="2" strokeRightWeight="2" 
          strokeBottomWeight="2" strokeLeftWeight="2"
          topLeftRadius="8" topRightRadius="8" 
          bottomLeftRadius="8" bottomRightRadius="8" />

Simplify vector paths​

Default: true

Removes detailed SVG path data from vector elements, dramatically reducing file size for designs with many icons or complex vector shapes.

When to use:

  • Enable for icon-heavy designs where you don't need the exact path data
  • Disable when you need to preserve custom vector shapes for reproduction

When enabled:

<Vector type="VECTOR" name="Icon" x="10" y="10" width="24" height="24" />

When disabled:

<Vector type="VECTOR" name="Icon" x="10" y="10" width="24" height="24">
  <vectorPaths>
    <vectorPath windingRule="NONZERO" data="M12 2C6.48 2 2 6.48 2 12s4.48..." />
  </vectorPaths>
</Vector>

Settings Recommendations​

For AI Code Generation​

  • ✅ Use HEX color format - AI models work better with standard color formats
  • ✅ Omit default values - Reduces noise for cleaner AI interpretation
  • ✅ Group related properties - Makes structure more logical for AI
  • ✅ Simplify vector paths - Unless you need exact SVG reproduction

For Component Libraries​

  • ✅ Use HEX color format - Easier to map to design tokens
  • ✅ Omit default values - Cleaner component props
  • ✅ Group related properties - More intuitive prop names
  • ❓ Simplify vector paths - Disable if preserving custom icons

For Design Audits​

  • ✅ Use HEX color format - Better for color consistency checks
  • ❌ Omit default values - Keep to see all property values
  • ✅ Group related properties - Easier to scan
  • ✅ Simplify vector paths - Focus on structure, not SVG details

How to Access Settings​

  1. Open the FigML plugin in Figma
  2. Click on the Settings tab
  3. Toggle each setting on/off as needed
  4. Your preferences are automatically saved
  5. Click Reset to Defaults to restore original settings
💡 Pro Tip: Settings are Persistent

Your settings are saved locally in Figma and will persist across sessions. You don't need to reconfigure them each time you use the plugin.

Settings Storage​

FigML stores your settings locally within Figma using the client storage API. This means:

  • Settings are specific to your Figma account
  • They sync across devices when using the same account
  • Settings persist between plugin sessions
  • No data is sent to external servers

Reset Settings​

If you need to restore all settings to their default values:

  1. Click the Reset to Defaults button in the Settings tab
  2. All settings will immediately revert to their default state
  3. The change is saved automatically

This is useful when:

  • You want to start fresh with default settings
  • You're troubleshooting export issues
  • You're sharing examples with others and want consistent output