FLOORDRAFT USER MANUAL

From your first wall to a complete plan

Learn the tools with illustrated instructions, then work through a bedroom example. Read from the beginning or jump to the feature you are using.

Draw in a desktop browser · No sign-in needed to practise · English & Chinese

Choose your starting point

Use a computer with a mouse or trackpad. Explore the sample first, or start with your own room. You can draw without an account.

Illustration
01Sample

Move furniture and practise

02Blank design

Start with the first wall

03Reference image

Calibrate, then trace

Three ways to begin: explore a sample, draw from scratch or trace an image.
  1. Open the editor and choose My projects at the top left. Select Example plan to practise selecting and moving furniture.
  2. Choose Blank design if you have room measurements. Draw the outline first, then add partitions, openings and furniture.
  3. If you have a plan image, choose Trace an image. Select a PNG or JPG up to 5 MiB, calibrate it, then trace the walls.
  4. To continue a design, open it under Local projects or Cloud projects. Use Import design backup for a saved JSON backup.

Try it

First exercise: open the sample, move a chair, then choose Undo. Create your own project once the controls feel familiar.

Check before moving on

Use Rename in My projects to give the design a recognisable name, such as “Bedroom · Option A”.

Find your way around the editor

Choose tools on the left, draw in the centre and edit the selected object in the right-hand inspector. Project, save and export controls are at the top.

Illustration
My projects · Save locally · Export and backup
FurnitureWalls, doors and windowsFloorsUtilitiesMeasureLayers
Select · Pan
InspectorWidth (mm)1500Depth (mm)2000
Editor map: tools, canvas, inspector and save controls.
  1. Use the left rail to switch between Furniture, Walls, doors and windows, Floors, Utilities, Measure and Layers. The adjacent panel shows the tools in that category.
  2. Choose Select above the canvas, then click an object. Its name and dimensions appear on the right. Confirm numeric edits with Enter or by leaving the field.
  3. Use the mouse wheel or Zoom in / Zoom out for detail. Choose Pan and drag to move the view; Fit to view returns to the whole drawing.
  4. Turn on Snap to help align wall endpoints and furniture. Grid is a visual aid; zooming does not change real dimensions.

Try it

Zoom into a doorway, adjust its width, then use Fit to view to review the room.

Check before moving on

Use Pan to move the view and Select to move furniture. These controls do different jobs.

Draw walls and join corners

Close the room outline before adding openings. Wall length follows the centreline, so account for wall thickness when working from inside-room measurements.

Illustration
12343000 mm3600 mm
Orange endpoints show editable positions. Inside measurements differ from wall centreline dimensions.
  1. Choose Walls, doors and windows → Draw walls. Click a starting point and successive corners to draw connected walls, or drag to draw a single wall.
  2. Return to the first point to close the outline, then press Esc. Switch to Select and click a wall.
  3. Enter Wall length (mm) and Wall thickness (mm) in the inspector. For exact placement, edit the start and end X / Y coordinates, or drag the endpoints.
  4. Use Repair wall connections for small gaps. Or Shift-click two walls and choose Connect selected walls. Split wall at midpoint divides a wall into two segments.

Try it

A room 3000 mm wide inside, with 120 mm walls on both sides, has 3120 mm between those wall centrelines. The bedroom walkthrough uses these dimensions.

Check before moving on

Zoom in to check each corner. After changing a wall, check its neighbours, openings and the room outline again.

Trace an image at the right scale

A reference image is a tracing guide. Set its scale from a measured distance before drawing walls so furniture sizes can be compared meaningfully.

Illustration
3000 mm3600 mmABA → B3600 mm
Pick two endpoints → enter the measured length → verify a second distance.
  1. After uploading through My projects, open Measure → Reference image. Use the image visibility control and Opacity to see both the reference and your drawing.
  2. Use Move reference image and Reference scale (%) to position and resize the image first. Calibrate after these adjustments.
  3. Choose Calibrate with two points and click the endpoints of a known distance in the image. Enter its measured length in Actual length (mm), then choose Apply calibration.
  4. Use Measure between two points to check a second, independent distance. Once the scale is right, trace wall centrelines and set wall thickness.

Try it

For a measured distance of 3600 mm, click its endpoints and enter 3600. Then verify a separate known distance of 3000 mm, rather than rechecking only the first line.

Check before moving on

Calibration changes the size conversion for walls, openings and areas; furniture keeps its entered dimensions in millimetres. If a second distance is far off, check the image for perspective or stretching.

Add doors and windows

Openings need the right position, width and direction. The door arc shows which space the open leaf occupies.

Illustration
800 mm
Hinge side and swing direction are separate controls; the arc shows the door swing.
  1. Choose Walls, doors and windows → Add door or Add window, then click near the target wall. Snap helps the opening attach to the wall.
  2. Select the opening and enter Opening width (mm). Check Host wall and choose the correct wall if needed.
  3. For a door, Flip hinge side changes the hinge end. Flip opening direction changes which side of the wall it opens toward. Watch the leaf and arc as you adjust each control.
  4. Drag the opening into position. For an opening without a door leaf, select Passage under Type.

Try it

Set a door to 800 mm wide and adjust its swing toward a clear wall. Check whether it would hit a wardrobe or block the entrance route.

Check before moving on

If an opening looks detached, check Host wall first. Recheck its position and width after moving it.

Arrange furniture and check the space around it

Place large items such as beds, sofas and wardrobes first. Use their full outside dimensions, not just the advertised mattress or desktop size.

Illustration
Double bed150×200Desk120×60Chair space
Furniture dimensions: width and depth define the footprint, with symbol labels in cm; the dashed area reminds you to allow room for use.
  1. Search by name under Furniture and open a category. Drag a card onto the canvas, or click the card and then click to place it.
  2. Select the item and enter Width (mm), Depth (mm) and Rotation (degrees). Use numeric fields for exact sizes, or corner and green rotation handles to explore layouts.
  3. Drag to reposition; arrow keys nudge, and Shift makes the nudge larger. Shift-click several objects or drag a selection box from empty space to move a group.
  4. Use Duplicate for matching items. Review overlap warnings and Furniture edge to wall clearance, then measure gaps between furniture items.

Try it

Set a bed to 1500 × 2000 mm and a desk to 1200 × 600 mm. Even if their outlines do not overlap, check the space needed to pull out a chair and open wardrobe doors.

Check before moving on

The displayed clearance is a geometric distance. Check walking, drawer-opening and standing space against the actual furniture and people using the room.

Create floors and check room area

Closed walls can generate a room floor. You can also draw an irregular area point by point and choose its finish and colour.

Illustration
10.80 m²3.0 × 3.6 m
Floor area follows the inner boundary: 3.0 × 3.6 = 10.80 m² in this example.
  1. Once walls form a closed outline, open Floors and choose Generate rooms from walls. If no room appears, check the wall joins.
  2. For a manual area, choose a finish and board / tile size, then select Draw floor area. Click at least three boundary points in order without crossing the edges.
  3. Choose Finish drawing at the bottom or press Enter. Select the floor to move its vertices, change finish, direction and colour, or read its area.
  4. Read an automatically generated room’s area in the inspector. To label it “Bedroom” on the drawing, use Measure → Add text.

Try it

A rectangular floor measuring 3.0 × 3.6 m inside should have an area of 10.80 m². If it differs significantly, check the scale and whether the boundary follows the inside faces.

Check before moving on

Area depends on the boundary and scale. Calibrate before estimating materials, then allow separately for cutting and waste.

Mark utility points and routes

Mark sockets, switches, lights, water supply and drains. Draw routes to communicate where you want lines or pipes to run.

Illustration
PLDesk circuitW
Points mark locations; polylines show routes. Names explain what each is for.
  1. Under Utilities → Utility points, choose a point type and click to place it. Select it to edit its name, position, rotation and Circuit / group.
  2. Under Wiring and pipes, choose an electrical line, cold-water pipe, hot-water pipe or drain pipe. Click the route’s turning points in sequence.
  3. After at least two points, choose Finish drawing or press Enter. Select the route to move nodes, record its circuit / group and diameter, and read its path length.
  4. Use descriptive names such as “Desk socket” and “Kitchen supply”. Hide furniture in Layers to review the routes more clearly.

Try it

Place a socket beside the desk, draw an electrical route to it and name the circuit “Desk”.

Check before moving on

These marks communicate a layout. A qualified professional should confirm installation details, including wiring, pipe sizes, protection and placement.

Add dimensions and notes

Dimensions communicate distances; notes explain intent. Mark the measurements and positions you want someone else to check.

Illustration
3000 mm3600 mmBedroomCheck window position
Dimensions show distances; text notes record items to discuss or remeasure.
  1. Choose Measure → Measure between two points and click the two endpoints to create a dimension.
  2. Select the dimension and drag its endpoints to adjust what it measures. Its value follows those endpoints and the current scale.
  3. Choose Add text and click to place a note. Enter its wording under Annotation text, then adjust font size, colour and position.
  4. Start with the room’s inside length and width, then mark openings and key furniture gaps. Keep notes clear of walls, door arcs and other dimensions.

Try it

Add a 3000 mm inside-width dimension and a note saying “Window position to be checked” where needed. This separates confirmed measurements from open questions.

Check before moving on

After moving walls or furniture, check that dimension endpoints still mark the intended locations. Zooming the screen does not calibrate the drawing.

Manage layers and compare options

View a complex drawing one category at a time. Hiding controls visibility; locking protects objects you have already placed.

Illustration
Floors and roomsVisible
WallVisible
Doors and windowsVisible
FurnitureHidden
UtilitiesVisible
Measurements and annotationsVisible

🔒 Lock placed objects; unlock them to edit again.

Layers separate what you see; locking protects positions you want to keep.
  1. Open Layers and toggle floors, walls, openings, furniture, utilities and annotations.
  2. Click a name in the Objects to centre and select it. Its category becomes visible if it was hidden.
  3. Select an object and choose Lock / unlock to protect it from accidental edits. Unlock it before editing. Bring to front / Send to back changes overlap order within its category.
  4. To compare layouts, choose Make a copy in My projects. Rename the copy “Option B” and rearrange its furniture while keeping Option A.

Try it

Hide furniture and floors to inspect openings, then show furniture again to check door swings and circulation.

Check before moving on

Check layers before exporting. PNG / PDF use the currently visible layers; DXF has its own layer choices in the export dialog.

Save, back up and continue on another computer

Save locally keeps a design in this browser. Cloud saving lets you continue on another computer. A design backup is a JSON file you keep yourself.

Illustration
01Local

Continue in this browser

02Cloud

Wait for Synced, then switch

03JSON

Keep a backup and source image

Local is for this browser, cloud is for another computer, and JSON is your own backup.
  1. Local drafts are saved while you edit; you can also choose Save locally at the top. Download a backup or finish cloud syncing before clearing browser data.
  2. For a file backup, choose Export & backup → Download design backup. No sign-in is needed. It does not contain the uploaded reference image, so keep the original image too.
  3. To save across computers, sign in with Google and choose Save to cloud / retry in My projects. Later edits continue syncing; wait for Synced before leaving.
  4. On the other computer, open the editor, sign in with the same Google account and open the design from My projects → Cloud projects. Use Import design backup for a JSON file.

Try it

Before leaving, wait for Synced and download a backup of “Bedroom option A”. Open the cloud project when you reach the other computer.

Check before moving on

Each account has up to 3 cloud projects, including the recycle bin. Avoid editing the same design on two computers at once. If a conflict appears, keep a backup before deciding which version to use.

Export PNG, PDF and DXF

Open Export & backup at the top and choose a format. Sign in with Google for free exports without a brand watermark. Pick the file your recipient needs.

Illustration
01PNG

Share an image

02PDF

Send a document overview

03DXF

CAD editing and scaled prints

04JSON

Restore a FloorDraft design

PNG for images · PDF for documents · DXF for CAD · JSON for a design backup.
  1. Choose Export PNG to share a layout image. Check visible layers and annotations first. The reference image, grid and selection handles are omitted.
  2. Choose Export PDF for a document or printed overview. The drawing is an image fitted to the page, so it is not a scale drawing to measure with a ruler.
  3. Choose Export DXF to continue in CAD. Select millimetres, centimetres or metres and the required layers. If the scale is estimated, calibrate first or explicitly accept an estimated-scale drawing.
  4. Open the downloaded file and inspect it. In CAD, confirm DXF units and measure a known length. Set paper size and print scale there if you need a scaled print.

Try it

The same 3000 mm length should read 3000 in a millimetre DXF, 300 in centimetres or 3 in metres. Verify it before further drawing or printing.

Check before moving on

Keep the original project or JSON backup for further edits in FloorDraft. PNG / PDF are viewing files and DXF is for CAD; they cannot be imported as a FloorDraft design backup.

Walkthrough: a 3 × 3.6 m bedroom

Build your first plan from a defined set of dimensions. This is a teaching example; replace the furniture sizes and layout with your own measurements.

Illustration
Double bed150×200Desk120×60Chair space3000 mm3600 mm
Example inside dimensions: 3000 × 3600 mm, with a 1500 × 2000 mm bed and a 1200 × 600 mm desk. Furniture symbol labels are in cm.
  1. Start with My projects → Blank design and rename it “Bedroom practice”. Draw four connected walls, close the outline and press Esc. Set each wall to 120 mm thick.
  2. Select each wall and set its endpoints in the inspector: top (1000,1000) → (4120,1000); right continues to (4120,4720); bottom to (1000,4720); left back to (1000,1000). All coordinates are in mm.
  3. The centrelines enclose 3120 × 3720 mm. Subtract half a wall thickness at each side to get 3000 × 3600 mm inside. Dimension the inside faces. For a real room, calibrate against a measured reference length.
  4. Add an 800 mm door to the bottom wall opening inward, and a 1200 mm window to the top wall. Check the hinge and swing direction.
  5. Add a 1500 × 2000 mm bed and a 1200 × 600 mm desk. Try the bed on the left and desk near the top. Check furniture and door-swing overlap, then measure the space for use.
  6. Generate the room floor and check that its area is about 10.80 m². Add “Bedroom” and any remeasurement notes. Save locally and download a backup; sign in to export a PNG for sharing.

Try it

Use Make a copy for Option B and move the desk to another wall. Compare the entrance route, bedside access and chair space before choosing a layout.

Check before moving on

Finish when the outline is closed, the door swing is right, furniture sizes are known, key gaps are marked and a backup is downloaded. The example layout will not suit everyone.

Recover a design and solve common problems

Keep a copy of the current design before dealing with sync, scale or export problems. Do not clear browser data as a first troubleshooting step.

Illustration
0101 Keep a backup

Download design backup

0202 Check and retry

Network, sign-in, project slots

0303 Confirm the result

Synced

Keep a backup before retrying; choose a recovery version by its date and time.
  1. For an accidental move or deletion, try Undo. For an older state, open My projects → Restore versions, check the name and time, then restore. Cloud projects offer up to 3 recovery versions.
  2. If saving fails or sign-in expires, download a design backup first. Check your network and sign-in, then retry sync in My projects and wait for Synced.
  3. If cloud projects are full, check the recycle bin in My projects. Back up anything you need before choosing Permanently delete to free a slot. You can still draw locally and export.
  4. If an object will not move or is missing, press Esc to return to selection. Check its lock and layer visibility, then locate it in the Objects. Use Fit to view if you have lost the drawing.

Try it

Wrong dimensions throughout: recheck calibration endpoints and units. No floor generated: zoom in and check wall joins. DXF download unavailable: review selected layers, estimated-scale confirmation and any errors in the dialog.

Check before moving on

If you still need help, email support@floordraft.online with your browser, steps and error message. Hide any personal details you do not want to share in screenshots.

Shortcuts and a final check

Use shortcuts while working on the canvas. Leave text and number fields before using drawing commands.

Illustration
⌘ / Ctrl + ZUndo
⌘ / Ctrl + DDuplicate
⌘ / Ctrl + SSave locally
EscLeave drawing
EnterFinish drawing
Useful keys for undo, duplicate, local save and finishing a drawing.
  1. Ctrl / ⌘ + Z undoes; Ctrl / ⌘ + Shift + Z or Ctrl / ⌘ + Y redoes.
  2. Ctrl / ⌘ + D duplicates the selection; Delete / Backspace deletes it; Ctrl / ⌘ + S saves locally.
  3. Arrow keys nudge selected objects; Shift + arrow moves them farther. Shift-click adds to the selection.
  4. Esc leaves drawing mode or clears the selection. Enter finishes a floor area or route after enough points have been placed.

Try it

Before sharing, check units, door swings, furniture gaps, layers and notes. Then open the exported file and review it once more.

Check before moving on

Keep the editable project and a design backup. A shared image is not a replacement for the editable original.