User Experience

165 posts

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.

User Experience Figma Design Systems Prototyping+3

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.

User Experience Figma Design Systems Remote Collaboration+1

figmaSep 2, 20202 min readCurated summary

Making Design Within Reach for online shoppers | Figma Blog

Design Within Reach (DWR) redesigned its e-commerce site to recreate the personalized showroom experience online, responding to changing consumer expectations and increased online shopping during COVID-19. In partnership with BASIC®, DWR adopted a transparent, collaborative workflow using Figma, conducted extensive customer research, and launched a responsive site with live sales support. The redesign increased sales and established a scalable design system for Herman Miller’s broader family of brands. ## A Transparent Agency Partnership - DWR partnered with BASIC® to combine the agency’s e-commerce expertise with DWR’s internal brand and product knowledge. - Both organizations worked as one co-creative team rather than in separate workstreams. - Shared Figma files allowed designers in different companies and time zones to collaborate in real time. - Continuous access to the latest files eliminated version-control issues and effectively created 14-hour workdays across teams. - Figma prototypes also made it easy for executives and other stakeholders to review progress through shareable links. ## Bringing the Showroom Experience Online - The redesign was informed by 110 hours of customer research and testing with more than 200 participants. - Interactive Figma prototypes enabled rapid usability testing and iteration. - The site launched in July 2020 with responsive layouts and video chat connecting shoppers with sales associates. - Customers using the new live chat features were nine times more likely to complete an online purchase. - DWR saw an immediate increase in purchases after launch instead of the typical temporary decline following a major website release. ## A Scalable Design System - The redesign became the foundation for Herman Miller’s first design system spanning multiple brands. - DWR and BASIC® created a shared set of reusable components and a consistent visual language. - Developers can implement standardized components more quickly. - Content authors can assemble pages by dragging in prebuilt components, updating images, and editing text. - Cloud-based Figma libraries make it easier to share assets and scale the system across internal teams and external partners. DWR’s experience suggests that combining close agency collaboration, user-centered research, real-time design tools, and reusable components can make complex showroom-style retail experiences effective online while preparing a brand for future growth.

User Experience Figma Design Systems Responsive Design+3

figmaAug 26, 20203 min readCurated summary

Inside Figma: enterprise, explained | Figma Blog

Figma’s enterprise product work is not simply about implementing customer requests; it requires designing systems that serve organizations of vastly different sizes and roles. After learning that its original Admin Settings console no longer supported growing customer needs, Figma chose to redesign the experience around key administrative workflows rather than apply incremental UI changes. The project illustrates how customer research, cross-functional collaboration, and scalable foundations shape enterprise product development. ## Reassessing the Admin Experience - Figma Organization grew significantly after launching in early 2019, bringing more designers, developers, and collaborators into company workflows. - As organizations expanded, admins took on broader responsibilities, exposing limitations in the original Admin Settings console. - Feedback from customers, support, sales, and other teams revealed that admins: - Lacked enough information to make effective decisions during true-ups. - Were unaware of relevant features. - Had to export information manually. - Figma concluded that the existing interface constrained the value of individual features and needed a broader product redesign. ## Starting from First Principles - The team aimed to: - Improve member-management workflows. - Make existing functionality easier to discover. - Create a foundation for adding future features. - A cross-functional brainstorm included product, engineering, design, research, data, support, marketing, and sales. - Ideas were organized into “Do now,” “Worth considering,” and “Wild & crazy” categories. - The team synthesized these suggestions with user feedback to establish priorities. - What initially looked like a UI refresh became a full product update because the underlying information architecture prevented admins from making effective decisions. ## Designing for Organizations of All Sizes - Figma supports teams ranging from five people to thousands, unlike enterprise-only products focused on a narrow company profile. - Enterprise tooling must account for different organizational structures: - In small companies, one person may be an admin, design-operations lead, and active designer. - In larger companies, these responsibilities may belong to separate departments. - Different stakeholders need different information: - Budget owners need to understand organization-wide value. - Design-operations teams need appropriate permissions and resource access. - Security teams need confidence that company data is protected. - Individual users need tools that support their daily work. - Admin settings may be invisible or secondary to regular users, but they are central to admins’ daily responsibilities. ## A Scalable Product Foundation - Figma’s approach emphasizes building flexible foundations rather than narrowly targeting current customer requests. - The redesigned admin experience was intended to make future features easier to introduce and existing features more useful. - Effective enterprise development requires understanding not only individual users, but also buyers, stakeholders, organizational roles, and internal dynamics. Figma’s central recommendation is to treat enterprise products as evolving systems, not collections of one-off customer-requested features. Strong user research, broad cross-functional input, and an architecture designed for organizational scale can produce an admin experience that remains useful as customers and their needs grow.

User Experience Figma Product Design Enterprise Software+2

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.

User Experience Figma Design Systems Prototyping+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.

User Experience Figma Design Systems Prototyping+3

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.

User Experience Figma 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.

User Experience Figma Sketch Design Critique+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.

User Experience Figma 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.

User Experience Figma Design Systems Prototyping+2

figmaApr 16, 20202 min readCurated summary

Figma + Lambda School: Where the remote classroom comes together to learn | Figma Blog

Figma’s collaboration features help Lambda School recreate the engagement and hands-on interaction of an in-person design classroom online. Students learn through shared presentations, live design work, peer feedback, and visible iteration rather than passively watching lectures. Because their work remains organized in Figma, the same files also support portfolio creation and continued peer learning. ## Interactive, Collaborative Lessons - Lambda School is a nine-month, live online program offering training in web development, mobile development, data science, and UX design. - Instructors present lessons in Figma during video conferences, allowing students to: - Zoom into designs and examine details. - Scroll through examples independently. - Use visible cursors to follow specific points in a presentation. - Students create and refine designs directly in shared Figma files. - Everyone can observe work in progress, learn from classmates, provide feedback, and remix existing designs. - This mirrors the collaborative workflows students will encounter on professional design teams. ## Real-Time and Asynchronous Feedback - Students and instructors can comment, tap each other for input, and work together in the same file. - Open audio, browser-based editing, and comments let students collaborate without constantly interrupting one another. - Students can work independently while classmates observe, take notes, or leave comments for later review. - When needed, an instructor or peer can join in and directly adjust pixels alongside the student. - Voting tools, such as stars, also encourage students to recognize and respond to one another’s work. ## A Lasting Record for Portfolios - Figma automatically preserves students’ designs, revisions, and project history. - This makes it easier to assemble a professional portfolio without searching through scattered files. - Students can focus more on interviews and career preparation while still presenting their development process. - Classmates’ work remains accessible after lessons, creating an ongoing resource for inspiration and learning. - The approach supports Lambda School’s broader career mission, which includes coaching, mentors, and connections to hiring partners. Figma’s use at Lambda School demonstrates how collaborative design tools can make remote education interactive, social, and career-oriented. Programs teaching practical creative skills can benefit from combining live instruction with shared workspaces that preserve feedback, iteration, and student progress.

User Experience Figma Collaborative Design Web Development+3

figmaJan 29, 20202 min readCurated summary

Test designs early and often with the new Maze integration | Figma Blog

Figma’s new Maze integration lets teams test interactive prototypes with real users before development, making research faster and less expensive than waiting for production A/B tests. By importing a Figma prototype link into Maze, teams can measure usability across individual tasks or complete user flows. The post also recommends practical research habits to ensure tests produce reliable, actionable insights. ## Earlier Testing with Figma and Maze - Maze provides quantitative UX insights from real users, supporting both small-scale interviews and tests involving thousands of participants. - Teams can copy and paste a Figma prototype link into Maze to begin testing during the design phase. - The integration helps product teams identify usability problems before committing to development. - At launch, Maze offered Figma users 30% off paid plans for three months with the code `MAZE_LOVES_FIGMA`. ## Define Measurable Goals - Establish what success means before building the prototype. - Use specific metrics, such as requiring 80% of participants to complete tasks successfully and fewer than 2% to misclick. - Tailor goals to the purpose and scope of each test. ## Pilot the Test First - Run the test internally with teammates, friends, or family before involving real users. - Confirm that tasks are understandable, the prototype works correctly, and the success criteria are meaningful. - A pilot functions like a beta release, revealing problems before testing at scale. ## Include Users and Non-Users - Existing customers can provide informed feedback and may be enthusiastic early adopters. - Target customer segments most likely to use the proposed feature. - Include people unfamiliar with the product to avoid bias and gain fresh perspectives. ## Write Neutral Tasks - Avoid leading instructions such as “click here,” “go to,” or “navigate to.” - Focus tasks on the outcome users should achieve rather than the specific interface steps. - Avoid internal product terminology so the test measures intuitiveness rather than participants’ ability to follow directions. ## Collaborate on Analysis - Reviewing results as a team helps build agreement around findings and next steps. - Maze supports collaboration through instantly generated reports and shareable URLs. - Involving the broader product team can make research insights easier to act on. Teams should use the Figma–Maze workflow to validate designs early, measure outcomes against clear goals, and involve collaborators in interpreting the results.

User Experience Figma Prototyping User Testing+3

figmaDec 15, 20192 min readCurated summary

"The Decade of Design”: How 10 years transformed design’s role in tech | Figma Blog

The 2010s transformed design from a secondary concern into a central function of technology companies. The smartphone, especially the iPhone, made products more complex, generated vast amounts of behavioral data, and raised consumer expectations for polished experiences. As a result, companies began hiring designers at scale and treating design as a driver of product strategy and growth. ## The Mobile Wave ### More Complex Interactions - Smartphones introduced smaller, varied screens and touch-based gestures such as swiping, tapping, and holding. - Users interacted with devices in many contexts—while walking, commuting, or multitasking—forcing teams to design for real-world conditions. - Designers became essential to prioritizing functionality and simplifying complex technical systems. - Mobile effectively made the phone the primary computer people used throughout the day. ### The Rise of Data-Driven Design - Smartphones produced unprecedented volumes of behavioral data. - Product teams began continuously A/B testing interface details, including button colors, wording, and layouts. - These experiments measured outcomes such as sign-ups, purchases, and sharing. - “Growth design” emerged as a distinct discipline, with designers increasingly focused on optimizing user behavior and business metrics. - Smartphone ownership among U.S. adults rose from 35% in 2011 to 81% in 2019. ### Apple Raised the Standard - The iPhone changed expectations for how technology should look and feel, replacing the perception of software as merely functional and bland. - Apple’s design became a benchmark that competitors sought to imitate. - The iPhone’s broader mainstream appeal made high-quality industrial and interface design visible to ordinary consumers, not just creative professionals. - Products such as Tinder adopted mobile-first design conventions influenced by Apple’s operating system. - Even Google reportedly discarded an Android device it had been developing after reassessing its design direction. ## Design’s Expanding Role in Technology - The rapid growth of mobile products exposed the limitations of engineering-only approaches to product development. - Designers were particularly valuable for translating complicated systems into simple, intuitive interactions. - Technology companies that had previously operated with minimal design resources began hiring designers and acquiring design agencies. - Silicon Valley gradually shifted from primarily celebrating engineering expertise to recognizing design as a competitive advantage. The decade’s central lesson is that design became indispensable because technology moved into people’s pockets and daily lives. Companies that want to compete should treat designers as strategic product partners, not merely as people responsible for visual polish.

User Experience A B Testing Mobile Design Ux Ui Design+2

figmaAug 11, 20192 min readCurated summary

How to wireframe | Figma Blog

Wireframes are simple blueprints for websites and digital products that clarify structure, functionality, and user experience before visual details are finalized. Their low-detail nature encourages feedback from designers, developers, stakeholders, and users without distracting them with colors or branding. The article recommends choosing the appropriate fidelity, keeping visuals deliberately simple, and using wireframes to communicate and iterate on ideas. ## What Is a Wireframe? - A wireframe represents the skeletal framework of a digital product, similar to a building blueprint. - It shows the shape, layout, and structure without defining final visual details. - Wireframes should be understandable to the entire team, including designers, developers, stakeholders, and users. - Because they are not treated as final designs, they support usability research, stakeholder feedback, and rapid iteration. - Their simplicity keeps discussions focused on functionality and user experience rather than aesthetics. ## Types of Wireframes ### Low-Fidelity Wireframes - Low-fidelity wireframes use basic layouts and high-level interactions. - They are typically grayscale and represent UI elements with simple shapes, lines, and placeholders. - Pen and paper can be sufficient, though tools such as Figma make sharing and updating designs easier. - They are useful for exploring ideas quickly before investing in detailed design work. ### High-Fidelity Wireframes - High-fidelity wireframes develop the low-fidelity structure with more realistic visual elements. - They may include colors, graphics, branding, typography, textures, shadows, images, and copy. - Designers can move from low-fidelity wireframes directly to prototypes, or treat high-fidelity wireframing as an intermediate step. ## Best Practices for Creating Wireframes - Keep aesthetic elements simple, generally using grayscale rather than full color. - Use no more than two fonts to establish information hierarchy. - Create hierarchy through font size, weight, and styles such as bold or italic. - Represent images with boxes or rectangles, often marked with an X. - Represent video placements with a box and a play-button triangle. - Focus on communicating layout and function instead of producing polished visuals. ## Designing for Different Screens - Wireframes should account for the practical contexts in which a design will be used. - Consider how layouts adapt between desktop and mobile devices. - Plan for both portrait and landscape orientations when relevant. - Different screen sizes and orientations may require separate wireframe versions. ## Practical Recommendation Start with a low-fidelity wireframe to test structure and interactions, gather feedback, and refine the concept. Add visual detail only when the layout and user experience are sufficiently clear.

User Experience Figma Prototyping Responsive Design+2

figmaAug 8, 20192 min readCurated summary

5 utility Figma plugins to speed up your workflow | Figma Blog

Figma highlights five utility plugins designed to eliminate repetitive design tasks and make workflows more efficient. They support responsive frame testing, component duplication, text manipulation, bulk replacement, and selection of similar layers. A keyboard shortcut tip further speeds up plugin access. ## Viewports - Resizes frames to common device dimensions. - Requires constraints to be configured on elements beforehand. - Displays estimated global market share for each device viewport. - Future versions were expected to include desktop sizes. ## Component Cloner - Duplicates master components, selected instances, or both. - Useful for testing variations such as icon colors and building icon sprites. - Removes the manual work of recreating components and their instances. ## Nisa Text Splitter - Converts lines in a text box into separate text objects. - Supports reordering, including alphabetical or reverse order. - Can also merge multiple text boxes into one. ## Find and Replace - Finds and replaces text throughout a Figma document. - Can also search and rename layers by name. - Supports case sensitivity and matching anywhere, at the beginning, at the end, or across the entire string. - Particularly useful for large copy or content revisions. ## Similayer - Selects layers based on chosen matching properties. - Can match attributes such as fill, stroke, border radius, and drop shadow. - Extends Figma’s native “Select all with same…” functionality while reducing repetitive clicks. ## Faster Plugin Access - Press `⌘ + /` on Mac or `Ctrl + /` on Windows to search the menu and launch a plugin by name. - Press `⌘ + ⌥ + P` on Mac or `Ctrl + Alt + P` on Windows to run the previous plugin. These plugins are practical additions for reducing repetitive work in Figma. Designers can adopt them immediately, while developers interested in creating similar tools can consult Figma’s Plugin API documentation.

User Experience Figma Web Development Figma Plugins+1