10up

Jeffrey Paul

Darin Kotter

<ul>
<li>Embed a Figma file using a block in the WordPress editor.</li>
<li>Paste a Figma URL on a new line in the Block Editor to automatically convert it to a Figma Embed block.</li>
<li>Block settings allow for altering margins of rendered Figma file embed</li>
</ul>
<h3>Getting Started</h3>
<p>Once the plugin is installed and activated, you should see a new Figma Embed block. Insert this block into your content and enter the URL of the Figma file you want to embed.</p>
<p>Assuming it’s a valid URL, the block will automatically fetch the Figma file and display it in the editor. Once saved, this will also display on the front-end.</p>


Embed Block for Figma

Display Figma files using an Embed block.

Harish Chouhan

Themeist Co

<p>This plugin allows designers and developers to overlay a Figma-style layout grid on the frontend of their WordPress site to visually test alignment and spacing. It’s useful for responsive design testing and pixel-perfect comparisons to your original designs.</p>
<ul>
<li>Enable or disable the grid overlay at any time</li>
<li>Configure separate values for Mobile, Tablet, Desktop, and Extended screens</li>
<li>Set number of columns, gutter width, and outer margin</li>
<li>Lightweight and clean — outputs only what’s needed</li>
</ul>


Grid Overlay – Figma Style Layout Grid for WordPress

Visually check if your layout matches your design by overlaying a responsive grid on the frontend — inspired by Figma’s layout grid system.

Embed Block for Figma vs Grid Overlay – Figma Style Layout Grid for WordPress