Internationalization | Techlist.io

figmaFeb 27, 20232 min readCurated summary

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

Internationalization Accessibility Json Keyboardevents+3

figmaOct 3, 20222 min readCurated summary

A sneak peek at Schema 2022 | Figma Blog

Schema 2022 is Figma’s annual conference focused specifically on design systems rather than design in general. The event combines in-person gatherings in New York, London, and Tokyo with a virtual livestream, bringing together designers, developers, and advocates to discuss practical challenges, emerging standards, and cross-disciplinary collaboration. ## A Global Design Systems Conference - Schema 2022 includes: - In-person events in New York, London, and Tokyo - A virtual event open to anyone unable to attend in person - Community meetups in each host city - Each city features a distinct lineup of speakers representing different areas of design expertise. - The conference is invite-only, but interested attendees can apply online. - Talks were later made available through DesignSystems.com. ## A More Focused Conference Than Config - Whereas Figma’s Config conference addresses design broadly, Schema concentrates on the specialized field of design systems. - Its narrower focus allows speakers and attendees to explore the field’s specific opportunities and challenges in greater depth. - Organizers aim to balance innovative content with introductory material for people who are still new to design systems. ## Collaboration Between Designers and Developers - Design systems require a mix of design, engineering, and organizational skills. - Schema is intended to encourage “creative cross-pollination” between designers and developers. - Designers can share ideas for plugins, extensions, and integrations. - Developers can demonstrate tools and systems they are building. - The event highlights how design systems create a shared language between the two disciplines. ## Design Tokens and Emerging Standards - The W3C Design Tokens Community Group is highlighted as an important part of the program. - Design tokens provide a technology-agnostic way to scale visual design across tools, devices, and platforms. - The group is working toward standards that allow products and design tools to share design-system styles consistently. - Figma’s developer advocates are especially interested in how the group addresses accessibility and internationalization early in the standards process. Schema 2022 presents design systems as both a specialized practice and a meeting point for design and software engineering. Its recommendation is implicit: people working with design systems should use the event and its talks to learn from adjacent disciplines, follow developing standards such as design tokens, and connect with the broader community.

Read original

Internationalization Figma Design Systems Accessibility+2

figmaNov 7, 20183 min readCurated summary

Using constraints & magic numbers to build responsive layouts in Figma | Figma Blog

LittleBits built a responsive design system to support four apps across mobile and tablet platforms with a small team and six-month deadline. They combined Figma constraints with an 8-pixel “magic number” and proportional scaling rules that were shared with their React implementation. This approach allowed one template per screen to adapt across devices with minimal redesign and engineering adjustments. ## Establishing an 8-Pixel Layout System - Existing designs were analyzed to identify recurring dimensions and spacing. - Most values were already close to multiples of 8, so 8 became the system’s base unit. - Common sizes included: - Buttons and form controls: 32, 48, 56, 64, and 96px - Text: 16, 24, 32, and 48px - Padding and gutters: 16, 24, and 32px - Larger cards: 240px high - Using a shared numeric scale helped harmonize typography, controls, margins, and padding. ## Combining Constraints with Scaling Rules - Figma constraints allowed elements to stretch, remain pinned to edges, or align with grid columns. - Constraints alone were not sufficient to make one layout work equally well on small phones, larger phones, and tablets. - The team compared screen dimensions, calculated proportional relationships, and rounded the ratios into practical whole-number scaling rules. - These rules were implemented in React alongside normal layout constraints. - Designers used Figma’s Scale tool and frame resizing to preview how a single template would appear on different devices. - Testing showed that tablet and small-phone layouts worked well without extensive device-specific adjustments. ## Designing Content for Different Aspect Ratios - To avoid maintaining separate video and animation files for each screen size, content was produced in a 4:3 format. - Important content was placed inside safe areas so it could be cropped cleanly for 16:9 displays. - This allowed the same media assets to support multiple screen dimensions. ## Handling Text and Internationalization - The 8-pixel system was treated as a guideline rather than an absolute rule. - Smaller text sizes sometimes used 4-pixel increments, such as 12px and 20px, because minor size changes had a significant visual impact. - The app was translated into six languages, including German, where longer words could exceed available space. - Code automatically reduced text to the next smaller heading size when it did not fit. - Additional heading sizes were introduced to support these adjustments while preserving smooth transitions between heading levels. ## Practical Scope of the System - The app mostly used straightforward layouts with centered elements and two- or three-column structures. - The team did not need complex responsive patterns beyond proportional scaling and basic constraints. - The combination of a consistent spacing scale, reusable templates, Figma constraints, and shared React rules provided an efficient foundation for responsive design.

Read original

Internationalization Figma Design Systems React+2