Figma Shapes and Xamarin Forms

I have been using David Ortinau’s tricks shown here to export SVG-s from Figma to Xamarin Forms and use the built-in Path control to render it and I’ve been in love with it.

Drawing Paths for Xamarin.Forms

However, I ran into scenarios when the Vector I wanted to export was a group of Vectors i.e.

When you export this it will create you something like this:

A complex svg definition with mutiple paths

Now at this point I found that there are two things you can do:

Option 1: Add a parent Grid and add these Path objects “on top of each other” by placing them all into Column = 0 and Row = 0 and this is what Javier (thanks Javier!) also describes here which works great for almost all scenarios:
https://javiersuarezruiz.wordpress.com/2020/06/30/xamarin-forms-tips-and-tricks-working-with-shapes/

Option 2: You can combine these Path elements into a single Geometry object. In that case you can use a “GeometryGroup”: define the path elements each as a PathGeometry objects and use the Figures property for your Data. One scenario where you’d want to do this is if you had to bind your complex shape to a propery of type “Geometry” and suddenly using a “Grid” would not be enough:

Pro-tip: You could also define these “Geometry”-s in your page or app resource files i.e. your complex ones like so:

Complex SVG as static resource

And your simples too like:

Simple SVG as static resource

And then your XAML / code will become much tidier:

Referencing SVGs from XAML as static resources

or from code:

Application.Current.Resources[“SvgEditItem”] as Geometry;`

I hope this helps someone!