Techlist.io - Korean Tech Blog Curator

figmaOct 23, 20232 min readCurated summary

Server-side sandboxing: Containers and seccomp | Figma Blog

Containers and seccomp provide lightweight alternatives to virtual machines for isolating untrusted server-side workloads. Containers rely on OS-level features such as namespaces, cgroups, privilege dropping, and mandatory access controls, while seccomp restricts which system calls a process can invoke. Figma’s conclusion is that containers are not secure by default: effective sandboxing depends on the runtime, kernel, configuration, and broader infrastructure design. ## Container Isolation and Its Attack Surface - Container escapes depend on three main components: - The container runtime implementation - Operating-system primitives and interfaces exposed to the runtime - Runtime configuration - On Linux, Docker commonly uses the `runC` runtime alongside: - Namespaces and cgroups - Privilege dropping - Seccomp - SELinux or AppArmor - Vulnerabilities in the kernel or runtime, as well as configuration mistakes, can allow malicious workloads to modify host files or execute host-level code. - Unlike many VM solutions, containers place more responsibility on operators to configure isolation correctly. ## Risks from Compromised Containers - Simply running untrusted code inside a container does not guarantee safety. - Container settings should be strengthened to prevent host takeover. - The surrounding architecture should limit what a compromised container can access. - A safer design may use containers with: - No mounted network devices - No credentials - No access to unrelated data - Containers can be placed in an isolated network, with orchestration systems passing inputs and collecting outputs through controlled channels. ## Seccomp as an Additional Boundary - Seccomp, or “secure computing mode,” restricts the system calls available to a process. - This can reduce the kernel attack surface available to malicious code running inside a container. - Seccomp works alongside container mechanisms rather than replacing them; isolation depends on combining syscall restrictions with carefully configured namespaces, privileges, access controls, and infrastructure. ## Figma’s Evaluation Criteria Figma assesses sandboxing technologies using two questions: - Can a malicious workload escape its container and affect the host? - If it cannot escape, can it misuse the container’s permissions to reach other systems or cause harm? The practical recommendation is to treat containers as configurable security primitives, not automatically secure sandboxes. Use restrictive seccomp and container configurations, minimize credentials and connectivity, and design the surrounding system so that a compromised workload has limited impact.

Docker & Containers Seccomp Cgroups Container Sandboxing+4

figmaOct 17, 20233 min readCurated summary

Figma's commitment to FedRAMP | Figma Blog

Figma is pursuing FedRAMP Moderate certification to make its collaborative design platform available to US government agencies and public-sector organizations. The certification process demonstrates that Figma meets rigorous security and privacy requirements and would allow government teams to safely design, prototype, and test digital services. Figma argues that its browser-based, collaborative workflow could help agencies iterate faster and improve citizen-facing software. ## FedRAMP Status and Purpose - Figma’s FedRAMP Moderate authorization is currently “in process.” - Listing on the FedRAMP Marketplace indicates that Figma has completed an audit and is moving through the final certification steps. - FedRAMP evaluates cloud applications against government security controls and categorizes them as low, moderate, or high impact. - Certification is necessary before Figma can fully host government data. ## Benefits for Public-Sector Users - Certification would allow government agencies, contractors, and civic-technology teams to: - Create software designs in Figma - Build and test interactive prototypes - Validate ideas through rapid iteration - Improve the usability of government applications - Figma says the certification will give customers confidence that their data and content meet demanding security and privacy standards. - Its browser-based and platform-agnostic design supports collaboration among distributed teams, including agencies and contingent workers. ## Public-Sector Collaboration and Modernization - The shift toward hybrid and remote work has increased demand for accessible, collaborative digital tools in government. - Figma connects this trend with broader efforts to improve customer experience and rebuild trust in government services. - The company believes public-sector organizations often work similarly to private companies despite having different missions and business models. - Collaborative design could help agencies ship services more quickly and achieve better outcomes for citizens. ## Building a Federal Government Team - Figma is expanding its federal-government organization, beginning with federal sales leader James Kohler. - The company is seeking people who understand government procurement and security requirements while also being able to build new programs from the ground up. - Kohler’s role is to adapt lessons from Figma’s private-sector work to the needs of government users. - Figma plans to encourage knowledge sharing between its commercial and government teams. ## Next Steps - Figma’s immediate goal is to complete FedRAMP certification and become authorized for federal use. - The company intends to continue engaging public-sector customers and sharing updates about its government efforts. Figma’s certification effort is a prerequisite for broader government adoption. If completed, the platform could give public-sector teams a secure way to collaborate on and rapidly improve digital services.

Figma Prototyping User Interface Security+4

figmaOct 11, 20232 min readCurated summary

Shishir Mehrotra’s 10 rules for leading great team meetings | Figma Blog

The post argues that effective teams deliberately design two products: what they deliver to customers and the workplace experience that enables employees to do their best work. Shishir Mehrotra frames this employee experience as a system of named, known, and templated rituals—especially meetings. Great teams use different meeting types intentionally and create durable rhythms that keep ambitious work moving. ## Rituals as the “Employee Product” - Company culture becomes tangible through recurring behaviors and rituals. - Strong rituals share three traits: - They are explicitly named. - Employees learn them early. - They follow a repeatable template. - Teams do not need to invent every practice themselves; they can borrow proven rituals from other organizations. ## Three Types of Team Meetings Mehrotra and meeting expert Elise Keith categorize meetings into three groups: - **Cadence meetings** - Examples include staff meetings, stand-ups, and project syncs. - They recur with the same participants and maintain forward momentum. - Their core question is: **Are we on track toward our goals?** - **Catalyst meetings** - Examples include decision forums, product reviews, and design critiques. - They are intended to change direction or resolve important questions. - Their core question is: **Did we reach an answer?** - Too many catalyst meetings can exhaust teams. - **Context meetings** - Examples include all-hands meetings, off-sites, orientations, and one-on-ones. - They establish shared information, insight, and relationships. - Their core question is: **Are we better enabled to do our jobs?** ## Sustaining Long-Term Goals - Mehrotra uses John F. Kennedy’s moonshot as an example of the power of cadence. - Kennedy reinforced the decade-long objective with a weekly meeting involving NASA’s leadership. - Regular meetings can maintain progress on ambitious goals, but they often feel repetitive or obligatory. - Teams should therefore design engaging rituals that make recurring meetings feel purposeful rather than like a chore. - The article points readers to meeting templates and a ritual toolkit for practical examples. ## Practical Takeaway Treat meetings as designed team products, not unavoidable calendar events. Choose the right meeting type, define its purpose and success question, and establish a clear, repeatable ritual that supports the team’s long-term goals.

Figma Product Development Team Collaboration Coda+2

figmaOct 4, 20232 min readCurated summary

Dan Mall’s 10 Principles for a Worthy Design Career | Figma Blog

Dan Mall’s approach to a worthwhile design career centers on deliberate choices, continuous learning, and using experience strategically. He argues that designers should pursue goals that genuinely matter, improve their odds by leveraging their existing advantages, and define the desired outcome before beginning. His career across agencies, startups, teaching, and writing illustrates how varied experiences can reinforce one another. ## A Career Built Through Experimentation - Mall’s 25-year career has included agency work, entrepreneurship, teaching, apprenticeships, and authorship. - He views each role and project as an opportunity to learn, solve problems creatively, and grow personally. - His work includes founding an agency, launching startups, teaching thousands of students, and writing books about pricing, design systems, and scalable design. - Continuous learning means more than following trends; it involves expanding one’s capabilities and finding better ways to solve problems. ## Identify Worthy Goals - Before committing to an endeavor, Mall asks: - What outcome do I envision? - Will that outcome leave me better off? - He considers goals most worthwhile when they are thrilling, important, and daunting, following Michael Bungay Stanier’s framework. - His decision to start an agency grew from a desire to spend more time with his family while creating a more flexible career. - Excitement is especially important to him: if an idea does not inspire him, he generally does not pursue it. ## Place Bets on Unfair Advantages - Every decision is a bet because choosing one path means giving up others and accepting an opportunity cost. - Designers can improve their chances by choosing opportunities that exploit their strengths, such as: - Expertise - Reputation - Relationships and network - Resources - Unique insights - Mall’s agency benefited from his prior agency experience, established reputation, and steady client base. - He references the MILES framework for identifying advantages: - Money - Intelligence and insight - Location and luck - Education and expertise - Status - His experience running a design-at-scale agency gave him similar advantages when launching Design System University. ## Begin With the End in Mind - Mall follows Stephen Covey’s principle of defining the desired destination before starting. - When he began conference speaking, he set a specific goal: eventually speak at An Event Apart, whose speakers he admired and whose work influenced his development. - Clear, achievable outcomes help turn broad ambitions into focused career decisions. A practical takeaway is to choose goals that genuinely excite you, assess the advantages you already possess, and define success before investing significant time and energy.

Figma Design Systems User Experience Web Design+2

figmaSep 27, 20233 min readCurated summary

Unlocking the Power of an Inclusive classroom with Figma’s open canvas | Figma Blog

The article argues that traditional, one-size-fits-all education is failing many students, especially amid declining achievement, teacher burnout, disability inclusion needs, and worsening youth mental health. Educators such as Lisa Highfill are using student-centered frameworks and visual collaboration tools like Figma to give learners more choice, agency, and accessible ways to participate. The central conclusion is that inclusive, flexible classrooms can benefit all students, not only those with identified special needs. ## Moving Beyond “Robot Students” - Lisa Highfill recalls students who focused primarily on grades, deadlines, and point values rather than meaningful learning. - Standardized lesson plans and rigid educational standards limited teachers’ ability to adapt instruction. - Lisa wanted to “design” learning experiences that offered students choices and helped them build agency. - She later became a technology integration specialist and created digital lesson plans called **Hyperdocs** in 2016. - Her approach was based on an explore, explain, and apply cycle adapted from the **5E Instructional Model**. ## Education’s Ongoing Crisis - The pandemic intensified existing problems but did not create them. - The 2023 National Assessment of Educational Progress reported historic lows in math and reading scores among 13-year-olds. - Schools continue to face: - Teacher shortages, low morale, and burnout - Health and safety concerns - Growing numbers of students with disabilities - Serious concerns about children’s mental health - Earlier reductions in public-school funding contributed to weaker test scores and lower college attendance. - Students were already experiencing significant academic pressure and mental-health stress before COVID-19. - Increasing reliance on standardized testing reinforces a checklist-driven model that does not address individual needs. ## Universal Design for Learning - **Universal Design for Learning (UDL)** promotes multiple ways for students to: - Access and understand information - Express what they know - Engage with learning - The framework is designed to support students with diverse abilities, backgrounds, learning styles, and emotional needs in the same classroom. - It challenges the assumption that one instructional method can work equally well for everyone. ## The 5E Instructional Model - The 5E model emphasizes that students need more than factual knowledge; they also need to understand how concepts are organized and applied. - Its five phases are: - Engage - Explore - Explain - Elaborate - Evaluate - The process is cyclical rather than strictly linear. - Lisa’s explore, explain, and apply approach builds on this model by encouraging inquiry and real-world application. ## Visual Collaboration and Inclusive Learning - The shift to virtual and hybrid learning increased interest in teaching methods that accommodate different learning styles and personal circumstances. - Research suggests inclusive classrooms can improve outcomes for all students, not only those with special educational needs. - Visual collaborative tools such as Figma can help teachers create more dynamic learning experiences and give students different ways to contribute. - An open canvas supports choice, collaboration, and participation beyond conventional written assignments or teacher-led instruction. Educators can make classrooms more inclusive by combining frameworks such as UDL and the 5E model with flexible visual tools. The practical recommendation is to design learning experiences around student agency, varied forms of participation, and individual needs rather than relying on standardized, one-size-fits-all instruction.

Figma Hyperdocs Universal Design For Learning 5e Instructional Model+2

figmaSep 27, 20232 min readCurated summary

Figma and Google: Transforming education for Japan’s K-12 students | Figma Blog

Figma and Google for Education are expanding their partnership to give Japan’s K–12 schools free access to Figma and FigJam through Chromebooks and Google Workspace for Education. The initiative aims to address students’ limited access to digital design tools and build skills in collaboration, visual communication, problem-solving, and creative expression. Districts can apply to deploy and manage Figma Enterprise licenses through Google’s admin console. ## Bringing Industry-Standard Design Tools to Japanese Schools - Japan has high household internet access, but digital design software is often restricted to computer labs or specific classrooms. - The partnership enables schools to provide Figma on students’ personal Chromebooks. - Schools can centrally manage Figma Enterprise licenses for free using Google’s administration tools. - Students can brainstorm, collaborate, prototype, and design with tools used in professional environments. ## Building Future-Ready Skills - Figma’s earlier US Chromebook partnership attracted applications from educators in all 50 states. - Students used Figma to: - Develop design concepts - Support nonprofit initiatives - Prototype apps for local government services - Teachers used FigJam for lesson plans, group projects, study guides, and interactive classroom activities. - Figma argues that design education strengthens complex problem-solving, collaboration, visual communication, and creative expression. - The company cites research linking strong design practices with faster revenue and shareholder-return growth. ## Supporting Japan’s Next Generation of Designers - Japan has a strong record of technological innovation, educational equity, and high graduation rates. - Despite these strengths, Japanese schools historically adopted computers more slowly than many other countries. - The government launched the GIGA School Program in 2019 to provide every student with a device and high-speed school connectivity. - Figma’s browser-based tools build on that infrastructure by adding accessible, collaborative design software to students’ devices. - Google describes the partnership as a way to expand creativity, collaboration, and opportunity for a new generation. Schools and districts in Japan can apply to bring Figma and FigJam into their classrooms, helping ensure that design and digital collaboration skills are available beyond specialized programs or computer labs.

Figma Figjam Collaboration Design Thinking+3

figmaSep 24, 20232 min readCurated summary

EU Hosting for Figma and FigJam Files | Figma Blog

Figma announced EU hosting for Figma and FigJam file data, giving European organizations more control over data location while retaining the benefits of its cloud platform. The service is intended to address regional privacy and regulatory concerns and is available exclusively to Enterprise customers. File contents are hosted primarily in Frankfurt, with backups in Dublin, though some metadata, login information, and temporary in-transit data remain outside the EU. ## EU Data Hosting Availability - Customers can host the document contents of Figma and FigJam files within the EU. - The option is available only on Figma’s Enterprise plan. - Existing customers can migrate files from the US after upgrading to Enterprise. - Account managers coordinate migration dates, and eligible customers can join a migration waitlist. ## Hosting Locations and Infrastructure - Primary file storage is located in Frankfurt, Germany. - Backup data is stored in Dublin, Republic of Ireland. - Figma uses AWS as its cloud infrastructure provider. ## Data Included and Excluded - EU hosting initially covers the contents of supported Figma and FigJam files. - User metadata and login data are not hosted within the EU. - Some data moving through Figma’s systems may be temporarily stored outside the EU. - Customers should consult Figma’s file-type breakdown to determine which data is covered. ## Security and Compliance Figma positions EU hosting as an addition to its existing security and privacy measures, including: - SOC 2 Type II reporting - ISO 27018 and ISO 27001 certifications - Level 2 adherence to the EU Cloud Code of Conduct The feature is particularly relevant to organizations such as Volkswagen Group, which require stronger control over data residency for regulatory and data-protection reasons. Organizations with strict EU residency requirements should evaluate which data types are covered and consider Figma Enterprise for localized file hosting.

Figma Figjam AWS Data Residency+3

figmaSep 21, 20232 min readCurated summary

What Codegen Is (Actually) Good For | Figma | Figma Blog

Code generation is most useful as an augmentation to the design-to-development process, not as a replacement for developers. Figma found that fully automated design-to-code output often fails because teams use different frameworks, codebases, and patterns. Instead, codegen works best when it provides context, suggestions, and a useful starting point that developers can refine themselves. ## Codegen’s Broad Ecosystem - Codegen automatically produces code from rules or specifications. - It ranges from: - IDE completion tools such as Microsoft IntelliSense - Reusable templates and snippets - Visual programming and no-code platforms such as Bubble - AI assistants such as GitHub Copilot and Replit Ghostwriter - AI codegen adoption is high: 82% of developers surveyed by Stack Overflow in 2023 said they already write code with AI tools. - Trust remains low, however; fewer than 3% reported highly trusting the accuracy of these tools. ## Why Fully Automated Design-to-Code Falls Short - Figma initially envisioned Dev Mode as a way to automate design-to-code conversion. - Early results were promising, but developers often found the generated code impractical or not useful. - Producing code that fits a wide range of frameworks, architectures, and team conventions is difficult. - The better goal is “intelligence amplification”: technology should extend a developer’s capabilities while keeping the developer in control. ## From 0 to 0.5 - Codegen is particularly effective at helping developers move from a blank screen to a partial implementation. - In products with established design systems and component libraries, it can: - Suggest the appropriate component - Surface component names and property values - Reduce guesswork during design handoff - Rather than generating a complete solution, codegen helps developers reach a useful starting point faster. ## Applying Codegen to Existing Design Systems - Codegen delivers the most value when customized for a specific team, company, and workflow. - If a design system and component library already exist in Figma, teams may not need a separate automated design-to-code application. - More useful alternatives include: - Referencing design tokens and variables - Viewing component documentation - Building a Figma codegen plugin - Generating custom code snippets - These tools help developers understand a design quickly while allowing them to write code that matches their own codebase. The practical recommendation is to use codegen as a guided assistant: provide suggestions, reusable patterns, and context, but leave architectural decisions and final implementation to developers.

Figma Design Systems Design To Code Component Library+4

figmaSep 20, 20233 min readCurated summary

The Long and Short of It: Issue no.1 | Figma Blog

Figma’s first editorial issue argues that personal and professional growth often comes from stepping outside conventional roles, metrics, and workflows. It highlights human creativity in an AI era, alternative career paths, unconventional organizational structures, and the danger of reducing work to easily measured outcomes. The overall conclusion is that progress requires embracing ambiguity, risk, and broader definitions of success. ## Human Creativity in the Age of AI - John Maeda argues that people remain valuable because they think in circuitous, non-linear ways. - Unlike machines optimized for efficiency and shortcuts, humans can make unexpected creative leaps. - This “uphill thinking” involves greater uncertainty and risk, but can produce greater rewards. - The accompanying discussion explores how designers can work with AI without abandoning distinctly human innovation. ## UX Design as a Second Chance - CROP, a California nonprofit, trains formerly incarcerated people for careers in UX design. - Its program uses Figma to provide practical skills and an alternative path into the technology industry. - Fellow Ron Scott, released after 27 years in prison, sees product design as a way to influence how people interact with technology. - The program also reflects a broader belief that more people should have a voice in shaping products and services. ## Challenging Conventional Product Roles - Airbnb CEO Brian Chesky’s Config talk described how he helped rescue Airbnb by emphasizing design and eliminating the traditional product management function. - The decision sparked debate about the relationship between designers and product managers. - Figma presents the issue less as a true rivalry than as an opportunity to question inherited workplace structures. - Industry leaders suggest that teams may benefit from abandoning rigid titles and recognizing that everyone is working toward the same goal. ## Rethinking Productivity and Perspective - The issue points to criticism from Gergely Orosz and Kent Beck of attempts to measure developer productivity through narrow, quantifiable outcomes. - It asks whether an apparently unproductive colleague might instead be judged by an inadequate definition of success. - A reference to filmmaker Wong Kar Wai reinforces the importance of framing: what is excluded from view can matter as much as what is visible. ## Making Space for Better Ideas - The closing reflection argues that conversational interfaces such as ChatGPT can confine thinking to “chat boxes.” - Product designer Aosheng Ran suggests that giving ideas more space could reveal possibilities missed by conventional text-based interaction. Figma’s issue recommends looking beyond labels, efficiency metrics, and established roles. In practice, that means protecting room for creative detours, evaluating work more thoughtfully, and using technology to expand—not narrow—human possibilities.

Figma AI User Experience Product Design+3

figmaSep 19, 20232 min readCurated summary

Work Has Changed. Here's What We Might Do About It | Figma Blog

Distributed work has permanently changed how teams collaborate, but many organizations have not yet adapted their processes. Figma’s research finds that product development is strained by three forces: more participants, greater geographic distance, and more simultaneous work. The strongest teams counter this complexity through transparency, shared understanding, and intentional connection. ## Distributed Work Is Now Permanent - In a Figma survey, 75% of designers in Europe and Asia said they work from home more often than before the pandemic. - U.S. work-from-home days are now five times higher than in 2019. - Teams meet in person less frequently, making remote collaboration a lasting feature of modern work rather than a temporary adjustment. ## Product Development Faces Widespread Barriers - Forrester Consulting found that 9 in 10 respondents experienced barriers during product development. - Six in ten reported at least one of the three most significant obstacles: - Lack of alignment across teams - Difficulty making decisions - Lengthy development cycles - These problems existed before the pandemic but have been intensified by distributed work and faster product-release expectations. ## Three Forces Increasing Workplace Complexity ### More People Involved - Product development now includes designers, engineers, data specialists, security, content, marketing, product management, and executives. - Broader participation brings more expertise and enables global collaboration. - It also increases the number of perspectives, dependencies, and decisions that teams must coordinate. ### More Distributed Work - Physical distance can create emotional distance and make it harder to build trust. - Teams lose some of the informal coordination that came from working together in the same office. - Digital tools provide real-time editing, shared files, and multiplayer collaboration, but can also produce notification overload, fragmented discussions, and confusing comment threads. ### More Work in Progress - Companies are expected to release new versions of websites, applications, and digital products more frequently. - The growing volume and speed of work can allow high-performing teams to achieve more, while leaving others overwhelmed and frustrated. ## What Separates Effective Teams - Successful collaboration requires more than simply placing everyone in the same digital file. - High-performing teams distinguish themselves through: - Greater transparency - A shared understanding of goals and work - Intentional efforts to maintain connection and trust - These behaviors help turn distributed collaboration from a “cooperative mess” into productive teamwork. Teams should treat distributed work as a permanent operating model and deliberately invest in visibility, alignment, decision-making, and human connection rather than relying on digital tools alone.

Figma Product Design Collaboration Multiplayer Collaboration+1

figmaSep 14, 20233 min readCurated summary

Meet the nonprofit training formerly incarcerated people for careers in UX design | Figma Blog

CROP Organization is a nonprofit helping formerly incarcerated people rebuild their lives through holistic reentry support and UX design training. Its year-long Ready 4 Life program combines personal development, career preparation, employment services, and stable housing, using Figma to open pathways into tech. The organization argues that access to education, tools, mentorship, and opportunity can reduce recidivism and challenge assumptions about what formerly incarcerated people can achieve. ## CROP’s Mission and Ready 4 Life Program - Creating Restorative Opportunities and Programs (CROP) was founded in Oakland by people with extensive personal experience of incarceration. - The organization addresses gaps in reentry services, where housing, employment, counseling, and other support are often fragmented. - Its Ready 4 Life program provides: - Personal development - Career training - Employment services - Stable housing - The first cohort included 12 fellows living in apartments on CROP’s West Oakland residential and training campus. - Fellows also receive personal coaches and a monthly stipend. ## Founding the Organization Through Lived Experience - CROP’s founders collectively spent roughly 100 years incarcerated. - After one founder’s release exposed serious weaknesses in existing reentry services, the group designed a more integrated, “wraparound” model. - Jason Bryant describes education as transformative; during 20 years in prison, he earned a bachelor’s degree, two master’s degrees, and certification as a drug and alcohol counselor. - CROP seeks to help participants build skills and stability rather than simply return them to disconnected support systems. ## UX Design as a Career Path - CROP trains fellows in UX design using Figma. - Instructor Alexis Bustos joined after five years as a UX designer because she wanted to make a direct contribution to diversity and inclusion in technology. - She sees fellows’ storytelling, problem-solving, and ability to connect with people as valuable strengths in UX. - According to Bustos, the fellows primarily need technical training and access to tools—not a fundamentally different set of abilities. ## Reducing Recidivism Through Opportunity - The program aims to help address California’s approximately 50% recidivism rate. - California spends about $106,000 per incarcerated person annually, while only 3.4% of that spending goes toward rehabilitation. - CROP says its program costs roughly half the per-person cost of incarceration. - In 2021, the organization secured a three-year, $28.5 million partnership with California after presenting its plans to Governor Gavin Newsom. ## Challenging Social Stigma - CROP’s broader mission is to demonstrate that formerly incarcerated people can transform their lives when given meaningful opportunities and resources. - The program combines practical support with professional development so fellows can envision futures beyond the limitations imposed by criminal records. - By preparing participants for careers in technology, CROP also seeks to create new entry points into an industry where formerly incarcerated people have historically had limited access. CROP’s approach suggests that successful reentry requires more than isolated services: stable housing, coaching, education, technical skills, and employment support must work together. Programs that pair this holistic foundation with real career opportunities can benefit both participants and the communities they return to.

Figma User Experience User Research Design Thinking+1

figmaAug 30, 20233 min readCurated summary

How Spotify’s Design System Goes Beyond Platforms | Figma Blog

Spotify’s expansion to 45 platforms and more than 2,000 device types exposed inconsistencies between its product experiences. The company evolved Encore from separate mobile and web systems into a cross-platform design system focused on shared foundations and reusable components. Its goal is to make Spotify feel coherent everywhere without erasing the distinctive strengths of each platform. ## The Challenge of Consistency at Scale - Spotify’s 2019 ubiquity strategy aimed to make audio available across TVs, cars, computers, phones, and many other devices. - The design team needed more than broad platform coverage: users should recognize the experience as distinctly Spotify wherever they use it. - Components became central to achieving this consistency, from defining their scope to implementing them across products. ## The Birth and Evolution of Encore - When introduced in 2019, Encore had two main subsystems: - **Encore Consumer Mobile**, a flexible catalog of mobile-focused UI components. - **Encore Web**, supporting a wider range of web products. - Both systems used shared design tokens for foundational decisions such as colors and typography. - Over time, differences in component sizing, typography, and state treatments revealed that the subsystems needed greater commonality. - By 2022, flexibility had created too much divergence, prompting Spotify to rebalance the system toward reusable, consistent components. ## A Shared Layer Between Foundation and Products - Spotify created a specialized team focused on reusable components for Encore Mobile. - This new layer sits between the foundational system and Encore Consumer Mobile. - It acts as a “first line of defense,” reducing the need for product-specific teams to build every component themselves. - Developed in collaboration with Encore Web, the layer establishes platform parity from the beginning rather than retrofitting consistency later. ## Designing Components Across Platforms - The overall workflow remained familiar: research, design, and development. - The major change was coordinating design work across iOS, Android, and Web instead of designing for one platform in isolation. - Components are intended to share a coherent visual and behavioral language while still adapting to platform-specific requirements. - This requires collaboration among specialists, since web and mobile designers bring different domain expertise. - Spotify begins by bringing platform teams together and researching each platform’s unique characteristics before creating the shared component. Spotify’s approach treats a design system as more than a collection of platform-specific libraries. By establishing shared components early and combining them with platform-aware design, teams can create experiences that feel unified without sacrificing the qualities that make each device and interface effective.

Design Systems Android iOS Design Tokens+3

figmaAug 28, 20232 min readCurated summary

Keeping Figma Fast | Figma Blog

Figma’s original performance-testing system relied on a single MacBook running a few repeated scenarios, which worked when the product and team were smaller. As Figma expanded into plugins, FigJam, Dev Mode, and many other features, that approach became too limited and fragile—the laptop eventually overheated while the company was remote. Figma concluded it needed a scalable, proactive testing framework capable of catching regressions across its growing codebase. ## From One Laptop to a Growing Product - In 2018, one MacBook repeatedly ran performance scenarios and reported timing changes to a shared dashboard. - A major renderer restructuring and WebAssembly fixes made Figma three times faster. - Over five years, the product grew substantially, adding: - Plugins and Community features - FigJam - Dev Mode - Numerous ongoing product updates - The existing test files could no longer represent the product’s expanding feature set and edge cases. ## Limits of the Original Testing Process - Granular performance tests measure specific behavior at scale, such as panning through a file while 100 users edit layers and type simultaneously. - Creating feature-specific tests became impractical as Figma grew beyond 400 engineers and managers. - Increasing release velocity made it difficult for any individual or single machine to track every performance-affecting change. - During the shift to remote work in 2020, the office MacBook remained running unattended and eventually overheated. - Attempts to reproduce the setup on another laptop were unsuccessful, demonstrating that the system was not operationally scalable. ## Requirements for a New System Figma used the overhaul to define an ideal performance-testing framework: - **Test every proposed code change:** Performance checks should run against changes in the main monorepo, allowing regressions to be found during development rather than after users encounter them. - **Support proactive performance work:** Small delays can significantly disrupt users who spend hours working in Figma. - **Run tests in parallel:** Dozens of stress scenarios would need to execute simultaneously, similar to Figma’s existing cloud-based CI testing. - **Finish quickly:** Performance guardrail checks were required to complete in under 10 minutes. - **Scale across real hardware:** Running every pull request on physical machines could require roughly 100 identical runners at peak capacity. Figma’s experience shows that performance testing must evolve alongside product complexity. A lightweight single-machine setup can be effective initially, but larger teams and faster release cycles require automated, parallel, hardware-aware testing integrated directly into CI.

CI/CD Webassembly Monorepo Performance Testing+2

figmaAug 22, 20232 min readCurated summary

Give ideas more space with Jambot | Figma Blog

Jambot is a FigJam widget that brings ChatGPT’s generative capabilities into a collaborative, visual canvas. Figma created it to move beyond the limitations of linear chat, allowing people to ideate, branch into related topics, summarize discussions, and explore ideas together. The project reflects Figma’s broader view that AI interfaces should become more spatial, tangible, and multiplayer. ## From Chatbots to Creative Collaboration - Large language models can simulate spontaneous brainstorming and provide a broad base of knowledge. - ChatGPT’s conversational format is useful but can feel one-sided and restrictive during creative work. - Jambot was designed to make AI interaction more collaborative and adaptable to group ideation. ## Limitations of Linear Chat - Chat conversations present ideas in a one-dimensional sequence. - When ChatGPT offers multiple possibilities, exploring one path makes it difficult to return to another without scrolling and repeating questions. - Linear chat makes it unnatural to branch into related topics, compare alternatives, or see how ideas connect. ## A Visual Alternative - Jambot began as an internal Figma AI hackathon project described as “a visual version of ChatGPT.” - Its concept draws on networked-thinking tools such as Roam Research and Logseq, which link and organize ideas across pages. - The team was also inspired by Albus, which gives AI interaction a more visual structure. - LangChain influenced the idea of making sophisticated AI workflows visually tangible rather than requiring users to write code. ## Rethinking AI Interfaces - The team argues that users are currently “stuck in chat boxes,” much as they became dependent on video-call interfaces like Zoom. - Existing AI interfaces can feel primitive and command-line-like, despite decades of progress in graphical user interfaces. - Designers have an opportunity to develop new interaction patterns that provide more context, identity, and flexibility than simple conversational prompts. - A visual canvas can make AI more approachable while supporting branching ideas and shared participation. ## What Jambot Enables - Ideation and brainstorming directly inside FigJam. - Summarizing conversations or collections of ideas. - Riffing on concepts and extending them in multiple directions. - Collaborative exploration of AI-generated output within a multiplayer workspace. Jambot’s central recommendation is to treat AI as something that can inhabit richer environments than a chat window. By placing generative AI on a shared visual canvas, Figma aims to give teams more space to explore, connect, and develop ideas together.

Large Language Models Generative AI Figjam Chatgpt+2

figmaAug 21, 20233 min readCurated summary

Dev Mode fast follows: 200+ new features and fixes | Figma Blog

After two months of open beta, Figma released more than 200 Dev Mode features, improvements, and bug fixes based on over 5,000 pieces of community feedback. The updates improve design inspection, component workflows, code generation, file navigation, and integration with developer tools. Together, they make Dev Mode more practical for translating designs into implementation-ready code. ## New Dev Mode capabilities - Status labels can now be added to components, instances, and frames—not just sections—to indicate development readiness. - Layout grids, rulers, and outline mode are available through the View menu and familiar Design Mode shortcuts. - Detached components can be compared with their main components to identify differences. - Android XML and iOS UIKit have been restored as code-generation options. - The Inspect panel now supports the `UIColor` format. - Version history allows users to inspect previous design iterations. ## Usability and performance improvements - Components from external libraries display the library name. - Nested component properties and component modes, such as light and dark themes, are available in the component playground. - `rem` units can be applied specifically to text while other properties remain in pixels. - Multiple canvas objects can be selected and exported together using Shift-click. - Figma files and notifications can surface in VS Code through Figma’s VS Code integration. - Typography previews expose style name, font size, and line height, which can be copied directly. - Individual text portions can be inspected on the canvas. - The Layers panel can be resized vertically. - Figma suggests matching design-system variables when raw values resemble existing variables. - Values can be inspected as Figma properties as well as code snippets. - Source files such as images can be downloaded. - Alternative unit preferences are easier to find. - Section-level links are grouped by frame. ## Code-generation updates - Holding Shift copies all available code snippets at once. - CSS generation supports directional properties such as `padding-top` and `padding-left` when only one padding value is defined. - Snippets consistently include `font-style`, `line-height`, and `font-weight`. - Line height is shown in both percentage and pixel formats. - CSS codegen supports OpenType features including `font-feature-settings`, `font-variant-numeric`, and `font-kerning`. - Variables can be used for auto-layout constraints such as minimum and maximum dimensions and vertical gaps in wrapping layouts. - Text layers containing multiple styles generate separate CSS for each style. - The Figma Community now offers nearly 80 code-generation plugins, including tools for Tailwind, React, and Vue. ## Bug fixes and navigation - Users can switch between Design Mode and Dev Mode with tab navigation. - Alternative units now display correctly in hints and tooltips. - The release also includes additional fixes, including smoother handling of gradients in text. Figma’s fast-follow release shows that Dev Mode is being shaped around developer feedback. Teams using it should revisit their workflows and integrations to take advantage of improved inspection, code export, component exploration, and VS Code support.

Figma React CSS Dev Mode+4