The Problem

Figma does not have the ability to truly merge shapes. When we flatten multiple shapes into one (cmd + opt + o), visually in Figma it look merges, but the SVG code will still spits seperate paths. When this happen the generated SVG will be wrapped in a group to "represent" the "merges". This extra group that we want to eliminates.

The Solution with SVG Toolbox

SVG Toolbox's Flatten Group "Sub-groups Only" feature helps us to eliminate this issue. It will detect any sub-groups and flatten them into its parent group. It will mantain any group that are direct descendants of main <svg>, but group/groups inside a group that is not direct descendant of main <svg> will be flattened. The process is recursive, so it will flatten all sub-groups until it reaches the deepest level.

Take a look at this example.

<svg
  id="Logo"
  viewBox="0 0 240 49"
  xmlns="http://www.w3.org/2000/svg"
  fill="none">
  <g id="logomark">
    <path fill="#6BDA0A" d="M23.6322..." />
  </g>
  <g id="logotype">
    <g id="Vector_2">
      <path fill="#ffffff" d="M110.599..." />
      ...
    </g>
  </g>
</svg>

Notice the <g id="Vector_2"> group inside <g id="logotype">, this group is not visually exist in Figma. It's a way Figma deal with visually merged shapes. By activating Flatten Group "Sub-groups Only", it will remove this sub-group, and move all the content to the parent group. This is the result:

<svg
  id="Logo"
  viewBox="0 0 240 49"
  xmlns="http://www.w3.org/2000/svg"
  fill="none">
  <g id="logomark">
    <path fill="#6BDA0A" d="M23.6322..." />
  </g>
  <g id="logotype">
    <path fill="#ffffff" d="M110.599..." />
    ...
  </g>
</svg>