keyboard-shortcuts

12 posts

grammarly

From Idea to Demo in Two Days: Inside Superhuman’s 2025 Global Hackathon (opens in new tab)

Superhuman’s 2025 hackathon brought together nearly 500 employees to prototype innovative product features by leveraging cutting-edge AI coding tools like Claude Code and Cursor. By integrating AI-driven agents and keyboard-centric workflows, teams demonstrated how rapid experimentation can bridge functional gaps across mail, documentation, and collaboration platforms. The event highlighted a significant shift toward "vibe-coding" and accessible development, where cross-functional teams and non-engineers could ship functional MVPs in just 48 hours. ## Superhuman Command Everywhere (SCE) * This project extends the Superhuman Mail Command Center to the browser, allowing users to trigger Grammarly features, set reminders, and snooze items from any web page. * The tool enables keyboard-only navigation for AI agents; for example, users navigate Grammarly’s Proofreader cards using "J" and "K" and accept or dismiss suggestions with "E" and "D." * Developers used AI tools to quickly interpret an unfamiliar codebase, allowing engineers without frontend expertise to "vibe-code" a working MVP within a few hours. ## Whiteboarding in Coda * This feature introduces a native canvas within Coda documents where users can draw freely, add shapes, and import images for brainstorming and diagramming. * The prototype includes an AI diagramming tool that generates editable visual versions of diagrams based on plain-text descriptions. * Built by a solo team member with no formal coding background, the project utilized Claude Code and Cursor to focus on UX refinement and smooth interactions rather than just technical functionality. ## Superhuman Listening * This system centralizes fragmented customer feedback from tools like Gong, Salesforce, and Zendesk into a single, queryable source of truth. * By linking unstructured data to product roadmaps in Coda, the tool helps sales engineers and product managers determine if specific customer feedback is already being addressed. * Technical challenges included using LLM APIs to extract urgency and sentiment, though the team noted the difficulty of filtering "noise" from high-volume sources like Zendesk tickets. ## Inclusive Language Agent * Developed by a team of linguists, this agent identifies non-inclusive phrasing or unconscious bias in professional writing. * The goal is to provide real-time suggestions that improve workplace culture and customer trust by making word choices more inclusive and intentional. The results of this hackathon suggest that AI-assisted development tools are significantly lowering the barrier to entry for complex product builds. For organizations aiming to accelerate innovation, encouraging "maker" identities across all departments and utilizing AI to bridge technical skill gaps can surface high-value solutions that traditional product cycles might miss.

discord

How to Use Keyboard Shortcuts on Discord & Create Custom Keybinds (opens in new tab)

Discord’s keyboard shortcuts let users manage messages, voice calls, and navigation without relying on a mouse. The desktop app supports several global shortcuts, while custom keybinds allow users to tailor controls to their hardware and habits. The post also highlights the Quick Switcher as a fast way to jump between servers, channels, and direct messages. ## Text Chat Shortcuts - **Ctrl/Cmd + E** opens the Emoji Picker. - **Ctrl/Cmd + S** opens the Sticker Picker. - **Ctrl/Cmd + G** opens the GIF Picker. - **Ctrl/Cmd + Shift + U** attaches a file. - Press **Tab**, use the arrow keys to select a message, then: - **E** or **Up Arrow** edits the last message. - **+** adds a reaction. - **Backspace** deletes the message. - **R** replies. - **P** pins it. - **F** forwards it. - Pressing **Up Arrow** directly edits the last message sent. ## Voice and Video Shortcuts Some voice controls work even when Discord is running in the background on the desktop app. - **Ctrl/Cmd + Shift + M** toggles mute. - **Ctrl/Cmd + Shift + D** toggles deafen. - **Ctrl/Cmd + Return** answers an incoming call. - **Esc** declines a call. - **Ctrl + ’** calls the currently viewed DM. - **Ctrl/Cmd + Shift + Alt/Option + V** returns to an active voice call. - **Ctrl/Cmd + Shift + B** opens the Soundboard. ## Custom Keybinds Custom shortcuts are available under **User Settings > Keybinds** and cover voice features as well as navigation. - Toggle actions include mute, deafen, Voice Activity Detection, Streamer Mode, forward/back navigation, switching to the current voice channel, and disconnecting. - Hold-based actions include Push to Talk, Push to Mute, and Priority Push to Talk. - Priority Push to Talk lowers other participants’ volume while speaking. - Custom keybinds are especially useful for users with unusual or compact keyboards. ## Quick Switcher - Press **Ctrl/Cmd + K** to open the Quick Switcher. - Search across accessible servers, channels, DMs, and friends. - This provides rapid keyboard-based navigation without manually browsing Discord’s sidebar. Discord’s built-in shortcuts and customizable keybinds can make messaging, calls, and navigation significantly faster. Users should start with mute, deafen, Push to Talk, and Quick Switcher controls, then customize further based on their workflow.

discord

How to Navigate Discord Using Only Your Keyboard (opens in new tab)

Discord’s Keyboard Navigation feature lets users browse the app, activate controls, manage messages, switch conversations, and control calls without a mouse or trackpad. Tab highlights interactive elements, Enter activates them, and arrow keys move through lists. The article also explains keyboard-based drag-and-drop for organizing servers and channels. ## Navigating Discord’s Interface - Press **Tab** to display the keyboard focus indicator and move through buttons, icons, and other interactive elements. - Press **Enter/Return** to activate the highlighted control. - Use the **Arrow Keys** to move through lists such as direct messages, servers, and channels. - Press **Esc** to move focus to the chat input; if a menu or modal is open, it closes that first. ## Managing Messages After highlighting a message, users can perform common message actions: - **E** or **Up**: Edit the last message. - **+**: Add a reaction. - **Backspace**: Delete the message. - **R**: Reply. - **P**: Pin. - **F**: Forward. - **Alt/Option + Enter/Return**: Mark as unread. ## Switching Between Servers, Channels, and DMs - **Ctrl/Cmd + Option + Up/Down**: Move through the server list. - **Option + Up/Down**: Move through channels or DMs. - **Option + Shift + Up/Down**: Browse unread channels or DMs. - **Ctrl/Cmd + Shift + Option + Up/Down**: Browse unread conversations containing mentions. - **Ctrl/Cmd + Option + Right**: Switch between the last viewed server and the DM tab. - **Shift + Page Up**: Jump to the oldest unread message in a text channel. ## Controlling Voice and Video Calls Before or during calls, keyboard shortcuts provide quick access to call functions: - **Ctrl + `**: Start a call in the current personal or group DM. - **Ctrl/Cmd + Enter/Return**: Answer an incoming direct call. - **Esc**: Decline an incoming direct call. - **Ctrl/Cmd + Shift + M**: Mute. - **Ctrl/Cmd + Shift + D**: Deafen, muting both the microphone and call audio. - **Ctrl/Cmd + Shift + Alt/Option + V**: Return to the current call view. - There is no built-in shortcut for disconnecting from a voice channel, but users can create a custom keybind. ## Keyboard-Based Drag and Drop Discord also supports using the keyboard to reorganize certain items, including servers and channels the user owns or is allowed to move. - Highlight the server or channel with Keyboard Navigation. - Press **Ctrl/Cmd + D** to pick it up. - Use the **Arrow Keys** to move it. - Press **Enter** to drop it in the desired location. Keyboard Navigation provides a practical mouse-free way to manage Discord, especially for users who prefer keyboard input or need improved accessibility. Learning the core focus, movement, and shortcut commands—and creating custom keybinds where necessary—can make everyday navigation significantly faster.

figma

Tap into Shortcuts With a New Custom Keyboard from Figma x Work Louder | Figma Blog (opens in new tab)

Mechanical keyboards offer tactile feedback, customization, and personal expression that standard keyboards lack. Figma partnered with Work Louder to apply those qualities to creative workflows, especially canvas navigation and shortcuts that often strain users’ hands. The resulting Creator Micro keyboard is designed as a tactile alternative to a trackpad, making Figma shortcuts faster, more memorable, and more enjoyable. ## Why Standard Keyboards Fall Short for Creative Work - Traditional QWERTY keyboards evolved from typewriters and were designed primarily for office writing. - Creative software introduced complex shortcuts that can force users into awkward, finger-stretching combinations. - Mechanical keyboards restore personality through customizable: - Colors and keycaps - Layouts - Lighting - Switches and tactile feedback - Figma argues that tools for creative work should support both efficiency and personal expression. ## The Figma x Work Louder Collaboration - Figma partnered with Montréal-based modular keyboard company Work Louder. - The goal was not to move Figma into hardware or make expensive equipment necessary for collaboration. - Instead, the collaboration responds to Figma users who already rely heavily on mechanical keyboards and shortcuts. - The product is a customized version of Work Louder’s Creator Micro keyboard. ## A Keyboard Designed for Canvas Navigation - Figma users spend much of their time navigating files with a mouse rather than typing. - The Creator Micro therefore functions more like an alternative trackpad than a conventional keyboard. - It includes: - 12 programmable keys - Two rotary encoders - Support for 48 different shortcuts - Figma contains more than 150 possible shortcuts, so the device focuses on frequently used commands rather than attempting to reproduce every shortcut. ## Building Muscle Memory Through Tactile Feedback - The keys are arranged in a grid, making shortcut locations easier to mentally map. - Physical buttons and rotary dials provide feedback without requiring users to look down. - Repeated tactile interactions help users develop muscle memory more quickly. - Figma and Work Louder emphasize that shortcut learning should feel enjoyable rather than like memorizing commands users may soon forget. The Creator Micro illustrates how thoughtful hardware can make digital creative work feel more physical, intuitive, and engaging. For users who rely heavily on Figma shortcuts and canvas navigation, a customizable tactile controller may offer a faster and more enjoyable workflow without changing how Figma itself is accessed.

figma

Little Big Updates: fixes and features for a better workflow | Figma Blog (opens in new tab)

Figma’s “Little Big Updates” introduces 32 small but meaningful improvements aimed at making Figma and FigJam faster, more accessible, and easier to navigate. The updates cover text editing, keyboard shortcuts, component publishing, libraries, exporting, and FigJam collaboration. Together, they streamline common workflows and reduce friction for designers and teams. ## Faster Editing and Accessibility - Text editing is up to 10 times faster in Figma and FigJam. - macOS accent-menu support is available by long-pressing letters. - HEIC image uploads are supported, making it easier to use iPhone photos. - Bullets remain consistent across mixed text styles. - Home and End keys navigate to the beginning or end of text areas. - External-link interstitials have been removed to preserve workflow continuity. - Retina screenshots pasted from Chrome will use the correct dimensions. - Text highlights on blue FigJam backgrounds are now more visible. ## Canvas Navigation and Keyboard Shortcuts - `⌘L`/`Ctrl+L` copies links to files and selected frames in the desktop app. - `⌘R`/`Ctrl+R` renames elements while the interface is hidden. - Holding `⌘`/`Ctrl` while clicking selects top-level frames directly. - Quick actions (`⌘+/` or `Ctrl+/`) can show or hide the FigJam UI. - Quick actions can also unlock all objects. - Hovering over the FigJam toolbar reveals additional keyboard shortcuts. - Connector text now supports new lines with Return or Enter. - Objects continue snapping to the grid while being dragged. ## Design Tools and Components - Vector network regions can be filled with different colors. - Components and instances can be searched when inserting (`Shift+I`) or swapping. - Any component can be published via its right-click menu. - Components can be searched in the publishing modal. - Published files now have a distinct icon for easier identification. - Invalid components can be located directly from the publishing modal. - The publishing modal allows users to choose which components appear in the asset list. - Unpublished changes can be published directly from the relevant interface. - A “Return to instance” option is available when selecting a main component. - SVG strokes on parent objects export correctly. - Libraries can be accessed directly from organization subscription settings. ## FigJam Improvements - FigJam shapes support more flexible resizing. - Right-clicking an element copies a direct link to it. - Stamps can be dragged directly from the stamp wheel. - The red shape color is now a truer red. - Team libraries are prioritized in the library-selection modal. - Connector text editing is simpler with standard Return or Enter behavior. The updates demonstrate how incremental improvements to shortcuts, performance, publishing, and collaboration can substantially improve everyday workflows. Designers and teams can explore the changes through Figma’s accompanying Community file.

figma

Figma's New Finger Tips | Figma Blog (opens in new tab)

Figma’s redesigned keyboard shortcut panel is inspired by Douglas Engelbart’s 1968 demonstration of fluid, two-handed computer interaction. The post argues that combining mouse control with practiced keyboard shortcuts lets designers work through motor memory and enter a state of flow. Figma’s new panel aims to make shortcuts easier and more enjoyable to discover and learn. ## Engelbart’s Two-Handed Computing - Douglas Engelbart’s landmark demo presented computers as tools for personal work and collaboration, not merely corporate calculation. - He used a mouse in one hand and a chorded “keyset” in the other: - The mouse selected objects. - The keyset issued commands, such as deleting a word while moving toward it. - This combination made his interaction appear remarkably fluid—like “dealing lightning with both hands.” - The effect depended on motor memory: repeated physical actions become instinctive, allowing users to focus on their goals rather than the mechanics of the tool. ## Keyboard Shortcuts and Creative Flow - Skilled Figma users similarly move across the canvas, restyle objects, and create designs without looking at their hands. - A mouse is relatively easy for beginners to learn, while keyboard shortcuts require deliberate practice before becoming automatic. - Mastering both devices can help designers work faster and maintain focus on the problems they are solving. ## Figma’s Redesigned Shortcut Panel - The old shortcut panel was difficult to scan and occupied much of the screen, interfering with learning through experimentation. - The new panel appears beneath the canvas and can be opened through the help menu or with **Ctrl+Shift+?**. - Shortcuts are organized into categories based on the user’s work: - Shape and vector tools - Typography - Two-handed mouse-and-keyboard combinations - Beginner-friendly shortcuts - Examples include using **Alt** while moving the mouse to measure objects and **⌘+\\** to hide interface chrome. - The panel highlights shortcuts as they are pressed and remembers them, encouraging users to reflect on and expand their shortcut habits. Figma’s approach treats shortcut learning as a gradual path toward fluency: provide relevant suggestions, reinforce what users already use, and reveal powerful combinations that can eventually become second nature.

figma

#FigmaTip Roundup 9.0 | Figma Blog (opens in new tab)

This #FigmaTip Roundup presents practical shortcuts and component techniques shared by the Figma design community. The tips focus on arranging objects efficiently, creating mirrored component variants, and customizing spacing adjustments. Together, they show how keyboard shortcuts and reusable components can speed up common design tasks. ## Arranging Multiple Frames - Use **Cmd + `** to pack selected objects vertically. - Use **Cmd + Shift + `** to pack them horizontally. - Combine these shortcuts with Figma’s alignment commands to quickly reorganize several frames or objects. ## Creating Mirrored Components - To make a flipped, reusable component: - **Option-drag** the original component into a new empty component. - Press **Shift + H** to mirror it horizontally. - The mirrored component remains linked to the original, so changes made to the source component are reflected in the flipped version. ## Customizing Spacing with “Nudge Amount” - Figma’s **Nudge Amount** setting controls how far objects move when using the arrow keys. - Adjusting this value lets designers choose more appropriate spacing increments instead of relying only on the default nudge distance. - This is useful for making precise or larger layout adjustments more efficiently. These techniques provide quick ways to improve layout organization, maintain consistent component variations, and fine-tune spacing directly from the keyboard.

figma

#FigmaTip Roundup 8.0 | Figma Blog (opens in new tab)

This edition of Figma’s #FigmaTip Roundup collects quick workflow improvements from the design community. It focuses on making projects easier to identify visually and navigating layers and selections more efficiently. Together, the tips show how small organizational and keyboard-shortcut habits can speed up everyday Figma work. ## Customizing Project Thumbnails - Create a single frame on the first page of a project, sized approximately **620 × 320 pixels**. - Design a visually distinctive thumbnail inside the frame, using relatively large text. - Match the frame’s color with the canvas background so the thumbnail appears polished and cohesive. - This makes projects easier to recognize quickly in Figma’s project view. ## Navigating the Layers Panel - The roundup highlights keyboard shortcuts for moving through and managing layers. - The supplied article text does not include the details of this embedded tip, but its purpose is to reduce reliance on manually clicking through the layers panel. ## Speeding Up Selection and Layer Management - **Tab / Shift-Tab:** Select the next or previous sibling layer. - **Return / Shift-Return:** Enter or exit groups and frames while maintaining selection context. - **Command + ] / Command + [:** Move a layer up or down in the stacking order. - **Option + Command + ] / Option + Command + [:** Move a layer to the top or bottom of the stacking order. The practical recommendation is to combine a deliberately designed project thumbnail with regular use of selection and layer shortcuts. These simple techniques improve both project organization and editing speed without changing the underlying design process.

figma

#FigmaTip Roundup 7.0 | Figma Blog (opens in new tab)

FigmaTip Roundup 7.0 collects small, community-shared techniques for working faster and more precisely in Figma. The tips focus on creating symmetrical shapes, controlling selection behavior, zooming directly to layers, and improving frame visibility. Together, they show how shortcuts and view settings can make everyday design tasks more efficient. ## Creating Symmetrical Shapes with Components - Draw a rough outline of one side of a shape, such as a vase or flask. - Convert it into a component with **⌥⌘K**. - Duplicate it with **⌘D**, then mirror the duplicate horizontally with **⇧H**. - Position the mirrored copy beside the original. - Edit the component to refine the shape while preserving symmetry. ## Freezing Selection Bounds - Pressing the **spacebar** freezes the bounds of the current selection. - This helps prevent the selection box from changing while moving or adjusting elements. ## Zooming Directly to a Selection - Enable **“Keyboard Zooms Into Selection”** in Figma’s settings. - This makes it easier to zoom quickly to a selected layer, especially when choosing it from the layers panel. - The feature is useful for navigating complex files with many objects. ## Making Frames Easier to See - The roundup also highlights Figma’s **“Frame Outlines”** view option. - Frame outlines improve visibility and make it easier to distinguish frame boundaries while designing. These shortcuts and settings are simple to adopt but can significantly improve speed, precision, and navigation in Figma.

figma

ICYMI: An Overview of Figma’s Feature Release Week | Figma Blog (opens in new tab)

Figma celebrated its first anniversary with “#6DaysofShipping,” releasing a new feature or improvement each day from Monday through Saturday. The initiative aimed to serve both advanced users and beginners, combining powerful workflow enhancements with accessible tips. The post recaps the week’s releases and highlights Figma’s fast, community-driven product development. ## A Week of Daily Releases - Figma created the release week after users praised the company’s rapid shipping pace. - The team decided to launch one feature per day for six consecutive days. - Releases ranged from advanced functionality, such as nested instance swapping, to beginner-friendly resources like a complete keyboard shortcut list. - The campaign was intended as a fun, unexpected celebration for Figma’s community and first anniversary. ## Scrubbable Inputs - Users can change property values more quickly by holding **Option**, clicking, and dragging. - Moving the cursor upward allows values to be “scrubbed” even faster. - The interaction is designed to speed up design exploration and iterative adjustments. ## Shortcuts for Rounding Corners - Rectangle corner radii can be adjusted directly by hovering, clicking, and dragging. - Users can round individual corners by holding **Alt** while clicking and dragging. - This provides more precise control over shapes without relying solely on numeric inputs. Figma’s release week demonstrated how small interaction improvements and advanced capabilities can make design work faster and more flexible. The practical recommendation is to explore both the new gestures and the broader shortcut reference to get more out of Figma’s editing workflow.

figma

Discover Hidden Functionalities with #FigmaTip Roundup 1.0 | Figma Blog (opens in new tab)

The post launches Figma’s **#FigmaTip Roundup**, a collection of small, community-shared techniques for discovering less obvious features in Figma. The featured tips focus on faster editing, navigation, and object selection, showing how keyboard shortcuts and property-based commands can streamline design workflows. ## Copying Layer Properties - Multiple layer properties can be selected and copied to other objects. - This provides a quicker alternative to manually reproducing styles or settings across layers. ## Canvas Panning Shortcuts - Press **Z + an arrow key** to pan around the canvas. - Hold **Shift + Z** to pan using larger movements or “nudges.” - These shortcuts make navigating large canvases faster without relying on scrollbars or trackpad gestures. ## Selecting Objects with Matching Properties - The roundup also highlights a feature for selecting objects that share the same properties. - This can help designers efficiently work with groups of similarly styled or configured objects. The article encourages designers to explore Figma’s hidden capabilities and share their own discoveries through **#FigmaTip**.

figma

From Furniture to Screens | Figma Blog (opens in new tab)

Furniture design taught Figma designer Sayer Pease that tools should support people’s activities without becoming the focus themselves. Figma applies this principle through simple, versatile tools, tactile controls, and a restrained visual system that helps designers concentrate on their work. The broader lesson is that useful design principles can come from disciplines far beyond digital product design. ## Tools - A small, well-designed toolset can support both simple and complex work, much like a hammer can build anything from a cabinet to a house. - Figma’s pen tool was designed to feel more like a physical pen. - Its vector objects use networks of connected points rather than traditional paths, enabling more flexible and natural drawing. - The editor is intended to resemble an organized workbench, with essential tools easy to find and use. ## Control - Familiar, tactile interactions help users feel in control of digital tools. - Keyboard shortcuts provide both physical familiarity and greater efficiency. - Figma’s Command-drag selection heuristic distinguishes containers from their contents. - Users can select nested elements—such as icons inside a toolbar—without selecting the toolbar itself, reducing the need to think about layer hierarchy. ## Color as Semantic Guidance - Figma initially used an almost entirely monochromatic, “unskinned” interface so the product would fade behind users’ designs. - As functionality increased, the lack of visual differentiation made UI components harder to distinguish. - The revised approach uses color without making the interface visually dominant. - Colors add semantic meaning: green indicates actions, while blue indicates selection. - This helps users understand what they are doing at a glance rather than focusing on how the interface works. ## Learning Across Disciplines - Product designers should challenge the assumptions and conventions of their immediate field. - Valuable solutions can come from both historical design practices and unrelated disciplines. - Furniture design provides Figma with principles centered on utility, organization, control, and unobtrusive support. Ultimately, digital tools should enable users’ creativity rather than compete with it. Designers can improve products by studying how other disciplines create tools and environments that quietly support meaningful work.