···

    Code blocks in FigJam

    Code blocks allow you to add formatted code as a movable object on the board and include syntax highlighting for several supported languages.

    Use code blocks for:

    • Collaborative problem solving
    • Technical design explorations
    • Technical architecture interviews
    • Creating diagrams with code

    Create a code block

    From the toolbar

    1. Hover over the pile of recently used icons in your toolbar.
    2. Click the More button to open the modal.
    3. Select the More tab.
    4. Select Code block.

    Once your code block is on the board, you can immediately start typing to add text.

    Note

    Code blocks have a default length of four lines. The selected language for syntax highlighting is set to TypeScript by default.

    Keyboard shortcut

    Use the keyboard shortcut:

    1. Press `.
    2. Hover the code block preview over the board to pick a spot.
    3. Click to drop the code block.

    From existing code blocks

    When you hover over the edge of a code block on the board, a quick create icon appears that lets you create a new code block in that direction. You can create a new code block to the top, right, bottom and left of a code block on the board.

    1. Add a code block to your board.
    2. Hover your cursor over a side of the code block to activate the quick create icon.
    3. Click to create the next code block in that direction, or drag the preview to any location on your board.

    A new code block is created, with its text field active.

    Keyboard shortcut

    You can also use the following keyboard shortcuts to quickly create a code block:

    1. Select an existing code block.

    2. Use the keyboard shortcut:

      Mac: ⌘Command Return

      Windows: Control Enter

    A new, blank code block will appear next to the original one with text field active.

    Note

    When using quick create, the new code block will have the same language selected as the previous code block.

    Duplicate

    To duplicate a code block:

    • Select an existing code block, then use the keyboard shortcut:

      Mac: ⌘ Command D

      Windows: Control - D

    • Or, press Option or Alt then click and drag from an existing code block.

    In either case, the original code block is duplicated along with any code inside it.

    Add connectors

    Add connectors between code blocks to diagram flows or create paths for others to follow.

    1. Click in the toolbar.
    2. Select between an elbow or straight connector. You can also use the keyboard shortcuts X to create an elbow connector, and L for a straight connector.
    3. Click and drag your cursor between the objects you want to connect.

    Once created, you can click and drag a connector's start or end point to another object, or another side of the same object.

    Learn more about creating connectors →

    Edit code block

    You can edit a code block's width and syntax highlighting. Edits can also be made in bulk to a group of selected code blocks.

    To edit a code block:

    1. Select one or more code blocks by:
      • Clicking on a single code block
      • Clicking and dragging your cursor over multiple code blocks
      • Or, clicking on multiple code blocks while pressing Shift
    2. Edit the width of the code blocks or use the toolbar to edit syntax highlighting.

    Syntax highlighting

    You can change the selected language for a code block's syntax highlighting.

    The full set of supported languages include:

    1. C++
    2. CSS
    3. Go
    4. GraphQL
    5. HTML
    6. Javascript
    7. JSON
    8. Kotlin
    9. Python
    10. React
    11. Ruby
    12. Rust
    13. SQL
    14. Swift
    15. TypeScript (default)

    To change the selected language:

    1. Select a code block
    2. In the inline toolbar, click on the dropdown menu and select a new language.

    Resize code blocks

    Since the height of a code block depends on the lines of code contained, only the width is editable.

    To edit the width of a code block:

    1. Select a code block
    2. Click and drag the right or left edge to change the code block's width.

    Learn more about resizing objects in FigJam →

    Delete a code block

    To delete a code block from your board:

    1. Select one or more code blocks by:
      • Clicking on a single code block
      • Clicking and dragging your cursor over multiple code blocks
      • Or, clicking on multiple code blocks while pressing Shift
    2. Press Delete.

    Related Videos

    See more