Skip to main content
Connect Figma so Replo can read your frames, components, styles, and assets. Paste a file or frame link in chat. When the file includes a mobile frame of the page, Replo matches that frame on phones, then builds tablet and desktop from the desktop frame. When there is only a desktop frame, the page matches desktop. You can ask Replo to adapt it for phones after the first preview. Replo copies the design’s fonts into the site from Branding, Google Fonts, Fontshare, or fonts already on the site.

​
Connect Figma

1

Open the Integrations app

In Replo, open Integrations and choose Figma.
2

Connect your account

Select Connect, sign in to Figma, and authorize access. Choose a project or personal connection if the app offers both.

​
Prepare the design

  1. Share a file or frame link. Give Replo a link to the specific Figma file or frame, not a team or project link. One frame is enough when the file also has the matching desktop or mobile frame of the same page; Replo finds the pair. If the file has several pages, name the target frame in your request.
  2. Include a mobile frame when you have one. Name corresponding frames, such as Landing page / Desktop and Landing page / Mobile. A mobile frame is the source of truth on phones. Without one, the page is exact on desktop.
  3. Describe interactions that a still frame cannot show. Give layers and components descriptive names. Put visible notes in a separate annotation frame or beside the relevant element, outside the page frame. Link the annotation frame in your request so Replo knows to inspect it. For a carousel, describe the arrows, swipe behavior, and whether it loops. For a sticky section, say when it sticks and stops. For a dropdown or accordion, show or describe its open state and how it closes.
  4. Use Auto Layout where it expresses the layout. Its spacing, padding, alignment, and sizing give Replo more context for responsive behavior. You can start with an existing file that has no Auto Layout; add it to sections that come out wrong if the layout needs a clearer structure.
For example, a note beside an FAQ could say: “Accordion: the first item starts open. Selecting another heading closes the first. Use the same behavior on mobile.”

​
Ask Replo to build and check the page

Include links to the page frames and any separate annotation frame. Call out the interactions you want on the live page. Ask Replo to follow your annotations and test those interactions at desktop and mobile widths before calling the page done.
After the first preview, Replo may offer follow-up chips, for example to wire leftover buttons or Adapt my page for phones. Use those instead of asking Replo to import the same frame again. A second import of the same page is refused. Review the preview yourself, especially by clicking controls and scrolling through sticky sections. A close visual match does not confirm that every interaction works as intended.