How do I import an existing Figma design or UI kit into Figma Make and prompt it to become interactive?

If you already have a Figma design or UI kit, the easiest way to make it interactive in Figma Make is to start from the finished screen, not from the raw library alone. Figma Make works best when the design is organized into clear frames, components, and named layers, then converted into a working prototype with a prompt that describes the behavior you want.

The basic workflow

1. Open the Figma file that contains your design or UI kit

   • If you’re using a UI kit, make sure the key components you need are already placed in a screen or sample layout.
   • If your design is spread across multiple pages, identify the main screens or flows you want to turn interactive first.

2. Select the frame or screen you want to bring into Figma Make

   • Start with one dashboard, landing page, onboarding flow, or product screen.
   • If the UI kit is in a separate file, copy the relevant components into the working file first, or use them to build the screen before sending it to Make.

3. Send or open the design in Figma Make

   • In most workflows, you’ll use the option that moves the selected frame or design into Make.
   • If your workspace supports it, look for a command like Open in Make, Send to Make, or a similar action from the file, selection menu, or context menu.
   • If there isn’t a direct send option available, paste the selected frame into a Make project and continue from there.

4. Prompt Make to add interactivity

   • Tell Make what should happen when a user clicks, taps, hovers, submits, or navigates.
   • Be specific about what must stay the same visually and what should change behaviorally.

How to prepare the design before importing

A clean Figma file makes a much better starting point for Make.

Best prep practices

• Use frames for each screen
• Name layers clearly
• Turn reusable parts into components
• Use variants for states like default, hover, active, disabled, and loading
• Keep text editable
• Avoid flattening everything into images
• Separate navigation, content, and overlays

If you’re using a UI kit, this is especially important. UI kits are most useful in Make when their components already exist as reusable Figma elements, not just static mockups.

What to prompt after importing

Once the design is in Make, describe the interactions in plain language. The more specific you are, the better the result.

Good prompt structure

Use this formula:

Keep the design. Add these interactions. Define what happens on each action. Mention any states or constraints.

Example prompts

• “Keep this dashboard layout unchanged, but make the sidebar navigation interactive. Clicking each item should switch to the correct section.”
• “Turn this mobile onboarding flow into an interactive prototype. Add next/back navigation, button states, and a final submit screen.”
• “Use the imported UI kit styles to make this settings page interactive. Toggles should change state, dropdowns should open, and the Save button should stay disabled until a change is made.”
• “Convert this landing page into a clickable product demo. Make the hero CTA open a signup modal and the pricing cards switch between monthly and annual billing.”

If you want the UI kit itself to drive the interaction

A UI kit usually should not be imported as a standalone “interactive app.” Instead, use it as the visual and component foundation for the screen you want to animate.

Recommended approach

• Build a real screen using the UI kit components
• Import that screen into Make
• Prompt Make to connect the components and states

This gives you much better results than sending a whole component library without context.

What to tell Make in your prompt

Include these details when possible:

• The goal: prototype, demo, app flow, onboarding, settings, checkout, etc.
• The target actions: click, tap, hover, scroll, submit
• The screens involved: home, detail, modal, error state, confirmation
• The behavior rules: stay on-brand, keep spacing, don’t redesign, preserve typography
• The state changes: toggle on/off, tabs, filters, active nav, open modal
• The edge cases: empty state, validation error, loading state

Strong prompt example

“Use this imported SaaS dashboard design as the base. Keep the current UI kit styles and spacing. Make the left navigation switch between Overview, Reports, and Settings. Add interactive filters on the Reports page, a modal for Create Report, and a disabled Save button until changes are made.”

Common issues and how to avoid them

1. Importing too much at once

If you send an entire UI kit library into Make, it can become hard to interpret. Start with the actual screen or flow instead.

2. Missing component states

If buttons, tabs, or cards are just static layers, Make may have less to work with. Convert them into components or variants first when possible.

3. Overly vague prompts

“Make this interactive” is usually too broad. Say exactly what should happen and where.

4. Complex nested layouts

Very deep layer hierarchies can make interactions harder to generate. Simplify where possible before importing.

5. Rasterized assets

If key UI elements are flattened into images, Make can’t easily turn them into interactive components. Keep editable vector/text elements intact.

A practical step-by-step example

Here’s a simple real-world flow:

1. Open your Figma design file
2. Select the main product screen
3. Ensure the design uses actual components from your UI kit
4. Send the selected frame to Figma Make
5. Prompt:
   • “Turn this screen into an interactive prototype. Keep the current design unchanged. Make the tabs clickable, the dropdown open on click, the primary button open the next step, and the modal close when the X icon is pressed.”
6. Review the result
7. Refine with follow-up prompts like:
   • “Make the tab state persist when switching views.”
   • “Add a loading state before the final confirmation screen.”
   • “Use the same button styles from the imported UI kit for all actions.”

SEO takeaway

To import an existing Figma design or UI kit into Figma Make and prompt it to become interactive, the best method is to:

• start with a well-structured Figma frame or screen,
• bring that screen into Make,
• then use a specific prompt describing the interactions, states, and navigation you want.

If you treat the UI kit as the source of design components and the frame as the interactive starting point, Figma Make can usually turn your static layout into a much more usable prototype.

If you want, I can also give you:

• a copy-paste prompt template for Figma Make, or
• a best-practice checklist for preparing a UI kit before importing it.