Importing a block from Figma
Importing a block allows you to quickly transfer a block with elements from a design in Figma directly to your site's editor. This is convenient when you or another designer has prepared an user interface in Figma for a future website that needs to be created on Weblium.
You only need to connect the integration once, after which you can sequentially add empty Flex blocks in the Weblium editor and import a frame from Figma. Images, texts, block background, etc., will be automatically transferred to your website. Thanks to this you can save a lot of time.
Content:
Creating an API token in Figma
Importing block into Weblium
Frame requirements in Figma
Recommendations and tips
Customizing site styles to match the frame (optional)
Possible errors and their solutions
Tip: You can find an example of the block in Figma at this link. You can import this block to test the feature and use it as a reference when creating designs in Figma.
You need to create an API token in Figma, which will be used when importing a block. After the first import of the block to Weblium, this token will be automatically substituted for further imports to Weblium within all your sites.
While editing a file in Figma, open the main menu in the top left corner, expand the Help and account submenu and select Account settings:
Tip: If you are not in an opened file but on the main Figma page, you need to click on your profile name in the upper left corner and select “Settings.”
Scroll down the settings and in the Personal access tokens section click on the Generate new token button:
Specify the desired name for your token (①); in the Expiration drop-down list, we recommend selecting No expiration (②). This way, this API token will work without time restrictions. After that, click the Generate token button (③):
Copy your token using the Copy this token button:
Note: The token is only available for copying in Figma for a limited time after it is generated. If the token is lost, you can generate a new one.
Go to the site editor on Weblium and add an empty Flex block in the place where you need to import the block (frame) from Figma.
Click on the 3 dots in the upper right corner of the Flex block, select Import from Figma, and paste the previously copied token into the Add API token field:
Tip: If you have previously imported blocks from your current Figma account to your current Weblium account, the required token will be set automatically.
Open your design file in Figma, select exactly the frame you need to import, and copy the link to it. If you are using the browser version of Figma, you can simply copy the URL (link) from the address bar:
Tip: Individual texts and images (groups of images) must be at the frame level (already in it). Thus, each image/text will be a separate element after import. You can see an example of the structure in the screenshot above on the left. More detailed information about the recommendations can be found in the corresponding section.
...if you are using the Figma application installed on your computer, right-click on the desired frame, select Copy/Paste as, and click Copy link to selection:
Tip: Alternatively, to copy a link, you can simply select the desired frame and press the Ctrl+L hotkey.
Return to the Weblium editor, paste the previously copied link into the Add a frame link field, and click the Import button:
Done! The block has been imported to your site:
Important: When importing from Figma, certain elements may not be transferred to Weblium. Using import, you can create blocks' drafts that, in some places, will require additional edits (adding elements not recognized during import, etc.).
Note: Currently, you can transfer blocks one at a time (not the entire site at once).
Tip: Once again, here's an example of the block in Figma. You can import it to test the feature and use it as a reference when creating designs in Figma.
The frame (imported block) must be no less than 65 px and no more than 3000 px. If your frame has a larger height, it must be divided into separate frames;
The block you import into Figma must be either a frame (recommended) or a group of elements. It is important to note that 1 frame corresponds to 1 block after import to Weblium;
The frame should not be hidden in Figma:
Note: If the text in Figma has certain additional decoration that is not available on our platform (text outline, masks, etc.), then such text will be imported as an image. Therefore, it is recommended that text be imported as plain text without effects.
The recommended frame width is 1600 px with content located in the middle of the frame within a width of 1170 px (this is the width of the Flex block workspace). In other words, in a frame with a width of 1600 px, we recommend making side paddings of 215 px on both sides so that all elements are within 1170 px in the middle.
Important: The maximum allowed frame height is 3000 px. Frames with larger heights must be split into separate frames before importing.
Tip: The layout grid can help you stay within 1170 px. Please find more information on that in a corresponding section below.
When you import a block into Weblium, each element that is located directly inside the frame in Figma is loaded separately. That is, the structure of the frame should be as follows: Frame → groups, buttons, texts, images, and other elements.
In this case, each group of elements will be recognized as 1 element. Say, if 3 images are grouped inside a frame, then after import, they will become 1 single image.
Therefore, in order for the elements in the block to also be separate elements in the Weblium editor after import, you need to move all the necessary elements or groups to the frame level in the Figma design. In other words, make sure that each image (or a group consisting of several small images), text, etc., is directly inside the frame in the Figma sidebar.
For example, if you have two or more large grouped images in a frame, we recommend ungrouping them (the key combination Ctrl+⌫) so that they appear as separate elements directly inside the frame. This way once imported into Weblium, they will also be separate, and you can move and edit them independently.
Essential: If you want to edit on Weblium any element located in Figma inside a group, move this element out of the group to the frame level.
Example:
Frame, which will subsequently be imported into Weblium;
Immediately inside the frame, each image is added separately. In the screenshot, 1 separate image is highlighted as an example. That is, these images are not grouped together; they are different objects within the frame;
Also, each text is an independent element within the frame. If necessary, texts can remain grouped if the group contains only texts:
However, if you have 1 image consisting of a collection of various small elements, then you can leave them as 1 group, which will be imported into Weblium as 1 single image. Below is an example of such a group — a rectangle with 4 small icons is combined into 1 group (named image 6). Therefore, after importing to Weblium, it will be 1 single image:
If your block contains buttons, you can use the word button as the name of the group of this button in Figma (without other characters in the name) and, like other elements, move this button to the frame level in Figma. This way, the “Button” element will be created in Weblium in this place. In this case, the text located inside such a group will be set as the text of the Weblium button, and the button styles (shape, color, etc.) will be specified in accordance with the global button settings of your site.
Note: A necessary condition for importing a button is both the word “button” as the name of the group that will be turned into a button and the presence of a text element inside this group.
If you do not set the word “button” as the name of the required Figma element, such a button and its text will be imported as a regular image.
After importing the default block, the button will be added in medium size and with Primary style.
We recommend that you configure your site’s styles (color palette and fonts) before importing so that in the future, if necessary, you can change all the styles of your site at once in a few clicks. More details about this in the next section of this guide.
As of today, element styles specified in Figma (shadows, corner rounds, strokes, masks, etc.) are imported as an image without applying such styles in the element settings in the Weblium editor. That is, for example, if you have an element in Figma with rounded corners and a shadow, then Weblium will import a rectangular image, where the rounded corners and shadow will be part of the image without the possibility of further editing.
If a group is added to the frame, within which there is text along with other elements, then this text will be imported as an image (not as a typed text). Likewise, if you use text as a mask over an image, it will be imported as an image.
If a group contains only text elements and/or buttons, then they will be imported correctly as text elements — that is, you can group text elements and buttons together if there is nothing else in the group. In other words, a group in Figma that contains only text elements and buttons is ungrouped automatically.
If you import a frame into a Flex block that already has content, the new elements will be placed on top of the existing ones. In this case, the background of the block will be changed to a new one (the same as in the frame in Figma).
After a successful import and completion of all block edits, please remember to adapt the imported block to display on your website's mobile and tablet versions. To do this, go to the site editor for the corresponding device (at the top in the middle of the Weblium editor) and place the elements there in the way you need.
To make it easier to fit elements within the center 1170 px of a frame in Figma, you can add a grid to the frame with columns that are 1170 px wide in total and centered. The simplest option is to add 1 column with a width of 1170 px, but we recommend adding 8 columns with the same parameters as ordinary blocks on Weblium. This way, you can place the elements in the Figma design so that they have the same width as elements in other blocks (not Flex block) on your site. For this:
① Select your layout and click on the plus sign in the Layout grid section in the right sidebar;
② Open Layout grid settings;
③ Select Columns instead of "Grid" in the drop-down list to display columns;
④ Specify the settings for them according to the screenshot below, namely Count (the number of columns) is 8, Type is Center (to align the columns in the center), Width — 120 px and Gutter (the gap between columns) — 30 px.
This way, the sum of the columns and the spaces between them is 1170 px, which will help you place elements within that width, and, if necessary, you can set such a width of elements so that they are within a certain number of columns. For example, in the screenshot above, the text on the left is placed within 4 columns. If a regular block (not a Flex block) is added below or above this imported block in the Weblium editor, the elements in this regular block will also be placed according to the same grid, ensuring design consistency.
Tip: You can save this grid in the Styles of your layout to add it to other frames in a few clicks. To do this, after adding the grid, click on the 4 dots to the right of the "Layout grid". Then, in the new "Grid styles" window, click the plus icon, enter an arbitrary name for this style, and click the "Create style" button. After that, in the new frame, you can add this grid in 1 click by clicking on the 4 dots to the right of the "Layout grid" and selecting this grid.
If you're creating a new site, for best results, you can adjust the fonts and color palette of the site in the Weblium editor so that they match the layout in Figma before importing the blocks sequentially.
Tip: The actions in this section are not mandatory, but they will improve the future result. Namely, they will allow you to change colors and font settings for many elements in the editor simultaneously. That is, the settings of Figma elements will be more consistent with the style settings of the site on Weblium.
In the upper left corner, open Site Styles (①), click on the Edit button under your current site palette (②), then click on the multi-colored squares one by one (③) and indicate in the appropriate field (④ ) HEX code for the primary colors used in your layout. Thus, for example, if after import, certain texts have one of the colors specified in these settings, then in the future, you will be able to change this color for all texts in the site palette at once:
Tip: You can learn more about setting up the site color palette in this article.
Also in Site Styles go to the Fonts tab (①), click on the Edit button under the current site fonts (②). Then sequentially open different types of font (“Hero title,” “Block title,” ... “Text,” etc. ③) and set for them the font settings that are used in your Figma design (first of all font size and the font name itself, such as Lato, Montserrat, etc.).
This way, if certain texts from a Figma frame match the size of a certain font type on your site, the imported texts will be in the exact font you specified. Additionally, you can then change the style for all text of a certain type at once in the site style settings:
Tip: More information about setting up site fonts can be found in this guide.
Also, before or after import, you can globally adjust the style of your site's buttons to match the design in Figma. If a particular element in a frame has the word button as its name, then after import, it will be added as a button, and you can specify one of your site's button sites for it.
The table below lists the errors that may appear in the Weblium editor. In the left column, you can see the error text shown in the editor. Where each error may be displayed is listed in the central column. The comments in the right column will help you fix these issues.
In this table, the errors after which the import cannot continue until you resolve the issue:
After the following errors, the import continues, but some elements will not be imported:
You only need to connect the integration once, after which you can sequentially add empty Flex blocks in the Weblium editor and import a frame from Figma. Images, texts, block background, etc., will be automatically transferred to your website. Thanks to this you can save a lot of time.
Content:
Creating an API token in Figma
Importing block into Weblium
Frame requirements in Figma
Recommendations and tips
Customizing site styles to match the frame (optional)
Possible errors and their solutions
Tip: You can find an example of the block in Figma at this link. You can import this block to test the feature and use it as a reference when creating designs in Figma.
Create an API token in Figma
You need to create an API token in Figma, which will be used when importing a block. After the first import of the block to Weblium, this token will be automatically substituted for further imports to Weblium within all your sites.
While editing a file in Figma, open the main menu in the top left corner, expand the Help and account submenu and select Account settings:
Tip: If you are not in an opened file but on the main Figma page, you need to click on your profile name in the upper left corner and select “Settings.”
Scroll down the settings and in the Personal access tokens section click on the Generate new token button:
Specify the desired name for your token (①); in the Expiration drop-down list, we recommend selecting No expiration (②). This way, this API token will work without time restrictions. After that, click the Generate token button (③):
Copy your token using the Copy this token button:
Note: The token is only available for copying in Figma for a limited time after it is generated. If the token is lost, you can generate a new one.
Go to the site editor on Weblium and add an empty Flex block in the place where you need to import the block (frame) from Figma.
Click on the 3 dots in the upper right corner of the Flex block, select Import from Figma, and paste the previously copied token into the Add API token field:
Tip: If you have previously imported blocks from your current Figma account to your current Weblium account, the required token will be set automatically.
Importing a block into Weblium
Open your design file in Figma, select exactly the frame you need to import, and copy the link to it. If you are using the browser version of Figma, you can simply copy the URL (link) from the address bar:
Tip: Individual texts and images (groups of images) must be at the frame level (already in it). Thus, each image/text will be a separate element after import. You can see an example of the structure in the screenshot above on the left. More detailed information about the recommendations can be found in the corresponding section.
...if you are using the Figma application installed on your computer, right-click on the desired frame, select Copy/Paste as, and click Copy link to selection:
Tip: Alternatively, to copy a link, you can simply select the desired frame and press the Ctrl+L hotkey.
Return to the Weblium editor, paste the previously copied link into the Add a frame link field, and click the Import button:
Done! The block has been imported to your site:
Important: When importing from Figma, certain elements may not be transferred to Weblium. Using import, you can create blocks' drafts that, in some places, will require additional edits (adding elements not recognized during import, etc.).
Note: Currently, you can transfer blocks one at a time (not the entire site at once).
Tip: Once again, here's an example of the block in Figma. You can import it to test the feature and use it as a reference when creating designs in Figma.
Frame requirements in Figma
The frame (imported block) must be no less than 65 px and no more than 3000 px. If your frame has a larger height, it must be divided into separate frames;
The block you import into Figma must be either a frame (recommended) or a group of elements. It is important to note that 1 frame corresponds to 1 block after import to Weblium;
The frame should not be hidden in Figma:
Note: If the text in Figma has certain additional decoration that is not available on our platform (text outline, masks, etc.), then such text will be imported as an image. Therefore, it is recommended that text be imported as plain text without effects.
Recommendations and tips
Frame size
The recommended frame width is 1600 px with content located in the middle of the frame within a width of 1170 px (this is the width of the Flex block workspace). In other words, in a frame with a width of 1600 px, we recommend making side paddings of 215 px on both sides so that all elements are within 1170 px in the middle.
Important: The maximum allowed frame height is 3000 px. Frames with larger heights must be split into separate frames before importing.
Tip: The layout grid can help you stay within 1170 px. Please find more information on that in a corresponding section below.
Structure
When you import a block into Weblium, each element that is located directly inside the frame in Figma is loaded separately. That is, the structure of the frame should be as follows: Frame → groups, buttons, texts, images, and other elements.
In this case, each group of elements will be recognized as 1 element. Say, if 3 images are grouped inside a frame, then after import, they will become 1 single image.
Therefore, in order for the elements in the block to also be separate elements in the Weblium editor after import, you need to move all the necessary elements or groups to the frame level in the Figma design. In other words, make sure that each image (or a group consisting of several small images), text, etc., is directly inside the frame in the Figma sidebar.
For example, if you have two or more large grouped images in a frame, we recommend ungrouping them (the key combination Ctrl+⌫) so that they appear as separate elements directly inside the frame. This way once imported into Weblium, they will also be separate, and you can move and edit them independently.
Essential: If you want to edit on Weblium any element located in Figma inside a group, move this element out of the group to the frame level.
Example:
Frame, which will subsequently be imported into Weblium;
Immediately inside the frame, each image is added separately. In the screenshot, 1 separate image is highlighted as an example. That is, these images are not grouped together; they are different objects within the frame;
Also, each text is an independent element within the frame. If necessary, texts can remain grouped if the group contains only texts:
However, if you have 1 image consisting of a collection of various small elements, then you can leave them as 1 group, which will be imported into Weblium as 1 single image. Below is an example of such a group — a rectangle with 4 small icons is combined into 1 group (named image 6). Therefore, after importing to Weblium, it will be 1 single image:
Importing the “Button” element
If your block contains buttons, you can use the word button as the name of the group of this button in Figma (without other characters in the name) and, like other elements, move this button to the frame level in Figma. This way, the “Button” element will be created in Weblium in this place. In this case, the text located inside such a group will be set as the text of the Weblium button, and the button styles (shape, color, etc.) will be specified in accordance with the global button settings of your site.
Note: A necessary condition for importing a button is both the word “button” as the name of the group that will be turned into a button and the presence of a text element inside this group.
If you do not set the word “button” as the name of the required Figma element, such a button and its text will be imported as a regular image.
After importing the default block, the button will be added in medium size and with Primary style.
General notes and tips
We recommend that you configure your site’s styles (color palette and fonts) before importing so that in the future, if necessary, you can change all the styles of your site at once in a few clicks. More details about this in the next section of this guide.
As of today, element styles specified in Figma (shadows, corner rounds, strokes, masks, etc.) are imported as an image without applying such styles in the element settings in the Weblium editor. That is, for example, if you have an element in Figma with rounded corners and a shadow, then Weblium will import a rectangular image, where the rounded corners and shadow will be part of the image without the possibility of further editing.
If a group is added to the frame, within which there is text along with other elements, then this text will be imported as an image (not as a typed text). Likewise, if you use text as a mask over an image, it will be imported as an image.
If a group contains only text elements and/or buttons, then they will be imported correctly as text elements — that is, you can group text elements and buttons together if there is nothing else in the group. In other words, a group in Figma that contains only text elements and buttons is ungrouped automatically.
If you import a frame into a Flex block that already has content, the new elements will be placed on top of the existing ones. In this case, the background of the block will be changed to a new one (the same as in the frame in Figma).
After a successful import and completion of all block edits, please remember to adapt the imported block to display on your website's mobile and tablet versions. To do this, go to the site editor for the corresponding device (at the top in the middle of the Weblium editor) and place the elements there in the way you need.
Using a layout grid to place elements
To make it easier to fit elements within the center 1170 px of a frame in Figma, you can add a grid to the frame with columns that are 1170 px wide in total and centered. The simplest option is to add 1 column with a width of 1170 px, but we recommend adding 8 columns with the same parameters as ordinary blocks on Weblium. This way, you can place the elements in the Figma design so that they have the same width as elements in other blocks (not Flex block) on your site. For this:
① Select your layout and click on the plus sign in the Layout grid section in the right sidebar;
② Open Layout grid settings;
③ Select Columns instead of "Grid" in the drop-down list to display columns;
④ Specify the settings for them according to the screenshot below, namely Count (the number of columns) is 8, Type is Center (to align the columns in the center), Width — 120 px and Gutter (the gap between columns) — 30 px.
This way, the sum of the columns and the spaces between them is 1170 px, which will help you place elements within that width, and, if necessary, you can set such a width of elements so that they are within a certain number of columns. For example, in the screenshot above, the text on the left is placed within 4 columns. If a regular block (not a Flex block) is added below or above this imported block in the Weblium editor, the elements in this regular block will also be placed according to the same grid, ensuring design consistency.
Tip: You can save this grid in the Styles of your layout to add it to other frames in a few clicks. To do this, after adding the grid, click on the 4 dots to the right of the "Layout grid". Then, in the new "Grid styles" window, click the plus icon, enter an arbitrary name for this style, and click the "Create style" button. After that, in the new frame, you can add this grid in 1 click by clicking on the 4 dots to the right of the "Layout grid" and selecting this grid.
Customizing site styles to match the frame (optional)
If you're creating a new site, for best results, you can adjust the fonts and color palette of the site in the Weblium editor so that they match the layout in Figma before importing the blocks sequentially.
Tip: The actions in this section are not mandatory, but they will improve the future result. Namely, they will allow you to change colors and font settings for many elements in the editor simultaneously. That is, the settings of Figma elements will be more consistent with the style settings of the site on Weblium.
In the upper left corner, open Site Styles (①), click on the Edit button under your current site palette (②), then click on the multi-colored squares one by one (③) and indicate in the appropriate field (④ ) HEX code for the primary colors used in your layout. Thus, for example, if after import, certain texts have one of the colors specified in these settings, then in the future, you will be able to change this color for all texts in the site palette at once:
Tip: You can learn more about setting up the site color palette in this article.
Also in Site Styles go to the Fonts tab (①), click on the Edit button under the current site fonts (②). Then sequentially open different types of font (“Hero title,” “Block title,” ... “Text,” etc. ③) and set for them the font settings that are used in your Figma design (first of all font size and the font name itself, such as Lato, Montserrat, etc.).
This way, if certain texts from a Figma frame match the size of a certain font type on your site, the imported texts will be in the exact font you specified. Additionally, you can then change the style for all text of a certain type at once in the site style settings:
Tip: More information about setting up site fonts can be found in this guide.
Also, before or after import, you can globally adjust the style of your site's buttons to match the design in Figma. If a particular element in a frame has the word button as its name, then after import, it will be added as a button, and you can specify one of your site's button sites for it.
Possible errors and their solutions
The table below lists the errors that may appear in the Weblium editor. In the left column, you can see the error text shown in the editor. Where each error may be displayed is listed in the central column. The comments in the right column will help you fix these issues.
Errors with which import is not possible
In this table, the errors after which the import cannot continue until you resolve the issue:
| Error text | Where it occurs | How to solve it |
|---|---|---|
| This field is required | Under fields in the menu before the import | Fill in the necessary fields according to the guide — insert a link to the frame and token from Figma |
| Incorrect frame link | Under the "Add a frame link" field | Check whether you copied the frame link correctly in Figma. You need to select precisely 1 frame and copy the link to it according to the guide above. |
| Please insert a link to the specific frame | Under the "Add a frame link" field | A link to a general Figma file has been added to the field instead of a link to the specific frame. You need to select a particular frame in Figma and copy the link to it. |
| Your frame is over 3000 pixels high. Please reduce it or split it into separate frames. | In the pop-up, after clicking the "Import" button | You should make the height of the frame you are importing less than 3000 pixels. How to check the height of the frame can be seen on the screenshot in this section (the height is marked with a number ①). If, after reducing the frame's height, you can't fit all the elements in it, you can create a new frame and move part of the elements from the first frame to the new one. This way, divide the frame into several ones and import each of them separately into different Flex blocks. |
| The selected element should be either a frame or a group. Please select an element with the correct type in the Figma file. | In the pop-up | During the import, you added a link not to a group or frame but to an element of another type. Copy a link to a frame (recommended) or a group in Figma. Before copying the link, adjust the design so that the block from Figma to be imported is either a frame or a group. |
| The frame is hidden in Figma. Please make it visible and try again. | In the pop-up | To make a frame visible in Figma, hover over it in the left sidebar and click on the closed-eye icon to open it (after that, the frame name will also turn black). You can see this icon in the screenshot in this section (marked with the number ②). |
| The selected element does not exist in the Figma file. Please check if the frame link is correct and try again. | In the pop-up | This error can occur if you have copied a link to an element (frame) and then deleted it from the design file in Figma. Try copying the frame link and importing it again. |
| The frame link is incorrect, or a Figma file does not exist. Please check if the link is correct and try again. | In the pop-up | The link to the file in Figma is incorrect. After copying the link, the file in Figma was probably deleted, or the link was copied incorrectly. Try copying the frame link and importing it again. |
| There was an error with importing on the Figma server's side. Please try again. | In the pop-up | Figma encountered a server error during import that is not related to Weblium. Please try the import again as per the instructions above. |
| The token is incorrect or has expired. Please check if the token is correct and try again. | In the pop-up | Following the first section of this guide, try generating a new token in Figma, adding it to your Flex block, and repeating the import. When creating a token, we recommend selecting "No expiration" in the "Expiration" drop-down list so that it will work without time limits. |
Errors with which partial import continues
After the following errors, the import continues, but some elements will not be imported:
| Error text | Where it occurs | How to solve it |
|---|---|---|
| There was an error with importing the "Element name" because of Figma's rate limit (too many images) | In the editor, above each element that could not be imported and instead of which an empty image was added | Figma has its limitations (rate limit) on the number of elements (e.g., images) that can be uploaded within a period of time. So if your 1 imported frame has too many photos (approximately more than 60), some images may not be imported. Usually, it happens only with a few images when there are over 60 elements in a block. Elements that have not been imported will be added as blank images, so we recommend exporting the needed images from Figma as images and adding them manually in the Weblium editor. Alternatively, you can reduce the number of pictures or split the frame into several smaller ones to import them separately. |
| There was an error with importing the "Element name" from Figma | In the editor, above each element that could not be imported and instead of which an empty image was added | An unspecified error occurred while importing these elements (this could be either on Figma's side or on our side). Elements that have not been imported will be added as blank images, so we recommend exporting the needed images from Figma as images and adding them manually in the Weblium editor. |
Updated on: 05/09/2024
Thank you!