> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Importing from Figma

> Bring in existing UI

In this lesson, you will learn how to bring existing designs into Magic Patterns so you can extend and prototype with AI instead of rebuilding from scratch, whether you start from screenshots, files, or a handoff from another tool. When your source frames live in Figma, use [import from Figma](/documentation/importing/import-from-figma). Keep generated UI aligned with your [design system](/documentation/design-systems/overview) and reusable [components](/documentation/design-systems/editing/components). When you are ready to show progress, use [sharing](/documentation/editor/sharing) and [publishing a custom URL](/documentation/publishing/publish-url).

<iframe className="w-full aspect-video" src="https://www.youtube.com/embed/v1lg-WHYwAc?si=NEFmEeCEyo5rhUEL" title="Importing" alt="Importing" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

<Card title="Next: Design Systems" icon="play" href="/documentation/guide/design-systems">
  Continue to lesson four and use your design system.
</Card>