Please follow the guidelines and restrictions listed below while designing your custom office layout.

Design Specifications

You can use any design tool like Adobe Illustrator/Sketch, but the final floor plan map image must be shared in SVG format.
The full map layout must fit within the max resolution size in each of the Sketch/illustrator files (shown in light green below)The core conference area must be 16:10 aspect ratio (highlighted in blue)

Core Office Area

Size of the avatar seat is 55px W x 55px H (including the 4px status ring size), Avatar will be rendered as a circular image.

SVG file requirement

While exporting your design as SVG file, make sure “Responsive” option is unchecked

Export options

If you have your custom fonts inside the floor plan, please embed the fonts as below in final SVG file



AI layers

Sample Design with layer names View full image

Conference Area

Create a layer named “conference area” for us to identify the main office area in the map layout.
This layer will be zoomed in to fit the users’ viewport/browser.
All the below layers (tables, seats) should be added within this layer

Table/Room:

In your design file, the room section should be created with the layer name starting with “table-“ as in the above image. All elements inside this layer will be considered as part of the table. Dimensions like width, height, top, left will be calculated based on this tag.
Rest of the room layer name will be used to create a unique code for identifying the room. Ex: if you set layer name for a room as “table-first table“, “first table” text will be used as code for identifying the room. Please make sure all the room layer names are unique and in English.
For positioning table name inside the room, create an text element inside room. This text element should have a layer name starting with “name “

Seats

Seats should be added inside the respective room layer created above
Each seat should have a layer name as “seat”  to identify the seats inside the room
We take only the top and left position and the seat will be rendered as a circle.
The order of seats in the office layout will be the same as the order of seat layers inside the room.

Final optimizations

Make sure the SVG output follow this guideline

https://css-tricks.com/high-performance-svgs/
Smaller sizes contribute to a faster loading time in our app. Optimal size: < 500kb
Use image compression tools after all validations are done: Ex: https://vecta.io/nano
If there are many elements and small items, it will lead to longer load time and sub-par experience when zooming and dragging the map
SVG export decimal (ignore If Sketch doesn’t have this option)Please set to 2After output as 2 decimal, the SVG and design may be distorted, the designer will need to correct the output file before handing to developers

Where to upload?

 Click the Need Help button in Remo Office space and upload the SVG file.

References
Sample SVG
Sample AI
Was this article helpful?
Cancel
Thank you!