How to Use Copy Mode in UiChemy?

UiChemy’s Copy mode allows you to export specific sections from your Figma design and paste them directly into your WordPress site. Copy mode gives you more control and flexibility by letting you choose exactly what part of the design you want to export.

Why Should You Use Copy Mode in UiChemy?

To quickly transfer your Figma design into WordPress, without using any extra plugins.

1. Want a faster way to bring your Figma design into WordPress? Use Copy Mode to instantly copy any section of your design and paste it directly into your preferred WordPress editor.

2. Working on just a part of your design? Copy Mode is perfect for importing individual sections, such as headers, hero areas, or feature blocks, with clean and accurate output.

3. Trying to copy the full frame? While it’s possible, copying an entire Main Frame may lead to alignment or width issues, so it’s recommended only if you’re comfortable adjusting layout settings in WordPress.

4. Prefer a plugin-free workflow? Copy Mode doesn’t require any third-party plugin or installation. Just copy from Figma and paste, simple and fast.

5. Need quick previews before a full import? Test out sections in real-time before doing a full export. Copy Mode gives you the flexibility to experiment.

We recommend using Copy mode when you want to export a particular section or inner layout of your design. Avoid copying the entire design using this method to prevent layout and alignment issues.

Note: Copy Mode is best suited for importing individual design sections. While it’s possible to import the entire Main Frame, this approach may result in width or alignment issues that require manual adjustments on the WordPress side.

To get the best result with the Copy Mode feature, make sure your Figma design is optimized for UiChemy.

How to Use UiChemy Copy Mode?

To do this, we have two options here,

Option 1: Step by Step Method

Now, to use the UiChemy Copy Mode with this method, follow the steps below –

1. Open the UiChemy plugin in Figma. 
2. If you don’t have an account, then create an account in UiChemy and log in to your account.
3. Then select the section you want to copy.
4. Then, select the Step by Step Method and click on the Start button.
5. Then, click on the Next button until the Conversion Setting tab.
6. Under the Conversion Setting tab, click on the Convert button.
7. Then, you’ll see the Copy to Clipboard radio button. Select that, and click on the Copy button.
8. After that, you’ll see the process of converting your design on the screen.
9. Once the process is finished, then, click on the Copy to Clipboard button, and your design will be copied to your clipboard.

Option 2: Express Conversion

In the Express Conversion method, you can use the UiChemy Copy Mode by following these steps – 

1. Open the UiChemy plugin in Figma. 
2. If you don’t have an account, then create an account in UiChemy and log in to your account.
3. Then select the section you want to copy.
4. Then, select the Express Conversion and click on the Start button.
5. Then, click on the Next button until you reach the Express Conversion tab.
6. Under the Express Conversion tab, click on the Convert button.
7. Then, you’ll see the Copy to Clipboard radio button. Select that, and click on the Copy button.
8. After that, you’ll see the process of converting your design on the screen.
9. Once the process is finished, then, click on the Copy to Clipboard button, and your design will be copied to your clipboard.

• If you select a child section or inner content, the Direct Import option will be disabled, and you can only use Copy to Clipboard.
• If you select the main outer frame, both radio options (Direct Import & Copy to Clipboard) will be visible, and you can choose either one.

Recommended:

• For exporting an individual section or layout, use Copy to Clipboard.
• For exporting the entire page, use Direct Import.

Note: With the Optimize option, you can optimize your design, while the Express option is suitable if your design is already optimized for UiChemy conversion.

Paste Design in Elementor

Now, to paste the design into the Elementor editor, follow the steps – 

1. Open the page or template where you want to paste the design in the Elementor editor.
2. Then right-click on the dotted border section and select the Paste from other site option, and then press the Ctrl + V button to paste the design. Now the design will be added to your editor. i.e. About Us

Additional Tips

• If you encounter alignment or layout issues post-conversion, refer to the UiChemy support resources or check if the Figma structure follows the recommended guidelines.

By following these steps, you can quickly and effectively use UiChemy’s Copy Mode to bring Figma designs into WordPress without additional plugins.