In we retail demo site we have one demo structure component at /apps/weretail/components/structure/xfpage path so if you want to create the xf editable template, it will be better to copy it from the we retail and paste it in your project path and then do the necessary change as per your requirement like adding client libs, adding extra config pages an all.
Then you need to create a template type in your project's conf path and then create editable template based on the created template type.
Now you are all set to create xf by allowing template path in the /content/experience-fragments/..... path then you can go ahead with that.
Use above created xf with experience fragment core component on page or wherever you want.
Experience Fragments are fully laid out content; a fragment of a web page. So it contains components inside it. If I understand your query correctly, you are wanting to use the components that are used inside the XF as separate site structure components.
To do that, go to the XF path, Ex: /content/experience-fragments/project/XF-name, check the list of components added there. Select the component that you are looking for and get its sling:resourceType --> path and use it elsewhere.
Hope this helps. If not please elaborate on your query.