Figma

532 posts

figmaMar 24, 20212 min readCurated summary

Completing a transit map | Figma Blog

Figma invites the community to help complete a digital transit map of the San Francisco Bay Area created in memory of transit advocate Courtney Garg Brousseau. After Courtney’s death, Figma employees recreated his unfinished project from limited reference images, with his family’s permission. The resulting Figma Community file is intentionally open for others to expand, correct, and remix. ## Courtney’s Transit Map Project - Courtney was a passionate public-transit advocate who was building a Bay Area transit map in Figma. - His design was inspired by iconic New York City subway maps. - After learning of his death, Figma worked with his family to preserve and continue the project. - Because the original Figma file was unavailable, Figma rebuilt the map from a small number of images. ## An Incomplete Community File - Figma published the recreated map as a Figma Community file with Courtney’s family’s permission. - The map still contains missing details because the reconstruction was based on limited source material. - The project reflects Figma Community’s collaborative model: people can share existing work and build upon it. - The map is intended for people interested in public transit, cartography, and design. ## How to Contribute Readers can help by: - Opening the transit map in Figma Community. - Clicking **Duplicate** to copy it into their drafts. - Adding to or refining the map. - Publishing their contribution back to the Figma Community. The article also directs readers to information about Courtney’s life, legacy, and nonprofit work. Ultimately, Figma presents the transit map as a collaborative memorial. Designers and transit enthusiasts are encouraged to complete and improve Courtney’s work while keeping his interest in accessible public transportation alive.

Figma Digital Design Figma Community Transit Mapping+1

figmaMar 17, 20212 min readCurated summary

By the numbers: one year of remote work | Figma Blog

Figma’s shift to remote work prompted an experiment to understand how teams collaborate when offline workflows move online. By introducing a template picker with remote-work-focused files, Figma increased collaboration and helped users discover more features and community resources. The findings suggest that curated templates can make remote collaboration easier and encourage broader cross-functional participation. ## Moving Offline Workflows Online - Figma increasingly used its platform for brainstorming, research, team building, and other activities previously handled in person. - The growth team hypothesized that templates designed for remote work could reduce collaboration challenges and increase activity beyond traditional design work. - Figma built a template picker offering blank presets and curated templates, then tested it with a portion of its existing user base. ## Results of the Template Experiment - Users who received the template picker had a **5% higher collaboration rate**, measured by edits or comments in shared files. - The picker improved feature discovery: - **10% more users** discovered frame presets. - **90% more users** used files from the Figma Community when creating files. - The benefits applied to both designers and cross-functional collaborators. - Popular templates covered design-specific activities, such as remote design sprints, as well as broader uses like whiteboarding and team-building. ## Collaboration Across Teams and Locations - After a year of remote work, Figma observed more collaboration across regions and time zones. - Designers worked more closely with cross-functional colleagues. - Teams began involving collaborators earlier in the design process. - User feedback on social media and requests for additional templates indicated that people valued and actively wanted these resources. Figma’s experience shows that thoughtfully curated templates can turn a collaboration tool into a broader virtual workspace, helping distributed teams work together more effectively.

Figma Remote Collaboration Data Science Figma Community+2

figmaMar 8, 20213 min readCurated summary

Behind the feature: comments, contextually | Figma Blog

Figma’s Community comments feature was designed to turn a mostly one-way publishing platform into a space for direct creator–audience communication. The team combined general feed comments with spatial, in-editor-style comments, while carefully adapting interactions to preserve the file-viewing experience. Technical constraints mattered, but the hardest work involved resolving subtle interaction and edge-case decisions. ## Why Community Comments Were Needed - Community users could browse, duplicate, and install resources, but had no straightforward way to contact creators. - Figma wanted the Community to support deeper engagement through questions, feedback, and discussion. - The feature introduced two comment types: - **General comments**, displayed in a feed beneath the file. - **Contextual comments**, attached to specific locations within the design. ## Adapting the Existing Commenting System - The team initially expected to reuse Figma’s existing in-editor comments with minor changes. - They replaced the previous iframe-based file preview to enable communication of viewport information. - They also had to consider performance when files contained many comments. - The larger challenge was interaction design: - Community files traditionally supported one-way creator-to-audience communication. - Comments created a two-way channel between audiences and creators. - Contextual comments required spatial navigation rather than a simple linear feed. - Users needed to inspect comment locations while still being able to pan across the canvas. - The team aimed to encourage commenting without diminishing the existing view-only experience. ## Exploring the User Experience - Engineering, design, and product worked in a close feedback loop. - Designers used animated prototypes and GIFs rather than only static wireframes because commenting depended heavily on interaction behavior. - Explorations considered: - Sidebar comment feeds. - Different ways to embed comments around the viewer. - Mini-viewers and canvas interactions for locating comments. - Prototypes helped the team evaluate ideas against technical feasibility, UI edge cases, and the launch schedule. ## Launch Priorities and Design Decisions The team prioritized three goals: - Make entering the commenting experience quick and intuitive. - Give contextual comments enough surrounding space to understand their position in the file. - Deliver a technically feasible, appropriately simple solution within the project timeline. As a result, contextual comments were limited to fullscreen view, where users had enough space to understand the design context. Clicking the minimized canvas expanded it into fullscreen mode, while clicking and panning were disabled in the smaller preview to avoid compromising the primary browsing experience. The feature ultimately required more than porting existing code: it demanded a new interaction model for combining comments, spatial context, and file browsing. Figma’s approach shows the importance of iterative cross-functional prototyping when adapting a familiar feature to a fundamentally different product environment.

Figma User Interface Interaction Design Iframe+2

figmaMar 2, 20212 min readCurated summary

Inside Figma: tips from the team that builds Figma | Figma Blog

Figma’s team uses the product for far more than interface design, including brainstorming, branding, team activities, and remote research. The post presents practical methods and templates that make creative collaboration more approachable, regardless of design experience. Its central recommendation is to use Figma as an open, flexible space for exploration rather than focusing immediately on finding the “right” answer. ## Figma for More Than Product Design - Figmates across engineering, product, design, and research shared favorite workflows in a livestream. - Topics included: - Keyboard shortcuts and speed tips - Brainstorming exercises - Templates for different skill levels - Blend modes and easing curves - The team also uses Figma for team-building and remote user research. ## Brainstorming with Mind Maps Brand designer Remilla Ty recommends a “mind map sketchbook” for gathering inspiration and exploring creative directions. - **Prompt:** The project name or a statement describing the work. - **Image:** Visual references and sources of inspiration. - **Keywords:** Words connected to the images and the original prompt. - The framework helps teams identify themes and turn them into creative concepts. - Figma used this approach while developing branding directions for Figma Community. - The goal is open exploration rather than judging ideas as right or wrong. ## Lists and Mood Boards A second brainstorming method combines structured prompts with visual references. - **Prompt:** A literal description of the project. - **Beyond:** A more abstract interpretation of the project. - **Look and feel:** The emotions the finished work should create. - Teams extract recurring themes and keywords from the lists. - They then build mood boards using images and color palettes. - The resulting visual direction can be distilled into a concept statement and eventually a brand identity. - Figma used this process for its remote Maker Week branding. ## Creating a More Comfortable Research Environment Researcher Nannearl Brown describes using Figma to make participant activities feel less intimidating. - The research team prioritizes helping participants feel comfortable sharing information. - Participants may receive Figma trading cards as pre-work. - The cards encourage them to introduce themselves and prepare for the session. - Questions cover both Figma-related topics—such as favorite features and use cases—and personal information. The practical takeaway is to use Figma’s collaborative canvas not only for polished design work, but also for low-pressure ideation, visual thinking, and human-centered research.

Figma User Research Remote Collaboration Brainstorming+2

figmaDec 15, 20202 min readCurated summary

Redesigning Dropbox’s ways of working | Figma Blog

Dropbox’s shift to a virtual-first model required more than moving meetings online; it meant redesigning how teams collaborate and maintain creative energy. Having already adopted Figma, the design team expanded its use from design production to brainstorming, reviews, handoffs, and cross-functional communication. Figma ultimately became a shared visual workspace for teams across Dropbox, helping recreate some of the spontaneity and connection of the physical office. ## The Challenge of Virtual-First Work - Dropbox’s culture and workspaces had been designed around in-person collaboration across twelve global offices. - Design teams relied on physical workshops, post-its, whiteboards, and informal interactions to generate ideas. - Remote work made creative flow and team connection less automatic, requiring more intentional collaboration practices. ## Redesigning Collaboration with Figma - Dropbox’s design organization had migrated from Sketch to Figma in 2018 and already used it for: - Brainstorming - Wireframing - Prototyping - Commenting - During the pandemic, designers increased their reliance on Figma to reduce communication gaps. - Observation mode replaced some in-person design reviews, allowing participants to follow a presenter’s work directly. - Designers shared files for rapid iteration instead of pairing at a desk or brainstorming in a physical room. - Design sprints brought engineers and product managers directly into Figma, making participation easier for non-designers. - Teams also created asynchronous workflows, such as using checkmarks in an icon template to signal that assets were ready for inclusion in the master library. - These file-based processes reduced unnecessary communication and improved the efficiency of recurring library releases. ## Expanding Figma Across Dropbox - The design team became an example of how remote collaboration could work for the broader organization. - Cheechee Lin led workshops teaching cross-functional teams how to navigate Figma and use features such as commenting, exporting, viewing, and following. - More than 200 people from marketing, research, data science, and other teams attended the workshops. - Figma provided a shared visual space that compensated for the lack of physical whiteboards. - Teams beyond design began using Figma for test plans, research presentations, survey data, qualitative insights, and collaborative presentations. Dropbox’s experience suggests that successful virtual-first work depends on deliberately rebuilding collaborative habits, not simply adopting video calls. Making a shared, accessible workspace central to communication can help distributed teams preserve creativity, speed, and cross-functional involvement.

Figma Design Systems Prototyping Remote Collaboration+2

figmaDec 8, 20202 min readCurated summary

Meet us in the browser | Figma Blog

Figma’s five-year journey demonstrates how browser-based software can transform design from a siloed, offline activity into an open, collaborative practice. Although this shift initially threatened designers’ sense of control and identity, the browser’s multiplayer, accessible nature encourages shared ownership and transparency. Field argues that this ethos should extend beyond design to all software and society. ## The Browser as a Radical Bet - Figma launched by betting on the browser rather than traditional desktop software. - The founders were drawn to browser-native values: - Collaboration - Transparency - Accessibility - Figma offered practical benefits such as cross-platform support, multiplayer editing, and a single source of truth for files. ## Why the Change Felt Threatening - Moving design from an offline, single-player experience into a shared browser environment challenged established workflows. - Designers worried that transparency could lead to: - Over-demystification of the creative process - Increased micromanagement - Tighter deadlines - Loss of control over their work - Broader access also raised an identity question: if anyone can design, what does it mean to be a professional designer? ## From “My Ideas” to “Our Ideas” - Collaborative digital spaces encourage teams to treat work as shared rather than individually owned. - This requires trust, transparency, and a willingness to let others modify or remix personal creative work. - Figma’s multiplayer environment makes collaboration part of the process, especially when people might otherwise hide unfinished or blocked work. ## Digital Spaces and Broader Access - The browser represents a larger transition from physical spaces to digital ones, accelerated by COVID-19. - Unlike physical spaces, digital spaces can be open by default and less hierarchical. - Browser-based tools reduce dependence on expensive hardware, specialized software, and restrictive titles or credentials. - Figma aims to make design accessible throughout the entire process, from ideation through production. ## A Broader Software Philosophy - Field sees the browser as more than a productivity improvement; it is a medium for cultural change. - Software makers have a responsibility to make platforms usable by more people, not fewer. - The ideal is to create environments where people can work together, embrace creative messiness, learn from failure, and leave ego aside. The article recommends building software around openness, accessibility, and collaboration. Figma’s experience suggests that browser-native tools can help replace siloed expertise with shared participation.

Figma Collaborative Design Multiplayer Editing Web Browser+1

figmaNov 18, 20202 min readCurated summary

Behind the feature: the making of the new Auto Layout | Figma Blog

Figma’s new Auto Layout evolved from a long-standing idea into a more flexible system for creating responsive designs. The team sought to combine flexbox-inspired power with an approachable interface, defining Auto Layout as “a thoughtful subset of flexbox.” The result was a feature designed to reduce manual resizing while preserving usability for designers who may not know CSS deeply. ## The Need for Automatic Resizing - Before Auto Layout, designers had to manually resize buttons, reposition neighboring elements, and adjust containers whenever content changed. - This repetitive work made responsive design systems difficult to build and maintain. - Figma had considered automatic layout since its early designs, but the concept remained unimplemented until Maker Week in 2018. - During Maker Week, product director Sho reimagined the feature in prototypes, eventually leading to a dedicated team focused on making Auto Layout real. ## Designing a Thoughtful Subset of Flexbox - The team drew inspiration from CSS flexbox because it could help align design workflows with implementation in code. - They intentionally avoided reproducing all of flexbox’s complexity. - Their guiding principle was to create “a thoughtful subset of flexbox” that remained easy to learn and use. - Core capabilities included: - Enabling vertical or horizontal layout on a frame. - Setting spacing between items. - Automatically sizing frames to hug their contents along the main axis. - Allowing fixed or content-based sizing on the counter axis. - Giving individual components independent alignment within their container. ## Prototyping and Team Alignment - The designer, Marcin, built an early prototype entirely in HTML. - The prototype helped the team experience the feature early and resolve interaction details before implementation. - It informed decisions about frame-handle decoration, dragging behavior, and visual outlines. - This shared prototype helped product, design, and engineering align around both the feature’s behavior and its usability. Figma’s approach shows that a successful layout tool does not need to duplicate the full complexity of web technologies. By selecting the most useful flexbox concepts and presenting them through an intuitive editor, Auto Layout made responsive design more practical while keeping the experience accessible.

Figma Design Systems CSS HTML+3

figmaOct 27, 20203 min readCurated summary

Bridging design and code with Variants | Figma Blog

Figma’s Variants feature was created to bring component organization closer to how developers structure reusable code. It combines related component versions into component sets, supports multiple property dimensions, and simplifies switching between variations. The feature’s design was shaped through user research and usability testing, which refined both its interface and its name. ## Bridging Design and Code - Designers need freedom to iterate, while developers prioritize rigor, reuse, and scalability. - Figma identified component management as a major opportunity to connect these workflows. - Existing components were difficult to find, switch between, and organize, especially when systems contained many variations. - Variants was designed to make design-system components resemble their code counterparts more closely. ## Aligning Component Organization with Code - Teams often used forward-slash names such as `default/primary/large/icon` to represent component states and properties. - Variants replaced this workaround with key-value properties, such as: - `state="hover"` - `style="secondary"` - The system supports both simple components and components with multiple dimensions, including state, type, color, and size. - Research showed that design-system managers commonly arranged component variations in grids to compare and maintain them. - Figma therefore allows all variations of a component to be displayed side by side. - Existing component variations can be selected and converted into a component set using “Combine Variants.” ## Refining the Interface Through Usability Testing - Figma built a working prototype and conducted four rounds of usability testing over six weeks. - The initial interface displayed all property values as pills, but users found this confusing because pills typically represent multiple tags or attributes. - Figma changed the interaction to: - Use dropdowns and simple input fields when editing a selected variant. - Retain pills when viewing all properties and values in a component set. - Generic default labels such as “Property 1” and “Property 2” proved clearer than predefined labels like “State” and “Style,” because users understood they should customize them. ## Choosing the Name “Variants” - The feature was initially called “States,” reflecting its early focus on interactive states such as hover, active, and disabled. - User feedback showed that “States” understated the feature’s broader capabilities. - Variants can represent any component property, including type, color, and size—not just interaction states. - Testing confirmed that “Variants” better communicated the feature’s flexibility and scope. Variants, combined with updates to Auto Layout and the Inspect panel, is intended to make design systems easier to organize and easier for developers to interpret. Teams should use component properties and sets to model reusable UI elements in a way that matches both design workflows and code structures.

Figma Design Systems User Experience Auto Layout+2

figmaOct 19, 20202 min readCurated summary

How Kimberly-Clark brings your favorite paper products into your home | Figma Blog

Kimberly-Clark responded to slowing growth, competition, and rising costs by prioritizing its digital presence. By adopting Figma as a collaborative, browser-based design platform, the company replaced fragmented workflows with a shared source of truth and faster stakeholder feedback. This collaboration produced measurable results, including a 71% increase in signups after redesigning a form. ## Digital transformation at global scale - Kimberly-Clark manages more than 400 consumer websites across 175 countries. - Its digital systems support pricing, manufacturing, distribution, merchandising, sales, and operations. - The company needed a more efficient way to create and localize consistent digital experiences for brands such as Kleenex, Scott, and Huggies. ## Problems with the previous design workflow - Designers spent weeks working individually in proprietary Mac applications. - Files had to be uploaded to separate cloud prototyping tools for review. - Stakeholder feedback created repeated edit-and-review cycles. - Developer handoff was difficult when developers did not use Macs. - These delays slowed the launch of new products and digital experiences. ## Figma as a collaborative design platform - Figma consolidated design, prototyping, feedback, and editing in one browser-based tool. - Files were no longer stored locally, and invited stakeholders could view or edit them easily. - Feedback meetings became real-time working sessions rather than discussions held after designs were completed. - Brand, marketing, design, and other teams could participate directly and see changes immediately. - The approach created a shared “single source of truth” and improved alignment. ## Redesigning for measurable user impact - The UX team tracked metrics such as bounce rates, returning visitors, time on site, and signup rates. - One website’s signup form contained 13 fields because marketing wanted extensive information upfront. - The teams collaborated in Figma to reduce the form to five fields. - After launch, signups increased by 71%. - Faster collaboration helped the company resolve design problems quickly and move products to market sooner. ## Next steps - Kimberly-Clark planned a design system connected across Figma, Storybook, and its code repository. - The company viewed its digital transformation as the beginning of a more design-led phase ahead of its 150th anniversary. The case suggests that collaborative design tools are most valuable when paired with user-focused metrics: they can improve internal workflows while directly increasing customer engagement.

Figma Design Systems User Experience Prototyping+3

figmaOct 14, 20202 min readCurated summary

Learning and failing as a team | Figma Blog

Config Europe highlighted how better products emerge from better teamwork. Figma argues that inclusive processes, cross-functional collaboration, and a willingness to fail openly help teams build more human-centered experiences. The success of its Variants feature demonstrates that iterative testing and diverse perspectives can turn early shortcomings into meaningful improvements. ## Learning Through Collaboration - Figma’s virtual Config Europe conference explored both product craft and team culture. - Sessions covered: - Accessibility-first design - Keeping design aligned with code - Technology ethics - Collaboration and shared failure - The central theme was balancing product function with human feeling while working more effectively together. ## Expanding the Team - UX designer Declan Talbert presents design systems as services for entire product teams, not merely pattern libraries for designers. - An inclusive design system can contain: - UI components - Accessibility guidance - Data resources - Project-management tools - Designers, developers, product managers, and other contributors should all be able to participate. - Broader collaboration and diverse skills lead to more human-centered products and services. ## Failing Together on Variants - Product Manager Kelsey Whelan and Product Designer Nikolas Klein describe shared failure as a major factor in the development of Figma’s Variants feature. - Early testing showed that the feature was powerful but difficult to approach, contradicting the team’s initial assumptions. - Usability testing expanded from a planned couple of weeks into four rounds over six weeks. - Figma invited employees from different roles—including design advocates, product educators, and engineering managers—to participate remotely through Zoom. - Participants identified usability problems and bugs, while a dedicated Slack channel helped coordinate fixes. - Repeated testing made the feature more intuitive and reinforced the idea of “failing forward”: using visible mistakes to improve the product and strengthen team culture. Figma’s practical recommendation is to open product development to more people, test ideas early, and treat failure as shared information rather than individual blame.

Figma Design Systems Accessibility Remote Collaboration+3

figmaOct 12, 20203 min readCurated summary

Reflections on Figma’s inaugural Student Fellowship | Figma Blog

Figma’s inaugural Student Fellowship was created in response to the disruption caused by the COVID-19 pandemic and the shift away from campus-based education. Rather than organizing local meetups, Figma worked with students to build accessible resources, communities, and programs for remote learning and collaboration. Over 10 weeks, the fellowship successfully produced classroom tools, student-focused content, and virtual community experiences while establishing a model for future student programs. ## Rethinking the Student Program - Figma originally planned to make on-campus meetups central to its education efforts. - As students faced remote semesters and uncertain campus plans, the team reconsidered how to support them beyond physical classrooms. - Student conversations focused on: - Recreating classroom and campus collaboration online - Supporting extracurricular projects - Helping educators adapt to new teaching environments - Understanding students’ changing needs - The program centered on classroom resources, student stories, the Virtual Campus Slack Community, and hackathons. ## Setting a Broader Vision - The fellowship aimed not only to ship content but also to establish a foundation for future fellowship programs. - Figma considered how the program could complement: - On-campus student ambassadors - The Friends of Figma community - The broader design ecosystem - The group prioritized resources that were both accessible to students and aspirational. - Although fellows worked across separate workstreams, they operated as a cohesive team and intended their work to reach Figma employees and professional designers as well as students. ## Classroom Resources - The fellows created six classroom templates usable both online and in person. - Examples included: - A research-project toolbox - A playground file for learning Figma’s editor - An assignment-creation template - They also curated a broader collection of community resources to help teachers and students learn, create, and use Figma effectively. ## Student Stories and Career Questions - Conversations with students revealed widespread uncertainty about whether to take a gap year. - Figma responded with a “Back To School?” interview series featuring: - Dylan Field - Marc Andreessen - May-Li Khoe - Karlie Kloss - John Maeda - Laura Deming - The interviews explored gap years, education, and alternative paths through higher education. - Fellow Abigail Africa also published guidance on pitching and presenting, emphasizing audience awareness, confidence, and storytelling. ## Virtual Campus and Camp Figma - More than 1,000 students joined Figma’s Virtual Campus Slack Community during the summer. - The community enabled students to connect, teach, learn, and socialize remotely. - Figma also hosted Camp Figma, a two-day virtual make-a-thon involving hundreds of students across dozens of time zones. - Featured winning projects included FigmAdventure and Slice. ## Overall Impact - The fellowship demonstrated that student programming could extend beyond campus events through digital communities and reusable resources. - Its success gave Figma a practical foundation for developing future fellowships and strengthening its broader education initiatives. - The program also showed the value of involving students directly in designing services intended for their own community.

Figma Prototyping Collaborative Design Slack+2

figmaOct 7, 20202 min readCurated summary

Power up your design system with Figma’s agency partners | Figma Blog

Figma announced partnerships with leading digital and design agencies to help organizations build, migrate, and scale design systems. The post argues that effective design systems connect design and code, creating consistency, efficiency, and a shared source of truth. Figma’s agency partners provide both implementation support and strategic guidance for improving collaboration, workflows, and brand expression. ## Why Design Systems Matter - Modern design systems are more than pattern libraries or sticker sheets. - They create a shared language between design and development. - They support creative exploration while adding the structure and rigor needed for implementation. - A well-managed system helps teams work faster, maintain consistency, and establish a single source of truth. - Designing and implementing such a system can be challenging, especially when migrating tools or scaling across teams. ## How Agency Partners Help ### Setting Up a Design System - Agencies can help organizations migrate their existing design-tool stack to Figma. - For existing Figma users, they provide recommendations for organizing systems around specific brand and team needs. - Their support covers architecture, implementation, and initial setup. ### Improving Design and Development Processes - Building a system is only the beginning; teams must also determine how it will be used and maintained. - Partners can define guiding principles, recommend operating processes, and improve collaboration between designers and developers. - Their goal is to reduce inefficiencies caused by gaps between tools, teams, and workflows. ### Defining and Scaling a Brand - Design systems translate a brand into practical design decisions and reusable components. - Agency partners offer strategic brand guidance in addition to technical and process expertise. - This helps organizations maintain a consistent identity as their products, teams, and brands grow. ## Figma’s Agency Partner Network - Figma initially partnered with eight agencies: - BASIC® - frog - HUGE - Idean - One North - R/GA - Instrument - Work & Co - These agencies serve organizations across industries and company sizes. - Examples include BASIC®’s work with brands such as Google, Airbnb, Patagonia, Apple, Beats by Dre, and Herman Miller. - Partner testimonials emphasize faster collaboration, greater transparency, improved organization, and stronger client relationships through Figma. Figma’s recommendation is to use experienced service partners when a team needs help migrating to Figma, structuring or scaling a design system, improving design-to-development workflows, or translating a brand consistently across products.

Figma Design Systems Design Tools Design To Development+1

figmaOct 6, 20202 min readCurated summary

Creating moments of connection | Figma Blog

The Figma post reflects on Config Europe and argues that design’s greatest value lies in creating meaningful human connections. Across organizational change, personal branding, and digital products, the contributors emphasize that successful design combines function with empathy, emotion, and purpose. The central conclusion is to develop technical mastery without losing sight of humanity. ## Designing Beyond a Single Product - Posti Group, Finland’s postal service, used digital transformation to rethink its entire customer journey—not merely build a new app. - The organization established four guiding principles: - **Grow:** Adapt as users’ needs change. - **Delight:** Turn frustrating experiences into positive ones. - **Reduce:** Deliver reliable, efficient services. - **Listen:** Give customers ways to express their needs. - Design became a company-wide framework for defining “what great means.” - Posti’s work recognizes that postal services carry emotional significance, supporting important communications such as love letters, tax documents, and newborns’ social security cards. ## Character Matters as Much as Skill - ConvertKit’s Charli Marie Prangley argues that a designer’s reputation depends on more than technical ability or visual craft. - Personal brand is shaped by character: kindness, creativity, authenticity, and how others experience working with you. - Designers should consider how they want people to describe them and assess whether their public presence reflects their values. - Sharing work and participating in the design community can help build an authentic reputation. - Her advice is to remain genuine because there is an audience that will value an individual perspective. ## Combining Function with Feeling - Halli Thorleifsson of Ueno encourages designers to create work with meaning rather than treating products as “just” websites, apps, or tools. - Design systems and software matter because of the work, relationships, and experiences they enable. - Technology can help people feel connected and that they belong, especially while working remotely. - Config Europe’s virtual format demonstrated this potential by bringing nearly 10,000 participants from more than 150 countries together through talks, chats, networking, and community groups. The practical recommendation is to master your craft while deliberately developing empathy, authenticity, and a sense of purpose. Design is most powerful when it improves both what people can do and how connected they feel.

Figma Design Systems User Experience Remote Collaboration+1

figmaSep 29, 20202 min readCurated summary

Building an open and inclusive design process | Figma Blog

The post argues that inclusive products emerge from inclusive design processes built on trust, empathy, transparency, and collaboration. Teams should look beyond ideal users, involve localization and accessibility perspectives early, and create open working practices—especially in remote environments. These approaches improve both the product and the way teams understand one another. ## Designing for More Than the “Perfect” Use Case - User research should include diverse users, situations, and challenges—not only the primary persona. - Designers are encouraged to experience products “in the field,” such as considering delivery workers dealing with broken elevators or unreliable GPS. - Inclusive thinking can reveal accessibility needs that are: - Permanent, such as visual or motor limitations - Temporary or situational, such as hearing difficulties in crowded spaces or using a phone with a shattered screen - Small improvements to copy, color contrast, font size, and layout are useful, but accessibility requires broader organizational prioritization. - Teams should establish clear ownership for accessibility. - Designing for essential needs often produces features that benefit everyone. ## Making Localization Part of Product Design - Localization involves more than translating text; it requires attention to syntax, cultural nuance, and how designs adapt across languages. - Deliveroo replaced a siloed handoff process with the Phrase Figma plugin, allowing designers and localization teams to review localized prototypes earlier. - Localization experts can identify inaccurate translations or insufficient space before engineers build the final pages. - Seeing the complete user journey gives localization teams more context and improves collaboration. - Localization becomes an integrated part of product development rather than a transactional final step. ## Creating Transparent Team Processes - Remote work increases the need for visibility into teammates’ work, availability, and priorities. - Kate Pincott’s Team Capacity Template helps teams map weekly schedules and identify meeting or workload gaps. - Regular meetings and short stand-ups can replace informal office interactions and maintain personal connection. - Teams should make room for what matters during difficult periods rather than optimizing only for efficiency. - Shared working sessions, such as open Zoom rooms, can recreate some of the spontaneous collaboration of an office. Inclusive design is ultimately a process practice: broaden the perspectives involved, invite feedback early, and make work visible. Teams that build these habits are better equipped to create products that work across users, cultures, and circumstances.

Figma Accessibility Remote Collaboration User Experience Design+2

figmaSep 23, 20202 min readCurated summary

Six integrations to help your product team collaborate in Figma | Figma Blog

Figma argues that its open platform and API help product teams connect design work with the tools used for documentation, development, feedback, and production. The integrations described keep designs current across workflows, reduce handoff friction, and help teams validate ideas with users before investing heavily in implementation. ## Confluence: Keep Documentation and Designs in Sync - Live Figma files and prototypes can be embedded in Confluence pages. - Product specifications and requirements remain connected to the latest designs. - Teams no longer need to manually replace screenshots whenever designs change. - Developers can review current designs directly within the documentation they use as a source of truth. ## GitLab: Connect Designs to Development Tasks - The GitLab plugin lets teams upload Figma designs directly into GitLab issues. - Developers can review designs alongside tasks, issues, and code changes. - Designs can be versioned and discussed in context, improving collaboration during sprints. - The integration reduces the need to move manually between tools. ## Avocode: Simplify Design Handoff - The Avocode plugin syncs finished Figma designs to Avocode projects. - Developers can inspect layers, export assets, and retrieve measurements and color values. - It supports copying code snippets in languages including CSS, CSS-in-JS, and React Native. - Designers can continue exploring in Figma while developers work from a stable, production-ready version. ## Pendo: Gather Feedback from Real Users - Pendo can embed live Figma wireframes and prototypes into targeted areas of a product. - Product teams can expose proposed features to specific user segments before development. - Feedback can be collected through surveys, open-text responses, and scheduled user interviews. - Early testing helps teams identify customer needs and problems before launch. ## Bubble: Turn Designs into Web Apps - Bubble allows teams to import Figma designs into a no-code web app workflow. - Each Figma frame becomes a page in the Bubble application. - Vectors are uploaded as images during the import process. - The integration shortens the path from visual design to implementation without requiring traditional coding. Overall, these integrations extend Figma beyond design by connecting it to documentation, issue tracking, developer handoff, user research, and no-code development. Teams can use them to maintain a shared source of truth and move more efficiently from concept to shipped product.

Figma Gitlab Design Collaboration React Native+3