In this article, you will learn how to use advanced Designer 
tools to create a floor plan. Alternatively, our team can professionally design your floor plan in 5–7 business days.
This article will help you if you are going to design a plan using any of the features:
Drawing irregular shapes
Customizing icons or fonts
Implementing wayfinding
Otherwise, the Basic Designer tools may be enough.
This article is based on Designer 2.0, and some features may work differently if you are using the first version. In this case, please contact us as soon as you have any questions.
Don't forget to save your progress by clicking the Save button. Use Version history to restore an older version.
How to draw irregular shapes
With the Polyline
, Bézier curve
or Polygon
tools, you can draw irregular shapes and turn them into booths, spaces , or background shapes. Drawing a shape with one of these tools, just click where you want the corner to be, and then continue moving your mouse. By holding Shift, you can constrain curves to even angles (45° or 90°).
Polyline
will create a transparent (stroke-only) shape with straight lines. You can fill it with any color using the Properties panel. Bézier curve
will create a filled shape with sides that can be rounded or curved. You can add curves to the lines by using a double click on the shape and dragging the blue nodes. Polygon
will create a filled shape with straight lines.
How to align objects
The first option is to align objects manually using grid (more about grid settings here).
The second way is to use the Align 
tool. It is useful if you need two or more objects to align a certain way in relation to each other.
Align to Center
, so that centers of elements match.Align to Left
to align all selected elements to the left edge of the leftmost object.Align to Right
to align all selected elements to the right edge of the rightmost object. Align to Top
to align selected elements to the top edge of the topmost object. Align to Bottom
to align selected elements to the bottom edge of the bottommost object. Align Horizontally
, so that centers of selected elements align by a common horizontal axis. This means all objects will be aligned by their vertical center point. Align Vertically
, so that centers of selected elements align by a common vertical axis, i.e. by their horizontal center point.Distribute Horizontal Distance
to evenly space selected elements horizontally, keeping equal distances between them. After clicking this button, you will see a pop-up window where you should set the desired distance between the elements. The distance is in pixels, but keep in mind the measurement units and scaling. Distribute Vertical Distance
to evenly space selected elements vertically. You also need to set the desired distance in pixels.
How to add wayfinding
We offer a few features that can help your attendees navigate the venue easily. Wayfinding is the most important of them. Wayfinding makes it possible for visitors to build a route from one point to another.
After you create a floor plan or have it designed by our team, you can add wayfinding. Use the shape tools on the toolbar to draw a line. After you draw it, by default, it will appear on the WF (wayfinding) layer.
Draw wayfinding lines along the corridors for each aisle. Make sure all aisle lines are connected and intersect in the center. To achieve this, slightly overlap the lines so their ends extend past the intersection.
The wayfinding lines should be drawn over the Designer grid lines. You can turn off the visibility of other background layers to match the grid with the wayfinding. You can do so by clicking the eye icon next to the layer name.
It's recommended to pick a color that highlights the wayfinding lines from the rest of the plan.
If two rows of booths are separated by a wall, draw wayfinding lines connecting directly into the booth.
Route settings
When a wayfinding line is selected in the Designer , you can change the Route settings.
Unidirectional
This option allows for a specific part of the route to work in one way only. A small arrow corresponding to the allowed direction of the route will be displayed. This is useful to mark entrance/exit-only parts of the building.
Inaccessible
Allows you to create routes for people with special needs. An accessible/inaccessible switch will be added to the live view. Once the switch is turned on, the wayfinding will not display routes marked as inaccessible. You can set up separate routes for people with special needs by applying inaccessible lines in places that don't have any applicable assistance, such as wheelchair elevators, ramps, etc.
Virtual
Acts as a connector for two or more routes. It can be used for tunnels/skywalks, for example. If you have the multilevel option turned on, virtual wayfinding can connect multiple floors through elevators. On the view, the virtual part will not be shown, but the routes will still be connected.
Multi-level wayfinding
Multi-level wayfinding allows you to connect different floor levels using virtual connections. Each floor has its own independent wayfinding network, and the system links them together through virtual wayfinding.
Each floor should use its own wayfinding layer. Different colors can help distinguish levels (for example, black for the first floor and red for the second floor).
How to connect multiple levels
Draw the wayfinding route on the first floor (for example, leading to an elevator or stairs).
Draw the corresponding wayfinding route on the second floor at the exact same location.
Create a connecting line between the two points and enable the Virtual option.
Make sure the points are aligned perfectly point-to-point.
The routing flow should follow this order:
First floor route → virtual connection → second floor route
Required layer setup
One wayfinding layer per floor
One separate virtual wayfinding layer
Important:
Multi-level wayfinding will not work unless the connection points between floors are aligned with absolute precision. Even a small offset can prevent the routing from functioning.
How to customize your plan
How to customize icons
It'a possible to customize the style of icons that we use to mark different POIs. You can change their color, dimensions, and opacity the same way you do it with booths (on the Properties panel). Also, non-round icons have Line Cap and Line Join settings that let you change the style. Note that the same settings apply to any shape that consists of straight lines.
Line Cap
This setting defines how the ends of an open line are displayed.
Butt – the line ends exactly at the endpoint
Round – the line ends are rounded
Square – the line ends extend slightly past the endpoint with a square shape
Choose a line cap based on style and clarity. Use Round for smooth, friendly designs, and Butt or Square for technical or precise drawings.
Line Join
This setting is similar, and it defines how two line segments connect at a corner.
Miter – sharp, pointed corners
Round – rounded corners
Bevel – flat, cut-off corners
Use Miter for sharp angles, Round for softer shapes, and Bevel to avoid overly sharp or long corners.
How to customize font
To ensure a consistent and professional view of your event's floor plan, you can upload fonts associated with your brand. They can be displayed in the background text, booths and other spaces (the Oswald font is used by default).
Adjusting the text font on your floor plan can be done in the Designer 
. Follow these steps:
1. Add a text element 
to the floor plan
2. Choose the font from a drop-down list on the settings panel, or if you have a specific font you'd like to use, you can upload it directly from your computer. Click on the plus icon and select the font file.
How to add fonts to booths/spaces
The list of all supported fonts can be found here. Please note that any other custom fonts are not supported at the moment.
To change the booths/spaces font, go to the Floor plan settings.
Click Add Custom CSS.
Add the code:
@import url('https://fonts.googleapis.com/css2?family=FONTNAME&display=swap');
:root {
--expofp-font-face:"FONTNAME";
}
3. Replace FONTNAME after "family= and expofp-font-face:" with the font name you'd like to use and click Save.