Skip to main content

Examples

See FigML in action with real-world examples from popular design systems and component libraries.

Example: DaisyUI Button​

DaisyUI is a popular component library built on top of Tailwind CSS that provides semantic component classes. It's known for its clean design, extensive theming options, and ease of use.

For this example, we're using a button component from the Official DaisyUI Figma Library, which provides all DaisyUI components as native Figma components ready for design work.

Figma Design​

DaisyUI Button Component

A simple button component with:

  • Background color
  • Text label with proper contrast
  • Rounded corners following DaisyUI's design system
  • Consistent padding for touch targets

Exported XML​

When you select this button in Figma and export it with FigML, you get clean, semantic XML:

<?xml version="1.0" encoding="UTF-8"?>
<?figml version="1.0"?>
<frame id="1189:3501" name="Button_Frame" expanded="true" maskType="ALPHA" x="-117" y="-178" width="100" height="100" clipsContent="true" type="FRAME">
  <children>
    <Button id="1189:5212" name="Button" cornerRadius="8" maskType="ALPHA" x="23" y="38" width="55" height="24" layoutSizingHorizontal="HUG" layoutMode="HORIZONTAL" paddingLeft="8" paddingRight="8" horizontalPadding="8" primaryAxisAlignItems="CENTER" counterAxisAlignItems="CENTER" itemSpacing="8" type="INSTANCE">
      <children>
        <h-icon_solid_heart id="I1189:5212;7:7636" name="h-icon_solid_heart" visible="false" maskType="ALPHA" x="8" y="5" width="14" height="14" clipsContent="true" variantProperties="" type="INSTANCE">
          <children>
            <Vector id="I1189:5212;7:7636;529:15977" name="Vector" maskType="ALPHA" strokeWeight="2" strokeJoin="ROUND" strokeAlign="CENTER" x="1.3125" y="1.75" width="11.375" height="10.499841690063477" type="VECTOR">
              <fills>
                <fill blendMode="NORMAL" color="#000000" />
              </fills>
              <constraints horizontal="SCALE" vertical="SCALE" />
            </Vector>
          </children>
          <constraints horizontal="MIN" vertical="MIN" />
          <mainComponent id="529:12724" />
        </h-icon_solid_heart>
        <Text id="I1189:5212;7:7637" name="Button" maskType="ALPHA" strokeAlign="OUTSIDE" x="8" y="6" width="39" height="12" layoutSizingHorizontal="HUG" fontSize="12" fontWeight="600" hyperlink="" characters="Button" type="TEXT" textAlignHorizontal="CENTER" textAutoResize="WIDTH_AND_HEIGHT">
          <fills>
            <fill blendMode="NORMAL" color="#000000" />
          </fills>
          <constraints horizontal="MIN" vertical="MIN" />
          <fontName family="Inter" style="Semi Bold" />
          <letterSpacing value="0" unit="PERCENT" />
          <lineHeight value="12" unit="PIXELS" />
        </Text>
        <h-icon_solid_heart id="I1189:5212;7:7638" name="h-icon_solid_heart" visible="false" maskType="ALPHA" x="77" y="5" width="14" height="14" clipsContent="true" variantProperties="" type="INSTANCE">
          <children>
            <Vector id="I1189:5212;7:7638;529:15977" name="Vector" maskType="ALPHA" strokeWeight="2" strokeJoin="ROUND" strokeAlign="CENTER" x="1.3125" y="1.75" width="11.375" height="10.499841690063477" type="VECTOR">
              <fills>
                <fill blendMode="NORMAL" color="#000000" />
              </fills>
              <constraints horizontal="SCALE" vertical="SCALE" />
            </Vector>
          </children>
          <constraints horizontal="MIN" vertical="MIN" />
          <mainComponent id="529:12724" />
        </h-icon_solid_heart>
      </children>
      <fills>
        <fill blendMode="NORMAL" color="#ffbe00" />
      </fills>
      <effects>
        <effect type="DROP_SHADOW" radius="2" spread="0" blendMode="NORMAL" showShadowBehindNode="false" color="#000000">
          <offset x="0" y="1" />
        </effect>
      </effects>
      <constraints horizontal="MIN" vertical="MIN" />
      <variantProperties ___size="xs" ___type="status" ___status="success" ___style="fill" ___radius="square" ___state="enabled" ____label="true" />
      <mainComponent id="7:7635" />
      <componentProperties>
        <___icon-start_7_0 type="INSTANCE_SWAP" value="529:12724" />
        <____icon_start_7_5 type="BOOLEAN" value="false" />
        <___icon-end_7_10 type="INSTANCE_SWAP" value="529:12724" />
        <____icon_end_7_15 type="BOOLEAN" value="false" />
        <___label_7_20 type="TEXT" value="Button" />
        <___size type="VARIANT" value="xs" />
        <___type type="VARIANT" value="status" />
        <___status type="VARIANT" value="success" />
        <___style type="VARIANT" value="fill" />
        <___radius type="VARIANT" value="square" />
        <___state type="VARIANT" value="enabled" />
        <____label type="VARIANT" value="true" />
      </componentProperties>
      <overrides>
        <override id="1189:5212">
          <overriddenFields>
            <overriddenField value="fills" index="0" />
          </overriddenFields>
        </override>
      </overrides>
    </Button>
  </children>
  <fills>
    <fill blendMode="NORMAL" color="#ffffff" />
  </fills>
  <constraints horizontal="MIN" vertical="MIN" />
</frame>

AI Prompt Example​

You can use this XML with AI tools to generate production-ready code:

Convert this XML to a DaisyUI button component in React:
[paste XML here]

More examples coming soon.