Start with structure
- Wrap each screen in a clear top-level frame.
- Use Auto Layout for rows, columns, repeated items, and content-driven spacing.
- Keep related content together: a button’s label inside the button, and a field’s label near its input.
- Use meaningful, unique layer names, especially across responsive variants.
- Remove hidden experiments and unrelated content from the selected screen.
Name controls intentionally
Layer names and text help the importer suggest semantic roles. These are suggestions: review them in the import dialog before converting.
| Element | Helpful naming |
|---|---|
| Button | Button / Continue or btn / Submit |
| Heading | Heading / Hero title or h1 / Welcome |
| Email or password field | Input / Email or Input / Password, with meaningful field text |
| Other form controls | Textarea, Checkbox, Radio, or Switch |
Check fonts and assets
Use images at a practical size and make sure you have the right to use them. A font visible in Figma may not be available in the browser; check conversion notes and choose an available replacement if needed.
Some vector artwork is preserved as an image. You can work with the resulting image element, but its individual vector paths are not necessarily editable as separate builder elements.
What a design import does not add
Import translates the screen’s design into editable content. It does not create your authentication system, payment flow, database, or application logic. A detected button or input still needs the appropriate behavior in your site.
Do not assume that Figma prototype interactions or every advanced visual effect will translate directly. Review the converted output and configure interactions in the builder.