These notes are mostly based off Matt Jumper’s Figma to Framer Process, with a little of what I like to do:
- Take stock of your design system in Figma. Outline your grids, spacing (margins and breakpoints, padding, gaps, max/min-widths of content), corner radiuses
- Add guides and breakpoints in Framer. Defaults are fine, I also like to use 1920px because some of us have large displays.
- Create styles in Framer upfront. Assuming these are already set up in Figma, I would copy and paste these into Framer. This includes colour, text styles, link styles, uploading fonts, logo assets
- Build in Framer. Use the Figma/Framer plugin sparingly; I’d only use it by component/section
If there’s any localization required for your project, make sure that all content is formatted accordingly.
- Paragraphs and line items have to be separated into separate text boxes
- Remove line breaks and any stylization of text (the localization feature will not render it)
- If you can, get all your content in a CSV format so you can import the text translations instead