Nick Lawrence
2 min readJan 10, 2022

--

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 :)

--

--

Nick Lawrence
Nick Lawrence

Written by Nick Lawrence

UI/UX designer with over thirteen years of experience in the design industry. nicklawrencedesign.com | designwalkthroughs.com

No responses yet