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

# Figma Components

> Design faster with Pagifye's modular, responsive Figma components using best practices like auto layout and color tokens.

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/EKFqi7NhBoQ" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

## Copy a Component from the Pagifye Library

* Go to the **Pagifye Component Library** and find the section you want to use.
* Click the **Copy Figma** button.
* The design will be copied to your clipboard.

Each component includes multiple versions:

* Light
* Gray
* Dark
* Wireframe

Choose the version that matches your project style.

## Paste and Position in Figma

* Open your Figma file.
* Paste the component into your working frame or artboard.
* Use Figma’s auto layout to resize or adjust sections as needed.

Components are built with nested styles and layout rules, so they’ll stay flexible when you customize:

* Text
* Icons
* Images

## Customize and Build

Now you can:

* Edit text and images effortlessly
* Switch theme layers when needed
* Rearrange or duplicate blocks to build full pages fast
* Mix and match components freely — every block is modular and won’t break the layout
* Switch from **Wireframe** to **Full UI Design** instantly
* Toggle between **Light**, **Gray**, and **Dark** themes for any section
* Make it fully responsive across all devices automatically

Every component is modular, so you can easily mix and match without breaking the structure.

**That’s It!**

You’re now ready to build with **Pagifye + Figma**.\
All components are designed to be:

* Flexible
* Scalable
* Easy to integrate