This addon allows you to convert figma designs to Greenshift WordPress blocks in one click.
To install plugin, download and unzip this file in any place on site
Only All in one and Woocommerce plan users can download addon. Please, visit page on our shop and login in your acount
Next, install Figma app for desktop
Then, open any file in app, and use context menu (right click) -> Development -> plugins -> select “import plugin from manifest”
How to use plugin
It’s very simple. First, initialize plugin. Use Plugins – Development – Figma to WordPress
Then, select any frame in design and click on Convert button. Wait until you will see preview of conversion. Preview can be not 100% accurate, but it will give you understanding that conversion is ready. Then, open 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. There are some things that can improve it
- Do not use too much nested layers in design. Each layer will be converted into Container.
- Auto Layout everything. Use it as much as possible. Auto Layout is equal to Flexbox in WordPress.
- 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
- Keep attention to width and height, use Hug contents for stretched elements
- If you want to convert some part to image, then group it and name “image”, otherwise, only Image module will be converted to image
- Avoid using icons as Font libraries, they must be used as SVG
- 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 web version where you need mostly stretched blocks. So, if you see problem with broken layout, first of all, check Size panel and maybe you need to remove width there.
Second problem is Layout. We use CSS grid and grid_template CSS value for general wrapper of block (this can be changed in future). You may need to remove template value from CSS grid and select number of columns.