Getting Started

A quick guide to setting up your Figma project so that it will work smoothly with this plugin.

Initial Setup of your Figma project

Note: If you skip these steps, things will not work.

There are a couple of things you currently need to do before trying the plugin, we are intending to eliminate these steps in a future release to make it even easy to use the plugin.

Setup your Figma project

1. Create a page within your Figma file and name it "Octopus Blocks"

2. Create a second page and call it "Wireframes"

The two new pages within your Figma project.

Create the empty block templates

1. Run the plugin and click on the "Blocks" tab, setup your required page width for your wireframe designs and click "Add Blocks", this will create a grid of blocks with the names of all the Octopus.do wireframe elements.

Screen shot of the blocks

Close up of some of the blocks.

First Wireframe Sync

Once you have followed initial setup mentioned above, create a new page to hold your new Wireframe design, open the Plugin and on the Wireframe tab, run the sync process for your Octopus.do design.

When given the option, select the main page ( probably the Home Page ) and the plugin will then import all of it's children (and grand children etc.) If you have more than one "top level" page or multiple trees, on the same page, you will see all of these appear as top level pages, currently it is recommended that you only import one tree on a page.

Note: If this does not work, make sure you have given your page in Octopus.do a name at the bottom left corner. ...