Import a page from Figma
Turn a Figma frame into a Tessolo page: structure, text and images come over as blocks.
Designed the page in Figma first? Paste a frame link and Tessolo rebuilds it with its own blocks. Text stays text, images land in your media library, and the layout follows the frame's auto layout. Colors and fonts are not copied: they follow the site theme, so imported pages match the rest of the site.
Connect Figma once
The import reads your file through Figma's API, so it needs a personal access token from your Figma account. Tokens are per person, not per workspace: whoever imports uses their own Figma access.
- In Figma, open Settings → Security → Personal access tokens and generate a token. The only scope it needs is File content: read.
- In Tessolo, open Account settings (your avatar at the bottom of the sidebar) and paste the token into the Figma card.
Tessolo checks the token against Figma, stores it encrypted, and only ever shows its last four characters. You can disconnect or replace it from the same card at any time.
Import a frame
- In Figma, select the frame you want (usually a whole page layout), right-click and
choose Copy link. The link contains a
node-idthat points at that frame. - In Tessolo, open New page, expand Import from a Figma frame, paste the link and click Read.
- Tessolo shows what it found: the frame name, roughly how many blocks it will create and how many images it will export. If something looks off, fix the frame in Figma and read again.
- Click Import and create. The page opens in the editor with everything in place.
If you paste a file link without a node-id, Tessolo takes the first frame on the first
page.
What maps to what
| In Figma | In Tessolo |
|---|---|
| Each top-level child frame of the imported frame | A Section |
| Auto layout, horizontal | A horizontal Stack |
| Auto layout, vertical | A vertical Stack |
| Auto layout with wrap and three or more equal-width items | A Grid |
| Frames without auto layout | Children grouped into rows by position |
| Text at 24px or larger, or bold text | A Heading (size picked from the font size) |
| Other text | Text |
| Rectangles and frames with an image fill | An Image, exported at 2× and stored in your media library |
Frames named button, btn or cta that contain text | A Button with no link yet |
| A solid, non-white fill on a child frame | The section's background color |
Vectors, lines and boolean shapes are decoration and are skipped. Hidden layers are skipped too.
Limits and things to check afterwards
- One import handles up to 400 layers and exports up to 16 images. Larger frames are cut off and the page tells you how many elements were left out.
- Frames named like
navbar,headerorfooterare imported as regular sections. The site-wide header and footer live under Header / Footer instead; delete the imported copies once you've built those. - Buttons come over without links. The pre-publish check lists them so you don't ship a button that goes nowhere.
- Images that Figma fails to export, or that don't fit in your media quota, are left as empty image blocks. Replace them from the media library.
- Responsive behavior is Tessolo's, not Figma's: the imported page uses the same breakpoint rules as any other page. Check the tablet and phone views before publishing.
Paths and URLs
How a Tessolo page path becomes its public URL: the rules, the homepage, nested paths, reserved names, and changing a path without broken links.
Page templates
Save a finished Tessolo page as a page template and start new pages from it on any site in the workspace — and what can't come across.