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.
Move furniture and practise
Start with the first wall
Calibrate, then trace
- Open the editor and choose My projects at the top left. Select Example plan to practise selecting and moving furniture.
- Choose Blank design if you have room measurements. Draw the outline first, then add partitions, openings and furniture.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Return to the first point to close the outline, then press Esc. Switch to Select and click a wall.
- 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.
- 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.
- After uploading through My projects, open Measure → Reference image. Use the image visibility control and Opacity to see both the reference and your drawing.
- Use Move reference image and Reference scale (%) to position and resize the image first. Calibrate after these adjustments.
- 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.
- 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.
- Choose Walls, doors and windows → Add door or Add window, then click near the target wall. Snap helps the opening attach to the wall.
- Select the opening and enter Opening width (mm). Check Host wall and choose the correct wall if needed.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Once walls form a closed outline, open Floors and choose Generate rooms from walls. If no room appears, check the wall joins.
- 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.
- 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.
- 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.
- Under Utilities → Utility points, choose a point type and click to place it. Select it to edit its name, position, rotation and Circuit / group.
- 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.
- 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.
- 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.
- Choose Measure → Measure between two points and click the two endpoints to create a dimension.
- Select the dimension and drag its endpoints to adjust what it measures. Its value follows those endpoints and the current scale.
- Choose Add text and click to place a note. Enter its wording under Annotation text, then adjust font size, colour and position.
- 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.
🔒 Lock placed objects; unlock them to edit again.
- Open Layers and toggle floors, walls, openings, furniture, utilities and annotations.
- Click a name in the Objects to centre and select it. Its category becomes visible if it was hidden.
- 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.
- 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.
Continue in this browser
Wait for Synced, then switch
Keep a backup and source image
- 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.
- 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.
- 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.
- 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.
Share an image
Send a document overview
CAD editing and scaled prints
Restore a FloorDraft design
- Choose Export PNG to share a layout image. Check visible layers and annotations first. The reference image, grid and selection handles are omitted.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
Download design backup
Network, sign-in, project slots
Synced
- 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.
- 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.
- 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.
- 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.
- Ctrl / ⌘ + Z undoes; Ctrl / ⌘ + Shift + Z or Ctrl / ⌘ + Y redoes.
- Ctrl / ⌘ + D duplicates the selection; Delete / Backspace deletes it; Ctrl / ⌘ + S saves locally.
- Arrow keys nudge selected objects; Shift + arrow moves them farther. Shift-click adds to the selection.
- 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.