Hey there LukeB,
You know that’s a really good question and I want to make sure I cover it fully here to the best of my ability.
Generally, the way that I like to handoff styles and components for my devs is by coding the layout, putting the components in it, and then shipping them all of that with a stylesheet that defines the styles for what’s included.
That being said, it is totally possible to handoff Figma specs to devs directly and there’s actually a really solid article by Figma here that can help you do just that:
With respect to your other questions:
- For spacing, you could theoretically setup a spacer component, but what I like to do is use a baseline 4pt grid and set my standard margins to 20px. The reason that I do this is because that almost always guarantees that my design elements will stay out of any clipping or dead areas when loaded onto a phone viewport.
- To clarify, margins, padding, and gutters should all have a relationship of whole’s or 1/2’s, where if margins are 20, padding is 10 and gutters are 10 respectively. This keeps your design relatively clean and makes the rules somewhat easier to follow for developers.
- For colors, I would need to know a little bit more about the context of usage, because there are definitely ways to do that but it can vary depending upon what you’re trying to do with it.
- If you could give us a little more information, I think we may be able to find you a good solution for that :)