From Figma to an interactive portfolio.
Your Figma prototype is ready, but portfolio visitors can only look at the screens? Use this guide to turn one clear journey into an interactive demo in Framer. ChatGPT can help build it, so you do not need to write code or assemble every screen by hand. You choose the scope, review each stage, and test the result.
Choose one journey from your project and follow the steps to map it, build a demo, and test it. You do not need to program or rebuild every screen by hand: ChatGPT can help with the setup. You still decide what the demo should do and check the result. At the end, choose whether to keep the page in Draft for more review or publish after every check passes.
Figma is your design reference. ChatGPT can help recreate a selected journey in Framer using the browser and tools you authorize. Framer is where the demo lives and can be tested. This is a guided rebuild, not an automatic import or ongoing sync between Figma and Framer.
Tools for following this tutorial
You do not need coding experience. Bring a clear Figma flow, access to the file, and a Framer page you can edit. Follow the 12 steps at your pace; ask ChatGPT to explain any unfamiliar term before you move on.
Google Chrome + ChatGPT extension
Use Chrome to open Figma and Framer. The official extension lets ChatGPT work with tabs you authorize.
Set up the extension and approve permissions before using it.
More resources
ChatGPT + Work
Use ChatGPT Work to guide the build, carry out tasks you authorize, and review the results in Framer.
Check Work access in your account before starting. Some features depend on your plan and account availability.
More resources
Figma
Your starting point: a file with the screens and interactions in the flow you want to present.
Make sure you can access the file you plan to use.
Framer
Turn your flow into a navigable demo and add it to your portfolio.
Use the editor in your browser. You do not need to install the Framer app.
More resources
External links open in a new tab. After preparing the tools, check the access requirements and start with step 1.
Existing portfolio
Choose an existing project page. Add the demo while preserving the portfolio’s context, style, and navigation.
Beginner path
Start with a simple home page: introduction, project link, and contact. On the case study page, explain the context, include the demo, and provide a way back.
What you need to get started
To follow this guide, use ChatGPT Work with browser tools available. Some features depend on your account and plan. Check whether Chrome control is available in your account before subscribing.
Framer offers a free plan you can use to follow this tutorial. Stay within its page and feature limits; a custom domain and other publishing features may require a paid plan.
Keep ChatGPT and Chrome updated, and sign in to Figma and Framer. You must be able to view the Figma file and edit the Framer project.
Draft is your saved work before it goes live. Preview lets you test the page. The Chrome extension lets ChatGPT work with tabs you authorize. It does not copy or sync Figma and Framer projects automatically.
The prompts below are messages to copy and send to ChatGPT. Replace fields in [BRACKETS] with your project details. You do not need Framer Agent for this workflow.
In this guide, a journey is the screens and actions for one task; a state is how a screen looks at a particular moment; feedback is the response to an action. A case study is the portfolio page that explains a project. An integration connects the demo to a real service, such as login or data storage. If a term or step is unclear, ask ChatGPT to explain it before you continue.
Contents: 12 steps
1. Define the result
Objective: Choose one part of your project for visitors to explore.
What to do
- In your Figma project, choose a task that helps explain a design decision. It could be signing in, choosing content, or completing a form. Use a flow you have already designed.
- Define the first screen, the main action, and the result. Write down what visitors should understand. Without a connected service, the result will be demonstrated only on the page.
- Copy the message below, replace the fields in brackets, and send it to ChatGPT. Follow the same process in the next steps.
Expected result: A proposal for presenting your chosen task, with a beginning, actions, and a result. Use this same journey in the following steps.
How to check: Can visitors understand what to do and what happens next?
If something does not go as expected: If the proposal is too broad, ask for one task with a clear result.
2. Prepare the environment
Objective: Open the tools with the right accounts and permissions.
What to do
- Open the ChatGPT desktop app and enter Work, the mode that carries out tasks using tools you authorize.
- In Chrome, sign in to Figma and open your file. Sign in to Framer with an account that can edit the project.
- Gather both project links and send the message below to ChatGPT. If it cannot access the tabs yet, complete step 3 and repeat the check. A link alone does not grant permission to view or edit.
- You do not need to download the Figma file for this workflow.
Expected result: Confirmation of what ChatGPT can view and edit.
How to check: Are the open accounts and projects the ones you intend to use?
If something does not go as expected: Open the correct accounts and adjust permissions before continuing.
3. Connect Chrome
Objective: Allow ChatGPT to work in your open browser tabs.
What to do
- In ChatGPT, open Settings > Computer Use and choose Chrome. Look under More browsers if needed.
- If Install appears, open the official store and review the extension permissions. The extension is the browser add-on that connects Chrome to ChatGPT.
- Return to Computer Use, open Manage, and enable the browser so @Chrome appears in the conversation.
- Mention @Chrome in a Work task and authorize access to Figma and Framer when requested.
- Manage lets you review permissions; confirmation in the conversation shows whether the connection works.
Expected result: ChatGPT identifies the titles and links of the correct tabs.
How to check: Compare its response with the tabs you opened.
If something does not go as expected: Check the Chrome profile, permissions, and app updates. Control names may vary between versions.
4. Open the right projects
Objective: Confirm the design reference and where the work will happen.
What to do
- In Figma, open the page and screen you will use as a reference. A screen may be called a frame, the area containing its elements.
- In Framer, open the project and page that will contain the demo.
- Send the message below and check the names, links, and first-screen description before allowing changes.
Expected result: The Figma source and Framer destination are confirmed.
How to check: Do the names and first screen match your project?
If something does not go as expected: Open the correct page and send a link to the specific screen.
5. Test access
Objective: Check whether a small edit can be made and saved.
What to do
- First, ask ChatGPT to recognize the initial screen and one Figma interaction without changing anything.
- Ask how it will edit Framer: through the Chrome interface or an available connection.
- Choose a test area in Framer. Allow a small change, check it in Preview, reopen the page, and ask to restore the original.
- Check Draft, the saved working version: changes should be saved without appearing on the published site.
Expected result: A small edit made, checked, and undone, with the draft saved.
How to check: Did the change appear, remain after reopening, and get restored?
If something does not go as expected: If edits cannot be saved, resolve access before building the demo.
6. Organize Figma and map the journey
Objective: Prepare screens, connections, and explanations so the journey can be understood and rebuilt.
What to bring from Figma
Bring what is needed to explain the task: the starting screen, subsequent screens, relevant variations, actions, and result. You do not need a perfectly documented whole file. Start with a small, readable journey whose sequence is clear.
After you authorize access, ChatGPT Work can use the Figma file you share as a reference. Prepare it as if you were explaining the project to someone who will build it: name and arrange the screens, show how they connect, and note what each button does. Include the text, images, variations, errors, and ways back. This makes your expectations easier to understand. Before building, check that ChatGPT’s summary matches your project and correct anything that is wrong.
On the plugin page, use the installation or run control offered by Figma. In your design file, open Plugins, run SimpleFlow, and connect screens with directional arrows. Add labels explaining the action or condition for each path. Control names may vary by version.
Good organization makes interpretation easier, but does not guarantee ChatGPT will recognize every connection or test each interaction. Review the map it returns. Visual arrows explain intent; the navigable prototype shows configured behavior; your notes fill the gaps.
What to do
- In Figma, create a page or section for your chosen journey. Give screens clear names, such as “01. Entry”, “02. Choice”, and “03. Result”, and keep drafts or older versions elsewhere.
- Arrange the main path in a consistent reading direction, left to right or top to bottom. Keep branches and returns near their source screens and avoid crossing lines where possible.
- Show which button or action starts each connection, where it leads, and under which condition. Include back, cancel, error messages, and the final result. Use short notes for behavior an image cannot explain.
- To draw connections between screens, you can use the SimpleFlow plugin linked in this section. It helps communicate the visual sequence; it is optional, and its arrows do not replace interactions configured in Figma’s Prototype tab.
- In the Prototype tab, check existing interactions and test the path in Present. For actions that are not configured yet, write down the expected behavior and mark it as untested.
- This preparation is called a handoff: organizing the material so someone else can understand the project and continue the work. Share the Figma file link and the link to the section or starting screen with ChatGPT. Make sure it has permission to view the file. Before building, ask ChatGPT to summarize the journey. Check which details it found in the file and which are still assumptions.
Expected result: An organized Figma section and a list of screens, actions, and destinations reviewed by you, with questions and untested behavior identified.
How to check: Does the list match what happens when you use the prototype?
If something does not go as expected: Clarify missing screens or actions before building.
7. Check understanding
Objective: Agree on the demo before building it.
What to do
- Ask ChatGPT for a summary of the journey from start to finish.
- Check what will be rebuilt from Figma, what will work on the page, and what will be simulated.
- Resolve questions and confirm visual priorities. Moving between screens can work in the demo; sending data, authenticating an account, or saving information to a real service requires a separate integration.
Expected result: A summary you can review and approve.
How to check: Do the screens, actions, and limits match what you want to present?
If something does not go as expected: Point out the incorrect screen or action and ask for a new summary.
8. Prepare the case study page
Objective: Give visitors context before they explore the project.
What to do
- In ChatGPT, identify the Framer page that will contain the journey agreed in step 7. Say whether you want to update an existing case study or create your first project presentation.
- Gather the problem, your role, the decisions made, and the journey to demonstrate.
- Ask for usage instructions and a clear way back to the portfolio. If you are starting out, a home page with an introduction, case link, and contact is enough.
- Check the facts in the text and keep the page in Draft.
Expected result: A page explaining the project and how to explore its demo.
How to check: Can someone unfamiliar with the project understand its purpose and how to start?
If something does not go as expected: If information is missing, use clearly marked placeholder text. Do not invent results or metrics.
9. Build in stages
Objective: Make one interaction work before expanding the journey.
What to do
- In your ChatGPT conversation, request only the initial screen, one action, and the next screen of the agreed journey. Provide the Figma reference and the Framer page prepared in step 8.
- Ask ChatGPT to explain its method. It may create a Code Component: a reusable block of interface made with code and place it on the page. You do not need to write or understand the code to use it; review the visible result and ask for an explanation whenever a term is unclear.
- Open Preview in Framer and test the section: move forward, go back, and restart if those actions belong to the flow. Once it works, request the next sections until the journey is complete.
- ChatGPT rebuilds what it can verify; the extension does not automatically import or synchronize projects.
Expected result: A small working section saved in Draft.
How to check: Does the click lead to the right screen, and does going back work?
If something does not go as expected: Fix this section before requesting more screens.
10. Refine appearance and interactions
Objective: Bring the demo closer to the design and make it easier to use.
What to do
- Open the Figma reference and Framer preview side by side. Compare fonts, spacing, colors, images, and proportions.
- Test selected options, unavailable buttons, and error or success messages. Also use Tab and Enter to navigate by keyboard.
- As you press Tab, check that a border or another indicator shows which control is selected. This is keyboard focus. Also check how to return to previous screens.
- If you use a phone frame, keep its content readable and controls accessible.
Expected result: Visual and usability improvements, with remaining gaps identified.
How to check: Can you complete the task with both the mouse and keyboard?
If something does not go as expected: Request small corrections, identifying the element and its reference.
11. Adapt the presentation
Objective: Keep the page readable across screen sizes.
What to do
- In Framer Preview, try widths such as 320, 390, 810, and 1200 px, plus sizes in between. These are starting examples, not a rule for every project.
- Check text, buttons, elements that overlap, and horizontal page scrolling. Test browser zoom and whether buttons and links are easy to tap.
- If the journey is hard to use on a narrow screen, choose between simplifying the presentation and offering a static image.
- If you use an image, label it as non-interactive and explain where to explore the full demo. Do not shrink the entire interface until it becomes unreadable.
Expected result: A presentation that adapts to available width, with clear limits.
How to check: Is the text readable, and do the offered controls really work?
If something does not go as expected: Remove rigid frames, simplify the composition, and test again.
12. Review and choose what to do next
Objective: Review the whole experience before deciding to publish.
What to do
- In your case study Preview, complete the entire journey. Test back, cancel, and restart wherever those actions exist, plus links and instructions.
- Check keyboard navigation, visible focus, contrast, and your chosen screen sizes.
- Reopen the page in the editor to confirm that the work is saved in Draft.
- Ask ChatGPT for a summary of what was tested, what was checked visually, and what still needs attention. Choose one path: keep the page in Draft for more review, or publish after every check passes. If you publish, open the live page and test the journey and links there too. A visual check does not replace interaction tests or a full accessibility review.
Expected result: A complete review, a release choice, and public checks if you publish.
How to check: Can you personally repeat the main actions without errors?
If something does not go as expected: Keep it in Draft, fix the problem, and repeat the affected tests.