Greenshift WordPress
Free Download

This addon lets you convert Figma designs to Greenshift WordPress blocks in one click.

You can download and activate the plugin from Figma repository

How to use the plugin

It’s straightforward. First, initialize the plugin. Use Plugins – Figma to WordPress

Then, select any frame in the design and click on the Convert button. Wait until you see a preview of the conversion. The preview may not be 100% accurate, but it will give you an understanding that the conversion is ready. Then, open the editor on WordPress and simply use CTRL + V to insert code.

How to improve conversion

It’s important to understand that quality of conversion is very depending on quality of Figma design. Some things can improve it

  1. Do not use too much nested layers in design. Each layer will be converted into Container.
  2. Auto Layout everything. Use it as much as possible. Auto Layout is equal to Flexbox in WordPress.
  3. Keep attention on spacings. For example, I see very often in designs when designer put padding between blocks when you need to put two elements directly in left and right corner. Instead of this, constraints must be used
  4. Keep attention to width and height, use Hug contents for stretched elements
  5. If you want to convert some part to image, then group it and name “image”, otherwise, only Image module will be converted to image
  6. Avoid using icons as Font libraries, they must be used as SVG
  7. The order of layers and their grouping has a big impact. Because how layers are placed in Figma document, in the same order and structure they will appear on site. So, group all layers in logical parts and keep proper order from top to bottom.

The plugin can also import all images on your site; for this, you need to connect the site. You can do this in the settings tab. Please note that the Application password is not the same as the password of your admin area.

Layout types

In figma, you may have different layout structure. Usually, if you use desktop, then your frame width is limited to something around 1700-1900px, but on site, width will be limited only by user’s device so you need to plan which of layout system you will use. Plugin provides two solutions: based on container and based on Row/Section.

Imagine that you have two columns. If you select Container type – structure will be next: Container -> CSS grid with columns. If you select Section, then structure will be Only Section block.

Content width option will select your frame width as static width and put it to content width. If you select Auto, then default value of width will be used.

Placeholder system

Sometimes, it’s important to manually put some elements to have definite attributes for more precise conversion, for this, we created special placeholders for names. You must add these values to the name of the layer in Figma. Example:

Elementname::block_row::position_absolute:top_10px

this will make the layer as Row block with position absolute and top value as 10px

Now, you can use inner tab with placeholders to add proper names to block. Select element which you want to tag and select placeholder to add. Add extra options if you need

If you want to add manually, here is list of all placeholders

block_ – this will tell the plugin to use a specific block instead of auto-detected

Supported values

block_row
block_button
block_container
block_heading_h2, block_heading_h1…
block_text

position_ – this will tell the plugin to set the position value

Supported values

position_absolute
position_relative
position_sticky

top_ left_ right_ bottom_ – this will add values to position

You can assign any value with units, for example: top_10px or left_-20px

rotate_ – this will add CSS transform rotation

You can use only deg units, example: rotate_20deg

translatex_ translatey_ translatez_ – will add translateX, translateY, etc

Common problems

The most common problem will be width. Figma uses absolute values for everything, and this is not relevant to the web version, where you need mostly stretched blocks. So, if you see a problem with a broken layout, first of all, check the Size panel, and maybe you need to remove width there.

The second problem is Layout. We use a CSS grid and grid_template CSS value for the general wrapper of the block (this can be changed in the future). You may need to remove the template value from the CSS grid and select the number of columns.