In order to get the best results from ion, please follow our usage best practices below. Thankfully, the ion usage guide overlaps heavily with general design best practices. You can see detailed examples of ion-compatible frames in the example pages to the left.
Using auto layout will guarantee high-quality code is generated from your designs. Furthermore, auto layout helps you remain consistent and effective in your designs. Your engineering team will thank you for using it.
Ideally, you should be using auto layout in every frame.
Follow the link below for Figma’s guide to using auto layout and a great Youtube video tutorial.
Only use fixed widths and heights when absolutely necessary. As a rule of thumb, try to only use them on the top-level parent frames.
Otherwise, use “hug” and “fill” for the sizes. For example, take a look at this component. Only the parent element and the images have fixed size.
For most sizing considerations, you should be able to use padding in auto layout.