Figma

736 posts

www.figma.com/blog/engineering

Filter by tag

figma3 min readCurated summary

An open letter about my gap year | Figma Blog

The post explores Abigail Africa’s uncertainty about returning to USC during the COVID-19 pandemic and whether taking a gap year would better serve her education, finances, and career. She argues that remote classes cannot fully replace the community, hands-on projects, and extracurricular experiences she planned for her senior year. Her decision is also shaped by family expectations, cultural background, and Silicon Valley’s complicated “dropout” mythology. ## The Case for a Gap Year - Africa had envisioned her final year around a senior capstone involving pitching, running, and growing a startup. - A remote semester would mean losing experiences such as: - Collaborating in makerspaces - Experimenting with hardware - Recording podcasts and producing videos - Building close relationships with classmates and professors - Many students faced different constraints: - Some would attend classes from their childhood bedrooms. - Others questioned paying full tuition for Zoom-based education. - International students risked visa complications if they did not return. - Africa’s reasons for considering time off were: - Waiting to return until she could fully participate in campus life - Working during the pandemic and building savings - Gaining more startup experience before potentially founding a company ## Family Expectations and the Value of Education - Africa’s family worried that a gap year could become permanent and prevent her from finishing her degree. - Her immigrant grandparents sacrificed established careers and worked minimum-wage jobs to support their children’s education. - Her parents similarly prioritized education over luxuries and invested heavily in her schooling. - For Africa’s family, education is the reliable path to success, while gap years and dropping out appear risky and difficult to justify. - Africa recognizes that she does not yet have a convincing answer to the fear that delaying graduation could mean never returning. ## Education, Economics, and Cultural Identity - Students were weighing the practical consequences of enrolling, taking time off, or graduating during an unstable economy. - Key questions included: - How employers would interpret a gap year - What a degree is worth under these circumstances - How losing access to a campus community would affect students - Whether delaying school would create financial advantages - Africa also considers whether these calculations differ for her as a woman of color, particularly in an industry shaped by unequal access and representation. ## Silicon Valley’s Dropout Mythology - Technology culture often celebrates the highly privileged, frequently male, elite-university dropout who becomes a successful founder. - Africa has rarely seen herself represented in that narrative. - Her startup internship gives her hope that the industry may be opening to broader kinds of talent and that meaningful opportunities can exist without a completed degree. - At the same time, she questions whether apparent meritocracy is truly based only on ability, since representation, privilege, and access strongly influence who receives opportunities. Ultimately, Africa presents the gap-year decision as more than an academic or financial calculation. It is also a question of identity, family history, opportunity, and whether traditional educational paths remain the best route during a period of extraordinary disruption.

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

How work is changing at Figma | Figma Blog

Figma decided to move from a mostly in-person workplace to a hybrid model offering both office-based and remote work. The decision was driven by COVID-19, changing employee needs, and the recognition that both flexibility and in-person connection matter. Rather than wait for other companies, Figma used employee survey data and conversations with hybrid organizations to shape its policy. ## Making a Decision During Uncertainty - Figma separated its long-term workplace strategy from the immediate question of reopening offices. - Leadership chose to make a decision quickly because uncertainty was increasing employee anxiety. - Company values, especially “Be Bold,” encouraged Figma to act rather than wait for other companies to set a precedent. - The team created a custom workforce-planning survey after finding that existing templates did not fit its needs. - The survey combined quantitative questions with personal stories about: - Commutes - Productivity during COVID-19 - Remote-work preferences - Desired work schedules and locations ## What Employees Wanted - More than 90% of employees completed the survey within one week. - Employees had highly varied opinions about what “flexibility” meant, particularly regarding which days should be available for working from home. - Nearly half of San Francisco-based employees would consider moving to another nearby city if they could work from home several days per week. - Almost two-thirds would consider moving to a non-hub location by the end of 2022 if all roles could be remote. - Common motivations included: - Lower cost of living - Home ownership - Being closer to family - Employees also expressed strong affection for the office and the connection and serendipitous interactions it enabled. - Although employees generally considered themselves productive, many felt they were not building relationships outside their immediate teams and were missing opportunities to meet new hires. ## Lessons from Other Hybrid Companies Figma spoke with organizations already operating with hybrid models and identified several challenges: - Employees need a predictable understanding of where colleagues can be found. - Completely flexible office attendance can produce a largely empty “ghost town” office. - Shared office days are important for preserving connection and serendipitous collaboration. - Hybrid work is difficult, particularly when ensuring remote employees are included equally. ## Figma’s Hybrid Policy - Employees must choose whether they are associated with a physical hub or work as remote employees. - The San Francisco hub would use a flexible model requiring employees to come into the office on at least two specific days each week. - Those office days would be shared across the hub to ensure people were present at the same time. Figma’s approach emphasizes making a clear, employee-informed decision while preserving both remote flexibility and the social benefits of office work.

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

Explore the Figma Community | Figma Blog

The Figma Community is rolling out to all users as a public library of files that can be searched, inspected, duplicated, liked, and remixed. The post highlights how designers and organizations are using the platform to share design systems, illustrations, workflows, and creative experiments. Figma presents the launch as an early foundation for a broader community built around generosity, collaboration, and reusable resources. ## A New Space for Shared Design Resources - The Community gives users access to thousands of published Figma files, including: - Design systems - Icon packs - Wireframes - Illustrations - Prototypes and games - Users can browse by tags, search files, claim profile handles, follow creators, like files, and duplicate resources. - Publishing initially remains limited to beta participants while Figma continues refining the product. - Contributors include organizations such as Microsoft, Google, and Mixpanel, as well as independent designers and illustrators. ## Material Design Baseline Kit - Jessie Z of Google’s Material Design team created a downloadable foundation for people building their own design systems. - The kit has two parts: - **Material Theme:** Lets users customize typography and color palettes while seeing the effects on components, states, and layouts. - **Sticker sheet:** Provides a more traditional collection of reusable components. - The resource is intended both as a practical starting point and as a way to learn Material Design guidelines and develop a product’s visual identity. ## Open Figures Illustration Library - Illustrator Bonnie Kate Wolf created Open Figures as a flexible library of reusable illustrations for Blush. - Unlike her previous work within company-specific guidelines, the project allowed her to develop an independent visual style. - The illustrations can support product storytelling, presentations, or personal creative projects. - Building the library also exposed accessibility considerations: interchangeable clothing and character parts had to work for users, including wheelchair users. ## Spotify Ways of Working - Barton Smith, Cliona O’Sullivan, and Spotify’s Figma working group published their approach to organizing and collaborating in Figma. - They shared the file because many companies lack a standard model for structuring Figma workspaces. - The resource offers the community a view into Spotify’s internal practices. - Spotify planned to keep revising the system as the team learned what worked and what needed improvement. Figma’s recommendation is to explore the Community, follow useful creators, and reuse or adapt the resources that fit your work. The launch emphasizes that its value will grow as more people publish practical tools, creative work, and proven ways of working.

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

Inside Figma: reflections on a remote internship | Figma Blog

Jenning Chen reflects on her remote internship at Figma and the process of taking improvements to the style picker from concept to launch. Despite concerns about isolation and communication, Figma’s intentional remote culture helped her build relationships, learn the product, and receive support. Her project added search, a color-style list view, and visible text-style metrics while giving her experience across Figma’s technology stack. ## A Warm Welcome - Slack messages, virtual coffee chats, and a collaborative welcome card helped Chen feel connected from the start. - Although the internship was fully remote, Figma maintained the open and welcoming culture that had first attracted her years earlier. ## Building Relationships Remotely - Chen initially worried that remote work would make it harder to form relationships or ask for help. - Company-wide events created regular opportunities to meet colleagues: - Show-and-tell meetings for sharing work and learnings - Thursday tech talks about coworkers’ interests and projects - One-on-ones about Figma’s product and growth - Virtual cooking classes, escape rooms, and scavenger hunts - These activities helped replace informal office interactions and encouraged connections beyond her immediate team. ## Developing Product Fluency - Before beginning her project, Chen needed to understand Figma’s features and design terminology. - She relied on her mentor, teammates, and Slack channels for answers. - Colleagues were willing to schedule calls and work through obstacles with her, making remote collaboration more effective than she expected. ## Improving the Style Picker - The style picker lets users browse and apply paint, text, effect, and layout-grid styles. - As users accumulated more styles, the original grid-based interface became difficult to navigate: - Important style information was obscured. - Users had to scroll through long lists. - Finding a specific style was inefficient. - Working with product designer Shana Hu, Chen implemented: - **Search:** Lets users find styles with a few keystrokes. - **Color styles list view:** Displays style names clearly beside thumbnails. - **Text style metrics:** Shows font size and line height directly in the picker. ## Technical and Launch Challenges - The project exposed Chen to multiple parts of Figma’s stack: - TypeScript and C++ in the editor - Ruby in the backend - She presented the work at an internal show-and-tell and received supportive feedback from coworkers. - Launch preparation required migrating millions of existing text styles to add font-size and line-height metadata. - The migration took an entire day, alongside the work of incorporating critique feedback and fixing last-minute bugs. The internship demonstrated that a thoughtfully structured remote environment can support mentorship, relationship-building, and meaningful ownership. Chen’s experience also shows how an intern can contribute to a high-impact product feature while gaining broad technical and product knowledge.

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

Announcing Config Europe: a call for speakers | Figma Blog

Figma announced Config Europe, a free virtual conference taking place on September 17, 2020. After its San Francisco event showed both the value of community connection and the limitations of an in-person format, Figma chose an online conference to make participation more accessible. The company invited community members—especially first-time speakers—to submit talks, panels, lightning rounds, and workshops. ## From In-Person Conference to Virtual Event - Figma’s first Config conference brought together 1,200 attendees in San Francisco, with additional viewers online. - Sessions covered topics including design systems and open source’s influence on urban planning and infrastructure. - Plans to take Config to cities worldwide were paused as the global situation changed. - Figma ultimately decided that a virtual format could still fulfill Config’s mission of amplifying community voices and enabling people to learn and share. ## Call for Speakers - Speakers could submit proposals by **July 31, 2020**. - First-time speakers were explicitly welcomed and encouraged. - Accepted speakers would receive: - IT support and equipment - Help from product specialists and editors - Opportunities to develop talks, panels, lightning rounds, or workshops - Proposals not selected for Config Europe might be considered for other Figma opportunities, such as livestreams or blog posts. ## Conference Content Tracks The agenda was organized around four main themes: - **Building and maintaining design systems** - Starting and scaling systems - Creating components and style guides - Getting teams to adopt shared systems - **Figma deep-dives** - Improving workflows with plugins, Auto Layout, components, and other features - **Process, culture, and team-building** - Recruiting, hiring, team culture, and remote-work practices - **Opening up design** - Making design more inclusive, accessible, and participatory for non-designers ## Attending Config Europe - The event was free and open to anyone, anywhere. - Figma planned to publish the agenda and open registration on **August 20, 2020**. - Prospective attendees could sign up to receive updates when registration became available. Figma’s recommendation was to submit ideas through the Config Europe speaker portal or register for event updates. The announcement emphasized that the virtual conference was intended to preserve the collaborative spirit of Config while making it accessible to a broader global community.

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

Behind the feature: shedding light on shadow spread | Figma Blog

Figma’s shadow spread feature appeared simple but required solving difficult geometry and rendering problems. Shadow spread must expand or contract a shape uniformly in every direction, which cannot be achieved reliably by merely scaling complex geometry. The feature ultimately illustrates how seemingly small product requests demand careful algorithmic and product tradeoffs. ## What Shadow Spread Does - Figma added support for adjusting shadow spread on: - Rectangles - Ellipses - Frame backgrounds - Component backgrounds - The feature mirrors CSS `box-shadow` behavior. - Users had requested the capability for more than two years. ## Why Shadow Rendering Is Complicated - A standard drop shadow is created by: - Copying an object’s geometry - Filling it with a single color - Applying a blur - Rendering it beneath the original object - Simply scaling the geometry works for basic rectangles but fails for complex shapes. - For shapes with holes, such as the Figma logo, spread must expand or contract every boundary independently rather than scale the entire object. - Correct behavior requires preserving the shape’s internal structure while offsetting its edges uniformly. ## Algorithmic and Rendering Constraints - Several algorithms could produce the desired geometry, but they did not fit cleanly into Figma’s existing rendering architecture. - Using strokes as a shortcut was also unsuitable because: - Stroke handling treats certain vertex angles differently from shadow spread. - The prototype renderer lacked stroke-generation code. - Implementing the feature robustly risked adding complicated geometry logic to two separate rendering codebases. ## Lessons from the Implementation - The project began as a small Maker Week experiment but grew into a weeks-long engineering effort. - The work involved exploring geometry algorithms, studying relevant W3C specifications, and making product-prioritization decisions. - The feature demonstrates that visual effects which appear basic in a user interface can require substantial low-level rendering infrastructure. Figma’s approach was to balance visual correctness, implementation complexity, and compatibility with its existing renderers rather than pursue an idealized solution at any cost.

Read original(opens in new tab)
figma2 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.

Read original(opens in new tab)
figma2 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.

Read original(opens in new tab)
figma2 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.

Read original(opens in new tab)
figma2 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.

Read original(opens in new tab)
figma3 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.

Read original(opens in new tab)
figma2 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.

Read original(opens in new tab)
figma3 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.

Read original(opens in new tab)
figma2 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.

Read original(opens in new tab)
figma2 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.

Read original(opens in new tab)