Setup block designs in Figma

Turn the empty blocks into your own style of wireframe designs, or customize them for a specific client.

Setting up your Figma block designs

If you have not followed the Getting Started guide and run your First Wireframe Sync, I suggest you do both of these first. Once you have run an initial import, if you take a look at the "Octopus Blocks" page in Figma, you will find that all of the wireframe blocks that you are using in your Octopus.do sitemap will now be highlighted in green.

Green blocks indicate they need to be setup, white blocks are currently unused by your Octopus.do site map.

Replace the green frames with your own Figma designs for each block, being careful not to delete the top level component. You can add your own components or design from scratch, this is totally up to you.

Example blocks that have been replaced with some simple wireframe designs.

Once this is done, go back to your Figma wireframe page and re-run the wireframe sync process, this will re-layout the whole wireframe page and re-draw all the connecting lines as the size of all the pages will have changed. You can re-run the sync process as many times as you like.

Custom or missing blocks

If you created your own custom symbols within Octopus.do and name them with square brackets, the plugin will recognize them as custom blocks and will automatically add them to the Custom Blocks section when you run the wireframe import process. If Octopus.do add any new blocks and you choose to use them, they will be automatically added to the same section for you to use, however as you can see below, they will not have square brackets.

You can edit these in the same way you can with any of the other blocks.