Behind the scenes: international keyboard shortcuts | Figma Blog
Figma redesigned its keyboard shortcut system to work reliably across international keyboard layouts, after discovering that many users could not access shortcuts built for US keyboards. The project revealed unexpected challenges in browser APIs, Unicode casing, and the sheer number of keyboard configurations. Figma ultimately had to combine new shortcut mappings with layout detection and normalization improvements. ## Why International Shortcuts Matter - Figma shortcuts improve speed, accessibility, and access to menus and tools. - US-centric shortcuts excluded users whose keyboards lacked keys such as: - Backslash (`\`) for toggling the UI - Forward slash (`/`) for starting cursor chat - The team began a year-long effort involving multiple disciplines to make shortcuts accessible worldwide. ## How Figma Processes Shortcuts - Browsers send key presses as `KeyboardEvent` objects. - Figma translates each event into an internal representation. - Shortcut definitions and their associated actions are stored in JSON. - Available shortcuts depend on factors such as: - User preferences - Product context - Operating system - Whether a feature is enabled - Figma matches each key press against the active shortcut definitions and executes the corresponding action. ## Unicode and Shortcut Normalization Problems - Adding alternate shortcuts for each layout seemed simple, but normalization introduced unexpected issues. - On German keyboards, `Meta + Alt + ß` was needed for decreasing text weight. - JavaScript converts `"ß".toUpperCase()` into `"SS"`, turning one key into two characters. - Converting the result back to lowercase does not restore the original `ß`. - Figma worked around this by using the capital eszett character, `ẞ`, which remains stable when uppercased. - The capital eszett was officially adopted by Germany’s spelling council in 2017, although programming languages and tools do not uniformly support it. ## Detecting Keyboard Layouts - Figma prioritized layouts most commonly used by its users because thousands of layouts exist. - The desktop app can inspect the operating system’s keyboard setting. - Browsers provide less reliable information, so Figma used heuristics based on the experimental Keyboard API. - The API exposes characters associated with physical key positions. - For example, seeing `ä` on the `Quote` key, combined with other mappings, can suggest a Swedish layout. - Logging revealed more than 2,500 distinct keyboard layouts used on Figma within a single 30-day period. Figma’s experience shows that international keyboard support requires more than adding translated shortcut definitions. Robust implementations must account for physical key positions, browser and OS limitations, Unicode edge cases, and the enormous variety of real-world keyboard layouts.
Read original(opens in new tab)