Gotchas

Frames over groups

Groups are tricky to get right since they don't really have an equivalent in browsers which makes them translate poorly to code. What you can do instead is to just use frames.

Auto layout is your (best) friend

You are probably already familiar with or have heard of flexbox in browsers. Well, auto layout in Figma is almost the same as flexbox. You can leverage it to achieve flexible and responsive layouts. Whenever you are using auto layout, uipkg will convert it to flexbox! For frames that do not use auto layout, it will fallback to absolute positioning.

Small components over large ones

You might be tempted to just export the whole page design to code, while this will work, it won't be that useful though since it will be static and hard to customize. Instead, we should be thinking in React, small components are the building blocks of an app, so think in terms of individual components and reuse them throughout the project, this way you can get the most out of uipkg and you won't have to throw out the whole thing when you change something.