Magic Patterns connects to the tools you already use for design, development, analytics, and collaboration. You can access integrations from the chatbar within your design.

## Design Tools

[**Import from Figma** \ 
\ Bring your Figma designs into Magic Patterns as editable code.](/content/docs/documentation/importing/import-from-figma/index.html)

[**Export to Figma** \ 
\ Export your designs to Figma for handoff or further design work.](/content/docs/documentation/get-started/figma-plugin/index.html)

## Developer Tools

[**Sync with GitHub** \ 
\ Two-way sync between Magic Patterns and your GitHub repository.](/content/docs/documentation/get-started/sync-to-github/index.html)

[**MCP Server** \ 
\ Connect your IDE or AI assistant to Magic Patterns via the Model Context Protocol.](/content/docs/documentation/features/mcp-server/overview/index.html)

## Connectors

Connectors let the AI assistant pull real context from external services into your designs. Connect via OAuth and the assistant handles the rest.

[**Granola** \ 
\ Pull meeting notes and context into your designs.](/content/docs/documentation/connectors/connectors/index.html)

[**Notion** \ 
\ Pull pages, databases, and content from your Notion workspace.](/content/docs/documentation/connectors/connectors/index.html)

[**Linear** \ 
\ Pull issues, projects, and roadmaps from Linear.](/content/docs/documentation/connectors/connectors/index.html)

[**PostHog** \ 
\ Pull analytics, feature flags, and experiment data from PostHog.](/content/docs/documentation/connectors/connectors/index.html)

You can also [add your own custom MCP server](/content/docs/documentation/connectors/connectors#adding-a-custom-mcp-server/index.html) as a connector.

## In-Design Services

These integrations work inside your published designs. Add API calls, analytics tracking, email forms, and more directly in your code.

[**OpenAI** \ 
\ Build AI-powered features using the OpenAI API.](/content/docs/documentation/integrations/openai/index.html)

[**Anthropic** \ 
\ Build AI-powered features using the Anthropic Claude API.](/content/docs/documentation/integrations/anthropic/index.html)

[**Google Sheets** \ 
\ Read and write data from Google Sheets.](/content/docs/documentation/integrations/google-sheets/index.html)

[**EmailJS** \ 
\ Send emails directly from your design without a backend.](/content/docs/documentation/integrations/emailjs/index.html)

[**Collecting Feedback** \ 
\ Gather structured feedback from external users on your prototypes.](/content/docs/documentation/integrations/collecting-feedback/index.html)

## E-commerce

[**Shopify** \ 
\ Create a landing page that links directly to your Shopify store and cart.](/content/docs/documentation/integrations/shopify/index.html)

## Analytics

[**Google Analytics** \ 
\ Track page views and user behavior with Google Analytics.](/content/docs/documentation/integrations/google-analytics/index.html)

[**PostHog** \ 
\ Track events and user behavior with PostHog.](/content/docs/documentation/integrations/posthog/index.html)

[**Meta Pixel** \ 
\ Track conversions and optimize ad campaigns with Meta Pixel.](/content/docs/documentation/integrations/meta-pixel/index.html)