Techlist.io - Korean Tech Blog Curator

figmaJul 20, 20202 min readCurated summary

A deep dive on deep search | Figma Blog

Figma’s deep search lets users find files by searching text inside them rather than relying on file names or metadata. Building it required extending infrastructure originally created for Design System Analytics to process `.fig` files stored in Amazon S3. Because analyzing large file trees is expensive, Figma accepted briefly stale results and processed deduplicated changes hourly. ## Deep Search in a Browser-Based Product - Figma’s web-based architecture provides detailed access to files and usage data. - This enables features such as: - Component usage analytics - File-view frequency - Inspection of file structure - Searching content inside files - Deep search builds on the browser’s collaboration and discoverability advantages. ## Reusing Design System Analytics Infrastructure - Design System Analytics already opened recently edited files, retrieved them from storage, and traversed their contents. - Analytics extracted shared-library usage information. - Deep search applies the same general workflow to extract text from Figma files. - The existing file-analyzer worker platform provided support for computationally intensive, periodic processing. ## Regular Search vs. Deep Search - Regular search indexes database metadata, including: - File name - Creator - Folder ID - Team ID - Its pipeline: - Database changes are streamed into a messaging system. - Search indexers retrieve current records. - The metadata is indexed in Elasticsearch. - Deep search cannot rely on database metadata because the actual file contents are stored as `.fig` documents in Amazon S3. - A `.fig` file is represented as a tree of nodes, such as frames, rectangles, vectors, ellipses, and text objects, each with its own properties. ## Managing the Cost of File Analysis - Retrieving and traversing a complete Figma file is significantly more expensive than reading database records. - Files may contain thousands of nodes, and users can trigger saves approximately every 30 seconds. - Re-indexing every save would produce substantial duplicated computation. - Figma therefore: - Deduplicates file changes over one-hour windows. - Sends changed files to file-analyzer workers. - Allows deep-search results to be temporarily stale. - This tradeoff reduces server workload while maintaining useful search functionality. Deep search demonstrates how content-aware features require different infrastructure from conventional metadata search. Periodic, deduplicated processing offers a practical balance between timely results and the high computational cost of analyzing complete design files.

Distributed Systems Amazon S3 Data Pipeline Elasticsearch+2

figmaJul 6, 20202 min readCurated summary

How BT continues to push the telecommunication industry forward | Figma Blog

BT, a telecommunications company founded in 1846, modernized its product development by reorganizing teams into cross-functional product squads. These squads adopted Figma to replace fragmented design tools and improve collaboration among designers, engineers, product owners, content designers, and stakeholders. The shift reduced costs, increased design visibility and consistency, accelerated delivery, and helped BT maintain collaboration during the move to remote work. ## The Evolution to Product Squads - BT created smaller teams responsible for end-to-end product delivery. - Designers began working directly with product owners, engineers, content designers, and other specialists. - The new structure encouraged collaboration but exposed workflow problems: - Too many disconnected tools, including Docs, Sketch, InVision, and Jira. - Time-consuming file transfers and handoffs. - Multiple feedback channels and communication barriers. - Difficulty maintaining cohesive design across product lines. ## Migrating to Figma - BT’s design operations team piloted Figma with one product squad for two months. - The pilot produced quick benefits: - Real-time collaboration became easier. - Design handoffs were simplified. - Teams could design, prototype, and present in one place. - Engineers and product owners gained earlier visibility into design work and could contribute before decisions were finalized. - Following the pilot, BT rolled Figma out across all product squads. - Stakeholders could review and comment on work through a link from any device. ## Business and Organizational Benefits - **50% lower design-tool costs:** Figma replaced Sketch and InVision. - **Greater influence for design:** Better visibility brought design into more business decisions and investment discussions. - **Improved consistency:** Figma created a foundation for a future centralized design system spanning BT’s brand, products, and business units. - **Business continuity:** During COVID-19, Figma provided a shared online workspace for remote teams to communicate and solve problems. - **Faster decision-making:** Teams began conducting live experience walkthroughs with executives instead of preparing polished presentation decks. - **Higher transparency and efficiency:** Cross-functional teams developed a shared understanding of work and goals. BT’s experience shows that adopting a collaborative design platform can support more than design efficiency. Combined with cross-functional product squads, it can reshape organizational workflows, reduce costs, strengthen stakeholder involvement, and help a large company continue innovating.

Figma Design Systems Prototyping Design Collaboration+3

figmaJun 30, 20202 min readCurated summary

How Clearstep simplifies the experience of finding care online | Figma Blog

Clearstep built a symptom-checking and care-routing platform to make finding healthcare less stressful and more actionable. The platform helps users determine whether they need care, identify suitable providers based on location and insurance, estimate costs, and schedule appointments. The team relied on iterative design, shared styles, and real-time collaboration in Figma to manage complex patient flows and customized health-system branding. ## Designing a Complex Healthcare Experience - Clearstep launched its platform in 2018 to guide patients from symptom evaluation to appropriate care. - Its features include: - Symptom checking and care recommendations - Provider matching based on location and insurance network - Insurance eligibility checks - Cost estimates - Direct appointment scheduling - Because the product influences thousands of patients’ healthcare decisions, the team prioritized both speed and accuracy in design. ## Testing Information-Dense User Flows - The team iterated extensively on how users move through symptom checking and compare care options. - Figma’s Smart Selection made repetitive tasks, such as reordering care options, faster through drag-and-drop editing. - Typography and button copy were refined through user testing because small changes affected navigation and decision-making. - Automatically resizing button text allowed the team to test different wording efficiently. ## Managing Custom Branding - Clearstep licenses its platform to health systems, requiring white-labeled versions with different customer branding. - Designers created new Figma files for each client and quickly added custom color palettes. - Color Styles enabled multiple designs to be updated at once. - Approved styles could be published to a shared Library so every editor worked from the same branding system. ## Collaborating Remotely - Figma’s multiplayer features allowed Peter Garber and Annie Kramer to edit, review, and improve designs simultaneously. - Shared text and color styles kept design and engineering work synchronized. - Prototypes could be shared through browser links, allowing the broader team to review changes in real time. - Named, color-coded cursors, observation mode, and comments reduced reliance on screen sharing and made feedback easier to track. ## Moving from Design to Implementation - Engineers used Figma’s Color Styles, Code panel, spacing labels, and export tools to translate designs into working interfaces. - Developers could access assets directly rather than relying on manual downloads or lengthy handoff conversations. - Centralized styles helped preserve consistency between the final designs and implementation. Clearstep’s approach shows how collaborative design tools can help healthcare teams simplify complicated workflows, support customer-specific branding, and move efficiently from tested interface concepts to implementation.

Figma Design Systems User Experience Prototyping+2

figmaJun 23, 20202 min readCurated summary

How to evaluate design tools | Figma Blog

Choosing a design tool should be treated as a structured team project, not a simple feature comparison. The right choice depends on factors such as team size, remote distribution, workflow, collaboration needs, and existing pain points. Figma recommends a phased process that typically takes about a month and combines stakeholder input, defined criteria, hands-on testing, and documented feedback. ## Phase 0: Lay the Groundwork - Treat the evaluation like a product launch or design sprint and include it in the team’s quarterly planning. - Create a workback schedule, allowing roughly: - Two weeks for preparation - Two weeks to test tools on short-term projects - Set a firm decision deadline so the process can end early if one tool clearly stands out. - Identify stakeholders across design, product, development, marketing, and project approval teams. - Consider forming a cross-functional working group with regular check-ins and a shared communication channel. - Document milestones, formal feedback, and informal observations in a shared workspace. - Set expectations that adopting a new tool may require several weeks of ramp-up before productivity returns to normal. ## Phase 1: Define the Problem - Clarify what the team actually needs before comparing specific products. - Consider team characteristics such as: - Size and expected growth - Whether members work in one office or remotely - Onboarding and scalability requirements - Identify concrete pain points in the current workflow, including moments where collaboration breaks down. - Gather feedback from people outside the immediate design team, especially developers, product managers, and marketers. - Focus on specific scenarios such as developer handoff rather than vague dissatisfaction. ## Phase 2: Establish Evaluation Criteria - Convert the team’s needs and pain points into a small number of priority themes. - Productivity is one important theme, covering activities such as: - Individual design work - Sprint planning - Design critiques - Developer handoff - Match criteria to the team’s circumstances: - Large teams may prioritize consistency, shared libraries, and design-system support. - Fast-growing teams may emphasize onboarding and scalability. - Distributed teams may place greater weight on collaboration and communication. The practical recommendation is to invest in preparation before testing tools. A documented, stakeholder-informed evaluation helps teams choose software that fits their real workflows and reduces the disruption and cost of a poorly planned migration.

Figma Design Systems Collaboration Design Tools+2

figmaJun 17, 20203 min readCurated summary

How to get closer with your developer | Figma Blog

Bringing engineers into product design early helps teams uncover technical constraints, explore better solutions, and move faster. Rather than waiting until designs are polished, designers should use early, exploratory collaboration to expose assumptions and edge cases. The post recommends partnering closely with one engineer through ideation using straw man mocks, brainstorming, and clearly defined questions. ## Technical Knowledge Improves Ideation - Engineers can identify technical constraints and unexpected edge cases early. - This input helps designers avoid solutions that seem promising but are difficult or costly to build. - Early collaboration does not eliminate creativity; it makes ideas more thoughtful and grounded. - Sharing unfinished work can be more productive than protecting designs until they appear complete. ## Establish a Close Engineering Partnership - For Coda’s Packs Tables feature, Helena Jaramillo worked closely with one engineering partner, Gil. - Packs Tables connected services such as Spotify, Google Calendar, and Gmail to Coda documents. - Because the feature had to work across multiple APIs, close engineering collaboration was essential. - The broader team was involved, but having a consistent partner enabled faster brainstorming and continuous feedback. ## Start with Straw Man Mocks - Straw man mocks are quick, rough visual proposals intended to generate discussion rather than finalize a design. - They should: - Be fast to create, since early assumptions are often incorrect. - Ask more questions than they answer. - Present multiple directions instead of prematurely narrowing to one solution. - Designers should first imagine how the feature might work if it were easy, then test those assumptions with an engineer. - Useful questions include: - What assumptions or misconceptions are we making? - What are we overlooking? - Which directions are interesting? - Which directions are technically difficult, and what trade-offs would they involve? ## Brainstorm Through Visualization - Early brainstorming should involve both designers and engineers, not just a finished design review. - Teams can use wireframing kits, high-fidelity components, paper sketches, iPads, or screen sharing. - During Packs Tables, Helena and Gil used whiteboarding to explore UI ideas and clarify potential problems. - The goal at this stage is alignment and exploration—not polished interface design. ## Define Key Questions - Key questions act as principles for making later decisions. - They help teams address foundational issues before debating individual solutions. - Answering questions about constraints, resources, priorities, and desired outcomes makes detailed decisions easier. - Helena and Gil recorded their key questions in a Coda document and reviewed them with the engineers involved in the project. Designers should treat engineers as creative partners from the beginning of a project. Rough mocks, shared brainstorming, and agreed-upon guiding questions create a faster path to feasible, thoughtful solutions.

Product Design Collaboration API Wireframing+2

figmaJun 15, 20202 min readCurated summary

Beyond mocks: co-designing journeys, diagrams, and more | Figma Blog

Design is more than producing interface mocks; it also involves shaping customer experiences, processes, culture, and community. Segment’s product design team demonstrates how designers can collaborate with researchers, product managers, engineers, and other colleagues using shared visual artifacts. These co-designing practices create organizational sources of truth, improve decision-making, and strengthen team connections. ## Mapping the Customer Journey with UX Research - A designer and UX researcher mapped Segment’s end-to-end customer experience, from discovery and sign-up through scaled implementation. - The journey was organized around different customer tiers and enriched with analytics. - An interactive prototype included clickable customer stories. - The resulting file became both a reference point for the company and an onboarding resource. ## Diagramming Data Architecture - Designers, researchers, customer success managers, and infrastructure engineers collaborated to visualize how data moves through Segment. - The diagram showed where data is transformed, enriched, and cleaned. - It helped the team identify existing strengths and areas needing improvement. - The artifact became foundational for planning future products and served as another organizational source of truth. ## Retrospecting on the Design System - Segment’s open-source Evergreen design system is used by teams beyond design, making cross-functional feedback especially important. - Designers and engineers held a remote retrospective in Figma using virtual sticky notes. - Participants documented pain points and identified opportunities for improvement. - The exercise informed the following quarter’s OKRs and helped the team co-design a roadmap for Evergreen. ## Building Community Through Collaboration - Co-designing can support social connection as well as product and process work. - For International Women’s Day, remote EPD teammates collaborated in Figma to create personalized appreciation notes for female-identifying colleagues. - The team also adapted the practice for virtual birthday cards and other celebrations. - These activities helped preserve meaningful workplace rituals while working remotely. The article encourages teams to expand co-design beyond product mocks. Shared journeys, diagrams, retrospectives, and collaborative community activities can make complex work visible, align diverse teammates, and create stronger connections.

Figma Design Systems User Experience Prototyping+3

figmaMay 26, 20203 min readCurated summary

The making of Maker Week | Figma Blog

Maker Week is Figma’s twice-yearly company-wide tradition for exploring projects beyond everyday roles. In 2020, the event moved fully online, prompting Figma to prioritize connection, emotional expression, and collaboration over polished results. Its theme, “How to help one another,” shaped both the creative direction and the activities. ## A Company-Wide Creative Tradition - Maker Week is open to everyone, unlike hackathons that typically focus on engineering and design. - Employees pause nonessential meetings and, when possible, interviews to collaborate with people outside their usual teams. - The event is intended to remove day-to-day constraints and encourage experimentation rather than shipping finished products. - Figma continued the tradition because maintaining company culture was especially important during remote work. ## Prioritizing Process Over Output - The 2020 event explicitly discouraged optimizing for productivity or delivering polished work. - The emphasis was on working together, exploring ideas, and creating space for individual circumstances and capacity. - This approach acknowledged the difficulty and uncertainty many employees were experiencing. ## “How to Help One Another” - Earlier Maker Weeks had no central theme beyond making something related to Figma. - The new theme provided a guiding principle while responding to the broader challenges of 2020. - It encouraged projects and interactions centered on support, empathy, and mutual help. ## Designing Space for Vulnerability - Remote work created emotional distance but also offered opportunities for people to share more openly. - Figma’s creative direction aimed to give employees an outlet for whatever they were feeling. - The organizers encouraged vulnerability and treated all emotional responses as valid. ## Mood Characters - Figma created a shared playground file where employees could build “mood characters.” - Characters were assembled from familiar objects found around designers’ home workspaces. - The objects represented the mixed, conflicting, and often confusing emotions of working through a difficult period. - The activity gave everyone a simple way to make and share something, even without the time or energy for a larger project. ## Bringing Maker Week Online - Office-based traditions such as posters, shared breakfasts, and in-person kickoff moments had to be reimagined. - Figma replaced them with digital experiences, including custom Zoom backgrounds. - The company used visual design not only for branding, but also to create energy, delight, and a sense of shared participation remotely. Maker Week’s remote adaptation shows how a company tradition can preserve its purpose by changing its format. By focusing on connection, vulnerability, and low-pressure creativity rather than productivity, Figma made the event relevant to the circumstances of its employees.

Figma Graphic Design Remote Work Zoom

figmaMay 18, 20202 min readCurated summary

Bringing live Figma embeds to your team’s favorite tools | Figma Blog

Figma introduced live embeds for private design files, allowing teams to view current designs directly inside tools such as Notion, Dropbox Paper, Jira, Trello, Coda, and internal documentation sites. The feature addresses the friction caused by designers and developers working across separate tools, replacing outdated screenshots with embeds that update automatically. Figma’s broader goal is to keep designs available in context throughout product planning, development, and documentation. ## Private Embeds Improve Cross-Functional Collaboration - Previously, Figma embeds supported public files, but many teams needed to keep designs private. - Private embeds let authorized teammates view organizational files without leaving their existing workflows. - Embedded files provide context during handoff and reduce the effort of locating and maintaining the latest design version. - Unlike screenshots, live embeds automatically reflect design changes. ## Product Specs and Requirements - Teams can embed designs, prototypes, user journeys, and idea boards alongside product briefs and roadmaps. - Developers can review requirements and the corresponding designs in tools such as Coda, Notion, and Dropbox Paper. - Figma highlighted reusable Coda templates for product requirements and roadmaps. - Keeping designs inside specifications helps ensure that concepts and prototypes remain current. ## Project and Task Management - Embedding designs in Jira issues and Trello cards keeps design and development work connected. - Product teams can reference current designs while planning work, managing sprints, triaging requests, and tracking tasks. - Figma provides integrations through the Figma for Jira app and Figma for Trello power-up. ## Documentation and Internal References - Teams can include private Figma files in documentation systems such as Storybook and internal knowledge sites. - The Figma Live Embed Kit enables organizations to add private embeds to custom documentation platforms. - Embedded designs serve as an up-to-date reference and help establish a single source of truth for UI standards and product behavior. - Prototype embeds also respect settings that hide the Figma toolbar and footer, which is useful for user-testing tools such as Maze. Figma recommends trying private embeds in existing workflows and encourages users to request support for additional tools. The practical takeaway is to embed live Figma files wherever design context is needed, rather than relying on manually maintained screenshots.

Figma Jira Storybook Notion+4

figmaMay 12, 20202 min readCurated summary

Finding design inspiration at home | Figma Blog

Figma designers argue that creative inspiration can come from ordinary activities, personal memories, online communities, and fields far removed from design. During periods of isolation or creative fatigue, making things, exploring unfamiliar subjects, and connecting with others can be more productive than forcing ideas. The central recommendation is to broaden creative inputs while avoiding direct imitation. ## Less Thinking, More Doing - Overthinking can drain creative energy, especially when work continues during stressful periods. - Trying a new hobby or skill can break the cycle: - Remilla Ty finds inspiration in collecting plants, rearranging furniture, drawing, and writing. - Rasmus Andersson explores computer science, music, and games. - Joyful side projects, such as turning drawings into stickers, can provide a creative boost without the pressure of professional work. ## Finding a Virtual Escape - Travel, museums, architecture, and live music may be unavailable, but memories can provide a substitute source of inspiration. - Creative director Tori Hinn revisits photographs in her camera roll to reconnect with past experiences and regain energy. - Looking through personal archives can offer perspective and stimulate new ideas. ## Leaning on Online Communities - Designers are using social media, Figma Community, articles, videos, and collaborative platforms to stay connected and inspired. - Katherine Frazer recommends Are.na because users can openly contribute to shared collections. - Rasmus Andersson follows curated sources such as Archillect on Twitter. - Noah Levin uses Twitter organically, following interesting designers and discovering more through their networks. - Online communities can replace some of the creative exchange normally found in physical spaces. ## Going Beyond Design - Inspiration becomes stronger when it comes from areas unlike design because the mind must create connections between unfamiliar concepts and visual ideas. - Tori draws from music and movies, while Remilla looks to innovation-focused content such as cooking shows. - Searching directly for solutions to a specific design problem can lead to imitation or narrow thinking. - Rasmus recommends studying neighboring fields or “similar-but-different” problems instead of copying work that solves the exact same challenge. Creative momentum does not require constant exposure to design references. Experiment with hands-on hobbies, revisit personal experiences, connect with online communities, and seek unexpected influences to develop more original ideas.

Figma User Experience Slack Visual Design+3

figmaMay 10, 20203 min readCurated summary

How to pair design (and convince your boss to invest in it) | Figma Blog

Design pairing is a collaborative practice in which two designers synchronously solve the same problem, rather than splitting a project into separate tasks. One designer drives the design while thinking aloud, and the other navigates by observing, asking questions, and identifying edge cases. The approach can improve design quality, accelerate feedback and knowledge sharing, reduce meetings and documentation, and strengthen team morale. ## What Design Pairing Means - Two people work on the same design problem at the same time. - It differs from “divide and conquer,” where designers independently handle separate parts of a project. - Pairing can be applied to tasks such as designing a signup flow, exploring ideas, or refining a user experience. ## Common Pairing Styles - **Generator and synthesizer:** One designer produces many ideas while the other organizes them into a coherent UX flow. - **Lead and support:** A more experienced designer leads while another develops skills through participation. - **Screenshare pairing:** Adapted from pair programming, with designers collaborating directly in the same file. ## Structuring a Pairing Session - Set up shared access to the same design file; tools like Figma enable real-time multiplayer collaboration. - Assign two roles: - **Driver:** Controls the file and performs the design work while explaining decisions aloud. - **Navigator:** Observes without editing and asks constructive questions about patterns, user confusion, and potential edge cases. - The navigator should raise questions rather than criticize, bringing critique and future user feedback into the design process immediately. ## Practical Tips - Agree on the problem before starting, using sketching or inspiration gathering to establish shared context. - Decide who will drive and navigate. - Set a session length, whether it is 10 minutes, a day, or a week. - Take breaks because sustained collaboration can be tiring. - Switch roles so both designers practice driving and navigating. - Use supportive improv principles: build on ideas first and defer rejection when possible. - Normalize the vulnerability of having someone watch you work. - End with a brief retrospective about what worked and what felt uncomfortable. ## Making the Business Case Although pairing appears to use two designers on one task, it can make the overall process more efficient by: - Providing immediate, contextual feedback. - Reducing distractions and later critique cycles. - Sharing knowledge faster and reducing documentation and meetings. - Producing more ideas and uncovering more errors, bugs, and edge cases. - Keeping design files more organized. - Increasing confidence in design decisions. - Improving team morale, which can further improve the quality of the work. Teams should experiment with short pairing sessions, evaluate the results, and expand the practice where it improves speed, quality, and collaboration.

Figma User Experience Sketch Design Critique+2

figmaMay 5, 20202 min readCurated summary

Inside Figma: the product design team’s process | Figma Blog

Figma’s product design team uses deliberate rituals and meeting cadences to maintain connection, consistency, and a high quality bar across designers embedded in different product areas. The article distinguishes the horizontal design-team culture from the vertical product-team culture, arguing that both require investment. Its processes are intended as adaptable examples rather than prescriptions, especially during the disruption of the COVID-19 pandemic. ## Two overlapping team cultures - Designers belong to both: - A **horizontal design team**, which supports consistency, craft, and shared quality standards. - A **vertical product team**, which focuses on shipping improvements and building expertise in a product area. - As companies grow, designers tend to move from close collaboration across the whole design team into specialized product-area groups. - Figma, with around 10 product designers, was encouraging designers to prioritize relationships with product teams while relying on design-team processes for alignment and community. ## Process during the pandemic - The article was written during COVID-19, when remote work and personal disruption affected productivity and morale. - Design leadership encouraged people to make space for mental health and acknowledged that output might fall significantly. - Regular collaboration became especially valuable because it helped replace some of the social connection normally created in an office. - The author cautions teams not to adopt new rituals automatically; each organization should decide whether it has the capacity for process changes. ## Weekly processes ### Monday warm-up - **Participants:** Product designers, with optional participation from research and brand team members. - **Schedule:** Mondays, 9:30–10:00 a.m. Pacific Time. - **Purpose:** Start the week with a light, social activity rather than immediately focusing on work. - The 30-minute meeting includes a “weekend update” segment lasting roughly five to ten minutes, along with additional activities designed to help the team reconnect. ## Scope of the article - The post focuses on **design-team processes**, not the broader product-development process. - It covers recurring weekly activities, monthly and quarterly rituals, and practical advice for designing team activities. - Product roadmapping, product-team collaboration, hiring, and design critiques are treated in other Figma resources. Figma’s approach emphasizes creating intentional, repeatable moments for connection while keeping the process flexible. Teams should adapt these rituals to their size, structure, working environment, and the personal needs of their members.

Figma Product Design User Research Remote Collaboration+1

figmaApr 29, 20202 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.

Figma Prototyping Collaborative Design Web Design+2

figmaApr 28, 20202 min readCurated summary

Bridge design and development with the new Zeplin integration | Figma Blog

Figma and Zeplin introduced a redesigned native plugin to improve design-to-development handoff. The integration lets teams export Figma frames, components, colors, and text styles directly to Zeplin, where developers can generate specs, assets, and code snippets. Rebuilt for better performance and maintainability, it addresses issues with large files and high-resolution exports while opening the door to automatic component updates. ## A Growing Design-to-Development Workflow - Zeplin provides advanced handoff features and acts as a bridge between designers and developers. - The original Figma integration launched before Figma officially launched. - More than 300,000 Figma files were exported to Zeplin each month, with usage increasing by 30–40% during the shift to remote work. ## Rebuilt as a Native Plugin - The second-generation integration was rebuilt from the ground up as a native Figma plugin. - This creates a more seamless export experience for users. - It also makes the integration easier for Zeplin to maintain and extend with new features. - Performance problems affecting large Figma files, frames, and export resolutions were addressed. ## Exporting Designs and Generating Handoff Materials - Users can export: - Frames - Components - Color styles - Text styles - In Zeplin, product teams can automatically generate: - Accurate design specifications - Assets - Code snippets - Exported assets can also appear directly in Zeplin style guides. ## Future Possibilities - Figma’s web-based architecture offers advantages over integrations with other design tools. - Zeplin was exploring automatic synchronization, allowing changes to Figma components to be pushed to Zeplin without manual exports. - Users could install the plugin through the Figma Community, and Figma customers were offered three free months of Zeplin’s Organization plan. The new plugin is recommended for teams seeking a faster, more reliable handoff between Figma and development, especially when working with large files or shared design systems.

Figma Developer Tools Zeplin Design Handoff+2

figmaApr 22, 20202 min readCurated summary

Bringing Figma to even more classrooms | Figma Blog

Figma expanded its Figma for Education program in response to the growing need for remote teaching during COVID-19. The program now supports online courses, bootcamps, school-sponsored hackathons, and other virtual or informal classrooms—not just accredited degree programs. Its goal is to make collaborative design education accessible to more learners. ## Expanding Eligibility Beyond Traditional Institutions - Figma had previously offered free access and discounts to students and educators at accredited institutions. - More than 100,000 people worldwide were already using Figma in classrooms. - The expanded program now includes: - Online courses - Bootcamps - School-sponsored hackathons - Other in-person and virtual learning environments - This broader eligibility supports students pursuing degrees, changing careers, improving their skills, or simply learning about design. ## Supporting Remote Classrooms - The shift to remote education created significant challenges for educators and students. - Figma worked with educators such as Miguel Cardona of RIT and Students Who Design to publish teaching materials and guidance for organizing online classes. - These resources cover onboarding students, structuring files, teaching remotely, and providing project feedback. ## Benefits of the Education Plan Applicants accepted into the program receive: - A free Education plan with Professional-level features. - Unlimited editors, files, and projects. - Classroom-focused templates and other teaching resources. - Access to a community of educators and students. - Invitations to virtual events and meetups. ## Collaborative Design Learning - Figma emphasizes that its browser-based, collaborative workflow fits naturally with how students already work together online. - UC Berkeley professor Eric Paulos highlighted the platform’s ability to bring rich online collaboration into visual design education. - The program reflects Figma’s broader mission of making design more accessible. Educators and students can apply for an Education plan through Figma’s education program, while feedback and ideas are welcomed through the dedicated education team.

Figma User Experience Remote Collaboration Human Computer Interaction+2

figmaApr 21, 20202 min readCurated summary

The case for lightweight prototyping | Figma Blog

Lightweight prototypes do not need to be polished to be valuable. Figma argues that early, informal prototypes accelerate feedback, clarify communication, expose technical constraints, and reduce wasted effort. The best prototype is often the one shared early enough to influence the final product. ## Why Lightweight Prototypes Matter - Prototypes support more than formal usability testing: - They communicate a product vision. - They help collaborators and stakeholders respond to work in progress. - They encourage early course correction before changes become expensive. - High fidelity is not always necessary; an informal prototype can be more useful than a polished one if it prompts meaningful feedback. ## Testing Copy and Content - A prototype reveals whether headers, body text, and buttons work together coherently. - It helps identify: - Unclear calls to action - Inconsistent terminology - Mismatched writing styles or tone - Reviewing copy in context is especially useful when multiple people contribute UX writing or microcopy, even before a formal style guide exists. ## Adding Context for Developers - Sharing early prototypes with developers can expose: - Feasibility problems - Technical roadblocks - Areas requiring further exploration - Prototypes are blueprints rather than finished implementations, so additional context helps developers understand the intended experience and bring the design to life accurately. ## Communicating Interactions - Even simple prototypes should clearly map user paths and interactions. - Specifying behaviors such as **On Click**, **On Drag**, and **While Hovering** makes the intended experience easier to understand. - Explicit interactions lead to more accurate feedback and more effective testing. ## Using Figma for Internal Communication Figma also uses prototypes as a communication medium, particularly for remote collaboration. - **All-hands meetings:** Team members add presentation slides directly to a shared master Figma file. - **Information sharing:** Teams use Presentation View for quarterly plans, research findings, and remote-collaboration ideas. - **Customer conversations:** Sales teams send prototype URLs instead of static PDFs, enabling customers to click through presentations and view animated elements such as GIFs. - **Events:** Figma speakers use Figma files and Presentation View to build and deliver conference presentations. Lightweight prototyping is most effective when it is shared early, includes enough interaction detail to convey intent, and provides the surrounding context that collaborators need. Teams should treat prototypes as flexible communication tools—not merely as final-stage testing artifacts.

Figma Design Systems User Experience Prototyping+2