Interface Design

9 posts

toss3 min readCurated summary

Easy-to-use Toss Front SDK

The post argues that an SDK’s stability depends not only on its internal implementation but also on how safely users can interact with it. Low-level APIs may expose every operation clearly, yet still allow human errors such as missing event handlers or cleanup. The recommended solution is an intent-driven Facade interface that simplifies common workflows, prevents misuse, and still provides low-level escape hatches for advanced cases. ## Designing an SDK That Is Easy to Use - Toss Place develops an external SDK for Toss Front payment terminals. - The SDK allows third-party developers to build plugin apps that integrate with Toss services and run on the terminal. - A simple-looking server API might require users to: - Open a server. - Register connection, message, and error handlers. - Remove handlers. - Close the server. - This approach exposes implicit responsibilities to SDK users: - A message callback might never be registered after a connection. - Handlers might not be removed before shutdown. - Improper cleanup can cause memory leaks and operational issues. - Therefore, third-party implementation mistakes can directly affect platform reliability. - A safer interface hides unnecessary internal steps: ```ts const server = await sdk.start({ onConnection, onMessage }); await server.stop(); ``` ## Facade as an Intent-Driven Interface - The Facade pattern is commonly described as wrapping a complex subsystem with a simpler interface. - In SDK design, its deeper purpose is to reorganize complexity around user intent rather than merely hide functionality. - Users should express goals such as: - “Start a server” - “Upload a file” - “Request a payment” - Internal concerns—including authentication, retries, state management, listener registration, and cleanup—should be handled by the SDK. - AWS CDK illustrates this distinction: - **L1 constructs** closely represent raw CloudFormation resources and provide fine-grained control. - **L2 constructs** provide intent-based APIs, such as creating a versioned S3 bucket with `versioned: true`, while handling the underlying configuration automatically. - The goal of a Facade is to reduce cognitive load and coupling, not simply to conceal every lower-level capability. ## Combining High-Level and Low-Level APIs - A well-designed SDK should provide both abstraction levels: - **High-level Facade:** Handles the roughly 80% of common use cases through complete workflows. - **Low-level APIs:** Serve as escape hatches for the roughly 20% of specialized cases requiring precise control. - In the example: - The Facade’s `start()` method opens the server, registers listeners, coordinates connections, and returns a unified server handle. - Low-level APIs separately expose operations such as `open`, `close`, `send`, `disconnect`, and event listeners. - This layered design improves immediate developer experience while preserving long-term compatibility and extensibility. ## Trade-offs and Escape Hatches - Higher-level abstractions inevitably reduce some flexibility. - Specialized requirements—such as keeping one connection while closing others—may not fit the Facade workflow. - As orchestration becomes more sophisticated, the SDK maintainers inherit additional implementation and maintenance costs. - Low-level escape hatches are therefore essential: users should be able to bypass the Facade when they need detailed control. ## Practical Recommendation Design SDK APIs around user intent and automate error-prone lifecycle management wherever possible. Offer a concise Facade for common workflows, but retain well-defined low-level interfaces so advanced users are not blocked by the abstraction.

Read original(opens in new tab)
figma2 min readCurated summary

Bill Atkinson’s 10 Rules for Making Interfaces More Human | Figma Blog

Bill Atkinson’s work at Apple showed that powerful technology can feel natural, accessible, and even joyful. Through QuickDraw, MacPaint, and HyperCard, he transformed complex computing tasks into intuitive creative experiences. The post distills his approach into principles centered on designing within limits, democratizing creation, challenging assumptions, and making interfaces disappear into the user’s work. ## Designing Within Constraints - Atkinson developed QuickDraw for the original Macintosh, which had only 128KB of RAM and limited processing power. - Instead of lowering the ambition for smooth graphics, he created highly efficient algorithms for drawing shapes and curves. - His approach favored elegant solutions that respected constraints rather than brute-force hardware improvements. ## Democratizing Creativity - HyperCard aimed to let people create interactive software without years of programming experience. - Its visual tools and natural-language scripting enabled teachers, artists, and businesses to build their own applications. - Atkinson believed transformative tools should serve everyone, not only technical specialists. ## Making Interfaces Feel Inevitable - Atkinson helped establish interface conventions such as the menu bar, double-clicking, and smooth graphical interactions. - These features made drag-and-drop and point-and-click computing accessible to non-programmers. - Great interface design, in this view, lets users focus on their work instead of the software. ## Questioning Conventional Wisdom - Atkinson challenged assumptions that computing had to be text-based or that bitmap editing was too difficult for ordinary users. - He later acknowledged that HyperCard’s architecture was limited by Apple’s “box-centric” worldview and might have become an early web browser in a network-oriented environment. - Designers should scrutinize ideas that seem obviously correct or impossible. ## Optimizing for Delight - MacPaint was designed to be immediately understandable, even to young children. - Tools such as the brush and paint bucket behaved like their real-world counterparts. - The goal was not merely task completion, but encouraging experimentation, play, and creative exploration. Atkinson’s legacy suggests that human-centered software combines technical rigor with empathy: work within limitations, remove unnecessary complexity, and make creation feel inviting.

Read original(opens in new tab)
figma3 min readCurated summary

Andrew “Boz” Bosworth's 10 Rules for Navigating the Next Design Paradigm | Figma Blog

Andrew “Boz” Bosworth argues that designers entering the next era of AI and spatial computing must challenge inherited assumptions rather than merely improve existing interfaces. His approach begins with real human problems, favors experimentation and intuition, and treats interactions as complete systems. The goal is to create technology that understands users and ultimately becomes nearly invisible. ## Start with real human problems - Identify a specific person with a genuine problem. - Let users determine whether a product is useful through their behavior. - Avoid prioritizing abstract ideas over practical human needs. ## Question inherited design assumptions - Recognize that familiar constraints and interaction patterns are man-made paradigms. - Ask whether the current approach is actually appropriate. - Treat seemingly fixed limitations as potentially changeable. ## Reimagine the interaction paradigm - Current computing often forces users to translate simple intentions into complicated sequences of apps and services. - After decades of desktop and mobile conventions, designers should reconsider the entire model of interaction. - New technology should simplify intentions rather than expose underlying complexity. ## Distinguish invention from optimization - “Zero-to-one” invention happens without established customers or constraints. - Optimization improves and refines an existing product with audience feedback. - AI and spatial interfaces provide greenfield opportunities where old assumptions may not apply. ## Use taste and intuition to choose the right direction - Product development resembles climbing through a difficult problem space. - Intuition helps teams choose promising “terrain” before investing in execution. - Good judgment does not remove the hard work, but it improves the odds of pursuing the right problem. ## Prototype aggressively - Build rough, unconventional prototypes to test whether an idea is worth pursuing. - Meta has used crude physical setups, including tracked hats and mesh-walled rooms, to explore spatial computing. - Direct experimentation reveals possibilities that discussion alone cannot. ## Design the complete system - Spatial products cannot be designed by changing one isolated component. - Gestures, visual/audio/haptic feedback, and resulting functionality must evolve together. - Iteration should happen across the whole interaction system. ## Give tools an appropriate theory of mind - Future tools should understand users’ intentions and goals. - They need enough agency to assist meaningfully, but not so much that they become intrusive or unpredictable. - Effective assistance depends on balancing automation with user control. ## Treat products and people as works in progress - Products should be viewed as successive versions rather than finished objects. - Bugs and improvements are a normal part of continued development. - Designers should apply the same iterative mindset to their own growth. ## Make interfaces disappear - Interfaces should be as seamless and minimal as possible. - Their value lies in enabling an experience, not in drawing attention to themselves. - The ideal interaction removes unnecessary friction between a person and their intention. Bosworth’s practical recommendation is to stay close to human needs, challenge conventional assumptions, prototype early, and design the entire experience. In emerging fields such as AI and spatial computing, success depends less on polishing familiar interfaces than on inventing simpler, more natural ways for people to accomplish things.

Read original(opens in new tab)
figma3 min readCurated summary

Why Design is for Everyone | Figma Blog

Design is presented not as a discipline owned by professional designers, but as a shared way of solving problems and communicating ideas. As technology evolved from physical products like Sony’s Walkman to software and digital interfaces, design became increasingly central to usability, accessibility, and product success. The author argues that organizations achieve better products and systems when design knowledge is shared across teams rather than confined to a single department. ## Design as a shared practice - Design is described as: - A tool for solving problems - A mindset for approaching challenges - A framework for communicating and developing ideas - Professional designers may identify strongly with the discipline, but design should remain accessible to everyone. - Observing hundreds of teams and thousands of individuals led the author to conclude that individual expertise has limits. - Teams equipped with shared design knowledge can create: - Better user experiences - More effective processes - Stronger organizational systems - The future of design is therefore organization-wide, built through a design-driven culture rather than isolated design departments. ## Design through technological change - Design evolves alongside technology, helping transform technical possibilities into products people can understand and use. - Its role extends beyond appearance: design bridges the gap between prototypes and market-ready experiences. ## The Walkman: engineering combined with user-centered design - Sony’s 1979 portable stereo began with engineering advances from the Pressman tape recorder. - Engineers made the device smaller and lighter, removed recording functionality, and improved sound quality. - Design was essential to the Walkman’s widespread adoption: - User testing shaped its intuitive interface. - Field research identified ways to improve portability and usability. - Dual headphone jacks supported shared listening. - The “hotline” button allowed users to talk while listening. - Its distinctive blue-and-silver body and orange button differentiated it from conventional black, gray, and white electronics. - The Walkman illustrates how engineering, interface design, accessibility, user research, and design thinking can combine to create a cultural icon. ## The rise of interface design - By the mid-2000s, industry attention shifted from hardware toward the software that powered devices. - Apple’s products demonstrated that hardware alone was insufficient; interfaces, touch interactions, haptics, and software usability were equally important. - The App Store created a new mobile-software economy and intensified competition around digital experiences. - Web 2.0 and mobile apps accelerated investment in software and helped establish new technology companies. - Software expanded interface design beyond the constraints of physical controls, enabling more powerful and flexible interaction models. ## Digital-native interfaces - Early digital products often used skeuomorphism, imitating familiar physical objects such as buttons, sliders, and scroll wheels. - These visual metaphors helped users understand unfamiliar digital interfaces by connecting them to established physical experiences. Design works best when it is treated as a shared organizational capability. Giving non-designers a seat at the table allows teams to apply user-centered thinking to products, processes, and systems at scale.

Read original(opens in new tab)
figma3 min readCurated summary

Figma on Figma: Our Approach to Designing UI3 | Figma Blog

UI3 is Figma’s two-year effort to make the interface less distracting and keep designers focused on their work. The redesign explored bold changes, including floating panels and a new way to minimize interface elements, but user feedback and performance data led Figma to reverse some decisions. The result balances a long-term vision for a cleaner canvas with practical adjustments based on how people actually work. ## Designing Around Focus and Flow - Figma’s central goal was to put users’ creative work “center stage” and minimize distractions. - The team relied on craft, intuition, feature-adoption data, performance metrics, and extensive user feedback. - Figma emphasizes that redesigning for designers requires establishing a clear destination while bringing users along through iteration. - UI3 was scheduled for general availability on October 10, 2024. ## Docked Panels: Experimentation and Reversal - The team explored unconventional navigation and properties-panel designs: - Panels appearing only on hover - Panels floating above the canvas - A simplified floating-panel system shared across Figma products - Floating panels initially seemed promising but created practical problems for frequent users: - Reduced available canvas space, especially on smaller screens - Made designs appear to sit behind the panels - Increased distraction - Made rulers less useful by moving them farther from the design - Slowed users down, conflicting with Figma’s goal that “speed is a feature” - For the full UI3 rollout, Figma reattached the navigation and properties panels in Figma Design. - The panels remain resizable for flexibility. - Floating UI continues in specific contexts, including: - Minimize UI mode in Figma Design - Grid view in Figma Slides - Default views in FigJam - Bottom toolbars across Figma products ## Minimize UI: Making the Canvas the Center - Figma’s redesign was guided by the belief that work should remain the primary focus of the canvas, even as interface conventions evolve. - The existing Hide UI feature was considered too rigid and “blunt.” - Minimize UI offers a more flexible alternative: - Collapses side panels for distraction-free work - Keeps tools readily accessible - Works better in small windows and split-screen setups - The interface hierarchy was reorganized to accommodate future features more cleanly. - The navigation panel now follows a linear structure: - File name - Branch name - Project name - Pages - Layers - This structure gives future navigation capabilities a logical place without requiring disruptive layout compromises. ## Updating Familiar Interface Conventions - UI3 also examines established interaction patterns, such as keyboard shortcuts, scrollbars, and blend modes. - Figma describes these as “training wheels” or conventions that may no longer match how modern interfaces are used. - The redesign aimed to balance newer interaction trends with users’ existing habits and expectations. UI3 demonstrates that successful redesign is not simply about pursuing a cleaner or more ambitious vision. Figma’s experience suggests that bold experiments should be tested in real workflows, with usability and performance data ultimately determining which ideas remain.

Read original(opens in new tab)
figma2 min readCurated summary

Figma’s Series D round | Figma Blog

Figma announced a $50 million Series D funding round on April 30, 2020, led by Peter Levine and Marc Andreessen of Andreessen Horowitz. The company planned to use the funding to strengthen its collaborative design and prototyping platform while expanding into broader visual communication and creativity tools. The announcement also highlighted Figma’s growing relevance as remote work accelerated during the COVID-19 pandemic. ## Funding and Investors - The Series D round raised **$50 million**. - It was led by **Peter Levine and Marc Andreessen at a16z**. - Existing investors—including **Index, Greylock, KPCB, Sequoia, and Founders Fund**—also participated. - New participants included **Henry Ellenbogen of Durable Capital** and several angel investors. ## Expanding Uses for Figma - Figma reported increased engagement as work and home life became more digitally connected. - Customers were using the platform beyond interface design for: - Visual whiteboarding - Diagramming - Slide creation - Virtual design sprints - City-building projects - Minecraft skin creation - These examples supported Figma’s broader vision of making design accessible to everyone, including non-designers. ## Planned Use of the Capital - Figma intended to invest further in its core design and prototyping platform. - Priorities included making the product more: - Powerful - Reliable - Collaborative - The company also planned to explore dedicated products for new visual communication and creativity use cases. - Figma viewed the shift toward remote collaboration as an opportunity to accelerate this work. ## Hiring and Company Mission - Figma continued hiring to support its expansion. - Its long-term mission remained making design accessible to a wider audience through web-based collaborative tools. Figma’s Series D funding was positioned as both an investment in its core collaborative design product and a step toward becoming a broader platform for visual communication.

Read original(opens in new tab)
figma3 min readCurated summary

Art of Listening: One designer’s foray into experiential design | Figma Blog

The article profiles IDEO interaction designer Mike Godlewski and his side project, Art of Listening, a communal music experience built around focused, uninterrupted listening. Inspired by a movie club, Mike created a space where people listen to an entire album in silence, reflect creatively, and discuss it afterward. The project demonstrates how listening, intentional constraints, and offline experiences can enrich both personal creativity and professional design work. ## Listening as a Design Skill - Mike believes good designers should listen more than they speak. - Understanding human problems requires exploring people’s motivations, needs, and context rather than jumping directly to solutions. - This idea connects design with John Maeda’s distinction between design as a solution and art as a question. ## How Art of Listening Began - Mike was inspired by a friend’s movie club, where participants watched films quietly and discussed them afterward. - He adapted the format to music because he wanted a communal listening experience in his own life. - The project was designed to eliminate digital and social distractions while encouraging reflection. ## The Art of Listening Experience - Participants sit together in a living room and listen to an album from beginning to end. - The central rule is to stay quiet and pay attention: - No conversations - No phone checking - No arriving late - Participants may doodle, write down memories, close their eyes, or simply listen. - Afterward, they discuss the album and share sketches or other responses. ## Designing the Event - Mike carefully selects artists whose albums have strong rhythm, structure, and narrative arcs. - He researches interviews, podcasts, social media posts, and B-sides to understand the artist and album more deeply. - During the listening session, photos and quotations appear on a monitor, adding context beyond what a typical distracted Spotify stream provides. - The event’s simple rules and carefully curated environment make deeper attention possible. ## Offline Creativity and Interface Design - Art of Listening gives Mike a creative reset from his screen-based, systematic interface work. - He observes that many designers seek similar breaks through analog practices such as film photography, letterpress, or bookbinding. - The project shows that unexpected creative activities can replenish designers’ energy and influence their professional work. - Mike’s experience also illustrates how creative pursuits can lead people into unfamiliar roles—in his case, event planning. The article ultimately encourages designers to make room for focused, offline experiences. Listening deeply, imposing thoughtful constraints, and exploring unexpected interests can generate fresh perspective for design work.

Read original(opens in new tab)
figma3 min readCurated summary

Why Professors at Stanford and UC Berkeley Use Figma to Teach Design | Figma Blog

Figma argues that interface design courses need tools that minimize technical overhead so professors can focus on design principles. Its browser-based, collaborative platform is presented as accessible across devices, free for educational institutions, and easy for beginners to learn. The post concludes that these features make teaching, feedback, sharing, and group work more efficient. ## The Challenge of Teaching Interface Design - Interface design remains uncommon in college curricula, often appearing as isolated interdisciplinary courses. - Professors must teach substantial technical concepts in limited time. - Traditional design tools can be difficult and time-consuming for students to learn. ## Accessible on Any Computer - Figma runs in the browser and supports PCs, Macs, Linux systems, and Chromebooks. - Students can work anywhere with internet access, without downloading large software packages. - This helps students who do not own high-powered personal computers. ## Free for Educational Institutions - Figma’s premium version is offered free to educational institutions. - Schools do not need to negotiate expensive contracts. - The lack of cost reduces barriers for students from lower-income backgrounds. ## Easy to Learn - Figma is designed around the core functionality digital designers need. - Berkeley instructors describe it as lightweight, simple, and intuitive. - Students with no prior design experience can reportedly learn the basics in under an hour. - Professors and TAs can concentrate on design principles rather than tool training. ## Technical Support for Classes - Figma provides in-app chat support for students and instructors. - The company states that it responds within 24–48 hours on weekdays. - This reduces the technical-support burden on professors and TAs, especially in large classes. ## Always-Current, Shareable Designs - Designs are stored online and accessed through a file URL. - Instructors can view the latest version without requiring students to export or email files. - Teachers can review work or watch students design in real time. ## Feedback and Version History - Comments can be pinned directly to specific design frames. - Students can view feedback immediately and iterate without waiting for in-person meetings. - Version history shows how a design developed and helps instructors assess contributions in group projects. ## Real-Time Collaboration - Multiple students can work in the same file simultaneously. - Cloud collaboration eliminates the need to email files, manage conflicting versions, or take turns editing. - The post also introduces seamless developer handoff as another benefit, though the provided excerpt does not elaborate on it. Figma’s combination of low cost, cross-platform access, simple onboarding, collaboration, and built-in feedback makes it a practical classroom tool for teaching design fundamentals rather than software mechanics.

Read original(opens in new tab)
figma2 min readCurated summary

Slack From the Start | Figma Blog

Figma chose to build its collaboration experience around Slack rather than recreate messaging and notification features. User research showed that Slack was already central to designers’ daily workflows and correlated with more transparent collaboration. By making a Figma team a Slack team and routing notifications through Slack, Figma aimed to reduce tool fragmentation and strengthen its core product. ## Why Slack Mattered to Figma’s Users - Figma interviewed many designers about file storage, specifications, and product decisions. - More than half of the designers surveyed reported using Slack throughout the day. - Slack adoption was associated with more open and transparent design processes. ## Building on Slack Instead of Duplicating It - Figma considered recreating communication features inside its own product. - The team rejected that approach because it would create another inbox and require users to manage teams in two places. - Instead, Figma built its collaboration model on top of Slack: - A Figma team corresponded to a Slack team. - Figma file notifications were delivered through Slack. - Communication about design remained connected to users’ existing workflows. ## A Strategic Platform Bet - Figma viewed Slack as a platform well before Slack formally celebrated its platform launch. - Deep integration was considered a significant product and business bet. - Early results suggested the strategy was working, and Figma expected other companies to adopt similar integrations. The practical lesson is to integrate with tools users already rely on rather than reproducing their functionality. For Figma, treating Slack as foundational reduced friction and made collaboration feel like part of an existing workflow.

Read original(opens in new tab)