Summary: This article provides an overview of CodeSignal’s First Party Whiteboard and how it can be leveraged during system design interviews.
- How to access the whiteboard
- How to toggle between the whiteboard and a question
- Whiteboard features and how to use them
- How to access a whiteboard after an interview
The CodeSignal First Party Whiteboard is a feature available within CodeSignal Interview. This digital equivalent of a traditional whiteboard enabled candidates to effectively communicate their ideas, thought processes, and knowledge of system design visually.
Whiteboard sessions can take place in real-time over a video call, and you can work simultaneously in our whiteboard and state-of-the-art IDE. No need to download additional software or switch between multiple applications! Interviewers can collaborate with candidates on designs, or guide and instruct candidates through various exercises.
The interface is simple and intuitive to use, offering a stellar candidate experience and allowing talent to demonstrate their full potential by worrying less about learning how to use a potentially new platform and focusing more on the content of their work.
How to access the whiteboard
During your live interview session, simply click the OPEN WHITEBOARD button at the bottom of the window to switch from our state-of-the-art IDE and unlock your candidates’ creative potential with our feature-rich whiteboard.
How to toggle between the whiteboard and a question
You can drag and resize the whiteboard to suit your working style. You can also work within the IDE while the whiteboard is open.
Click the SWITCH icon on the left side of the IDE to access questions.
Whiteboard features and how to use them
Candidates can select from a variety of shapes to create flowcharts and more in the whiteboard. In system design interviews, candidates or interviewers can easily move elements of the flowchart, and the connecting lines and arrows automatically adjust accordingly.
Watch the demo below for a visual overview of the whiteboard's features.
Here's a breakdown of some frequently asked questions and how to navigate them:
How do I draw basic shapes (rectangles, circles, lines, arrows)?
-
Answer:
- Select the rectangle, diamond, ellipse, arrow, or line tool from the toolbar (or use keyboard shortcuts like R for rectangle, E for ellipse, A for arrow, L for line).
- Click and drag on the canvas to create the shape.
- For perfect squares or circles, or to draw straight lines horizontally, vertically, or at 45-degree angles, hold down the Shift key while drawing.
Can I customize the appearance of shapes and lines (color, fill, stroke)?
-
Answer: Yes, our whiteboard offers several customization options for selected objects.
- First, select the object you want to modify using the selection tool (the arrow icon or press V or 1).
-
A contextual menu will appear (usually to the left or above the selected object). Here you can change:
- Stroke color: The outline color of the shape.
- Background color: The fill color.
- Fill style: Options like hachure, cross-hatch, or solid.
- Stroke width: Thin, bold, extra-bold.
- Stroke style: Solid, dashed, dotted.
- Sloppiness: Adjusts how "hand-drawn" the lines appear (Architect, Artist, Cartoonist).
- Edges: Square or round corners for applicable shapes.
- Opacity: Make objects transparent.
4. Is it possible to add text to my diagrams?
-
Answer: Yes, adding text is a fundamental feature.
- Select the "Text" tool from the toolbar (often an "A" icon or T key).
- Click anywhere on the canvas to create a text box and start typing.
- You can customize the font size and family (usually a few hand-drawn style options are available) and color from the contextual menu when the text box is selected.
5. How do I create more complex shapes like triangles or polygons?
-
Answer: While there isn't a dedicated triangle or polygon tool, you can create them using the line tool.
- Select the "Line" tool (shortcut L or 6).
- Click to place the first point, then click to place subsequent points for each vertex of your polygon.
- To close the shape and enable fill options, click back on the very first point you created.
- Press Esc or double-click when you are done drawing an open shape.
6. Can I group objects together or arrange their layers?
-
Answer: Yes, our whiteboard allows grouping and basic layering.
- Grouping: Select multiple objects by holding Shift and clicking on each one, or by dragging a selection box around them. Then, right-click (or use the context menu that appears) and choose "Group selection" (shortcut Ctrl+G or Cmd+G).
- Layering: When objects overlap, you can control which ones appear on top. Select an object, then use the options in the contextual menu like "Send to back," "Bring to front," "Send backward," or "Bring forward."
7. Are there keyboard shortcuts to speed up my workflow?
-
Answer: Our whiteboard has a rich set of keyboard shortcuts for most common actions.
- A general tip is to press the ? key (Shift + /) on your keyboard while in Excalidraw. This often brings up a help dialog or a list of shortcuts.
- Common shortcuts include: V or 1 for Selection, R or 2 for Rectangle, E or 4 for Ellipse, A or 5 for Arrow, L or 6 for Line, T or 8 for Text, Ctrl/Cmd + Z for Undo, Ctrl/Cmd + Y for Redo, Ctrl/Cmd + C for Copy, Ctrl/Cmd + V for Paste, Delete or Backspace to delete selected objects, holding Spacebar and dragging to pan the canvas.
8. Does CodeSignal Whiteboard have a grid or snapping features? How do I align objects?
-
Answer: Our whiteboard offers a grid and some alignment aids.
- Grid: Right-click on the canvas and select "Show grid" to toggle a background grid, which can help with alignment.
- Snapping: Excalidraw often has subtle snapping to align objects or when connecting arrows to the centers or edges of shapes.
- Alignment Tools: When you select multiple objects, alignment options (align top, bottom, left, right, center horizontally/vertically, distribute) usually appear in the contextual menu, allowing for precise arrangement.
- Arrow Binding: When drawing arrows, if you drag an endpoint near another object, it will often highlight, indicating that the arrow will bind to that object and move with it. You can often prevent this by holding a key like Alt or Ctrl/Cmd while drawing or editing the arrow.
Are there any pre-made software architecture images?
- In the top right corner is a Library of useful pre-drawn images common in design architecture! Just click and select.
How to access a whiteboard after an interview
Once you finish the interview, search your candidate's report under the FINISHED tab and click on the candidate's name.
From here click on the WHITEBOARD to open it in a separate tab.