figmaSep 18, 2025

The Branding for Intercom’s AI Summit Looks Like an Alien Superbloom | Figma Blog (opens in new tab)

Intercom’s 2025 Pioneer AI summit branding uses an “alien superbloom” concept to express how rapidly AI is evolving. Its Creative Studio built a flexible system of surreal flowers, pollen-like particles, motion, and dot-matrix imagery that could work across digital campaigns, the website, event spaces, and merchandise. Figma served as the central workspace for exploration, collaboration, prototyping, feedback, and refinement. ## Building a Broad Creative Direction - Intercom Creative Studio began with expansive mood boards in Figma Design. - Teams combined motion clips, still images, vectors, logos, collages, and written concepts to explore multiple creative territories. - Motion designers, brand designers, and copywriters could experiment together in the same files. - Embedded video helped the team test logo treatments and messaging against motion references early in the process. - The selected direction evolved from the previous year’s “planted seeds” concept into an AI superbloom. ## Developing the Superbloom Visual Language - The central motif became surreal, alien-looking flowers blooming at unusual scales and speeds. - Pollen particles inspired a stippled aesthetic used in the logo, speaker portraits, and static imagery. - The visual system was designed to feel dynamic in motion while remaining restrained enough for print. - Intercom collaborated with Colors and the Kids to explore flower forms, animation styles, pollen density, and movement. - Figma Draw allowed designers to annotate video frames and specify changes to motion and flower shapes without switching applications. ## Presenting and Refining the Brand - Instead of conventional slide decks, the team presented concepts on long, scrollable Figma artboards. - Stakeholders could review work and leave comments directly on each board. - Separate pages organized successive feedback rounds, allowing explorations to develop into polished case studies. - Figma functioned both as a presentation tool and as an organizational system for the distributed 30-person creative team. ## Prototyping the Website - The Pioneer website was designed, prototyped, and quality-assured in Figma. - Designers and developers could review changes in one environment rather than moving between multiple platforms. - Live comments enabled immediate conversations during iteration, replacing slower back-and-forth through tools such as Slack. - The same brand principles could be tested across the web experience alongside event and campaign materials. The project demonstrates how a unified design workspace can help a distributed creative team move from broad visual exploration to a cohesive, motion-ready identity. For complex event branding, combining shared mood boards, in-context feedback, motion prototyping, and website testing can make the process faster and more connected.

web-designfigmaaidesign-systems+3

figmaJul 30, 2025

Figma’s IPO: Design Is Everyone’s Business | Figma Blog (opens in new tab)

Figma’s IPO marks a new phase for the company, but not a change in its founding mission: narrowing the gap between imagination and reality. CEO Dylan Field argues that AI will make design more accessible and important, while emphasizing that Figma will prioritize decades-long growth over short-term efficiency or share-price performance. He sees Figma as a collaborative platform where more people can shape products and ideas. ## Figma’s IPO and Long-Term Mission - Figma went public to improve corporate governance, increase brand awareness, provide liquidity, strengthen its acquisition currency, and access capital markets. - Field especially values public ownership because it allows the broader Figma community to share in the company’s success. - He cautions investors that public-market performance is unpredictable and does not promise share-price growth. - Figma will prioritize supporting designers’ evolving needs and pursuing long-term growth over maximizing quarterly efficiency. - The company expects to take significant risks, including large platform investments and mergers and acquisitions. ## AI as a Strategic Investment - Figma is investing heavily in AI and plans to increase that investment further. - This spending may reduce efficiency for several years, but Field considers AI central to the future of design workflows. - Existing capabilities, including Figma Make and other AI features, are presented as only the beginning. - AI could help designers work more effectively and bring more people into the design process. ## Design as a Competitive Advantage - Creating a minimum viable product is easier than ever, making design, craft, and distinctive perspective more important differentiators. - Design is no longer an afterthought focused only on form and function; it can determine whether a product succeeds or fails. - As design becomes more central, companies will involve more types of contributors and encourage greater experimentation and creativity. - Figma must balance accessibility with professional power while supporting collaboration and decision-making across large organizations. ## The Evolution of AI Interfaces - Field compares current AI interfaces, which rely heavily on prompts, to the MS-DOS era of computing. - He expects new, domain-specific design patterns to make AI capabilities easier and more intuitive to use. - Just as graphical user interfaces expanded access to computers, well-designed AI interfaces could make advanced capabilities available to everyday users. ## Figma’s Role in the Future - Field describes Figma as a “peaceful garden” where individuals and teams can develop ideas together. - He believes tools alone do not change the world; people use them to create meaningful change. - Figma’s long-term ambition is to help more people participate in design and turn ideas into reality. Figma’s direction is therefore one of patient, ambitious investment: accept near-term inefficiency, expand access to design, and build AI-powered tools for a much broader creative community.

web-designfigmaaigen-ai+2

figmaJan 8, 2025

Making Space for a Handmade Web | Figma Blog (opens in new tab)

The web’s early personal, expressive character has been diminished by commercialization, platform standardization, and pressure to optimize for broad audiences. Chia Amisola argues that a “handmade web” still exists in pockets such as Neocities and internet-art communities, and that anyone can support it by making a website without forcing it to serve a conventional purpose. Websites can instead be temporary, obscure, playful, poetic, or collectively imagined spaces. ## From Personal Webpages to Standardized Platforms - In the 1990s, services such as GeoCities gave people small parcels of digital space to build personal webpages. - GeoCities hosted as many as 38 million pages, organized into themed “neighborhoods” and shaped by amateur creativity. - Although the web now contains more sites than ever, efficiency, commercialization, and social media have reduced its visual and expressive variety. - Many people retreat into the internet’s “dark forest,” limiting public self-expression because of judgment, surveillance, or pressure to conform. ## The Handmade Web Still Exists - Neocities continues GeoCities’ legacy by offering free hosting and has grown to nearly one million sites. - Organizations including Rhizome, the Center for Net Art, and the School for Poetic Computation support internet art through exhibitions and workshops. - Decentralized-web initiatives supported by groups such as the Internet Archive promote an internet shaped and owned by its users rather than concentrated platforms. ## Websites as Living, Personal Spaces - Making a website is presented as the most direct way to participate in the handmade web. - A website does not need to be a resume, portfolio, blog, homepage, or comprehensive representation of its creator. - It can be treated as a changing environment that grows over time, rather than a fixed destination. - Personal sites can be short-lived or maintained for decades, focused on one subject or combining many interests, and addressed to a broad community or a single person. ## Websites with Time Limits - Websites can deliberately operate only at particular times or for limited durations. - B&H’s website reflects the closing schedule of its physical stores during religious observances. - “Cloudwatching” and “Stargazing” are accessible only during the day and night, respectively. - Temporary projects such as Internet Stoop and Reddit’s The Button demonstrate how expiration and scarcity can create meaningful online experiences. - Digital spaces are inherently impermanent because domains expire and sites require ongoing maintenance. ## Websites That Resist Discovery - A site can be rewarding precisely because it is difficult to find. - Cassie McQuater’s *Black Room* uses an intentionally illegible URL, while *Default Filename TV* collects videos that retain their original camera-generated filenames. - Obscurity offers an alternative to search-engine optimization, algorithmic distribution, and polished branding. - These sites encourage “surfing” through links and rewarding accidental discovery. ## Websites Without Clear Ownership - Websites can outlive or separate themselves from their original creators, much like abandonware. - Anonymous or ownerless sites can function as fictional tools, alternate realities, or spaces where visitors construct their own meanings. - JODI’s long-running site presents a maze of ASCII landscapes, while the collectively authored SCP Foundation uses a fictional wiki to build a shared mythology. The practical recommendation is simple: make a website without requiring it to be useful, polished, permanent, or widely understood. Its value may lie in being personal, strange, temporary, and shaped by the people who encounter it.

web-designhtmldigital-arthandmade-web+2

figmaNov 12, 2024

Updating Our Web System For A New Era | Figma Blog (opens in new tab)

Figma refreshed its web design system to support the company’s evolution from a single design tool into a broader platform for product teams. The previous system had accumulated overly similar components, inflexible colors, and typography that no longer suited its content. By auditing real-world usage and simplifying its component library, Figma created a more focused, flexible foundation aligned with its new brand. ## Why the Web System Needed to Change - Figma’s 2020 website was designed primarily to introduce a new design tool. - By 2024, Figma had expanded into a platform serving many kinds of product teams. - The existing system had begun to create friction: - Many components differed only slightly, making selection difficult. - The color system could not accommodate the evolving brand palette. - Typography was not flexible enough for the range of content Figma now produced. - The brand refresh—including Figma Sans, a new color palette, and a revised illustration style—created an opportunity to update the website system as well. ## Auditing and Simplifying Components - The Web Experience team created a script to measure: - Which components were being used - How frequently they appeared - Which pages used them - The audit exposed unnecessary complexity and opportunities to consolidate similar options. - The “Flex” component had grown to 48 variants over time. - After reviewing actual usage, Figma reduced it to 24 variants while preserving its essential functionality. - The team removed centered text as an option and established left alignment as the default across the web system. - The resulting property panel was more focused, easier to navigate, and better aligned with the refreshed visual language. ## Building a More Flexible System - Simplifying the library gave designers and content builders a smaller set of stronger, more purposeful choices. - Figma created templates for common page layouts. - New “building block” components can be combined in different ways to produce on-brand pages. - The system’s atomic elements include inputs, primitives, icons, and navigation components. Figma’s approach demonstrates the value of auditing how a design system is actually used before expanding it further. Removing redundant variants, establishing consistent defaults, and providing reusable templates can make a system easier to use while keeping it flexible enough for future growth.

web-designfigmadesign-systemstypography+1

figmaOct 4, 2023

Dan Mall’s 10 Principles for a Worthy Design Career | Figma Blog (opens in new tab)

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

web-designfigmadesign-systemsux-design+2

figmaMay 26, 2022

Full-scale expression with Grilli Type | Figma Blog (opens in new tab)

Variable fonts let designers adjust weight, optical size, slant, and other typographic properties from a single file, making type more adaptable across screens and contexts. Thierry Blancpain of Grilli Type argues that they improve efficiency, designer–developer collaboration, accessibility, and expressive web design. Their adoption in tools such as Figma helps turn precise typographic intentions into practical code. ## Scaling Typography Across Contexts - Fonts can become less readable when scaled from mobile or business-card sizes to desktop or billboard sizes. - Designers often need careful kerning and tracking adjustments to preserve legibility and visual balance. - Supporting multiple weights and styles traditionally requires separate font files, increasing assets, code complexity, download size, and opportunities for error. ## The Efficiency of Variable Fonts - A variable font contains an entire type family in one file. - Designers can adjust several axes—such as weight, optical size, and slant—rather than selecting from fixed styles. - Variable fonts are increasingly a standard format, so support across tools is important for avoiding workarounds and inconsistent workflows. - Figma’s support allows designers to use the same capabilities during design that developers can later implement in code. ## Improving Designer–Developer Collaboration - Developers benefit from managing one font file instead of many individual assets. - A single file simplifies updates, keeps code cleaner, and reduces implementation friction. - Designers gain finer control over typography, including custom weights and optical sizing. - Blancpain notes that variable fonts are especially valuable when designers and developers work in separate roles, since the format creates a shared, more transferable design language. ## More Expressive and Dynamic Web Design - Variable fonts support animated and interactive typography, such as changing from regular to bold on hover. - Grilli Type’s GT Maru Mega demonstrates how expressive type can remain usable at small sizes through variable adjustments. - Blancpain expects the web to become increasingly dynamic, with motion and responsive typography replacing purely static experiences. - Typography can communicate mood and interaction—not merely deliver information. Variable fonts are recommended as both a practical production format and a creative medium. Their combination of smaller asset overhead, precise control, and animation potential makes them useful for modern responsive interfaces and richer web experiences.

web-designfigmaaccessibilityux+3

figmaMar 8, 2022

Our response to Ukraine | Figma Blog (opens in new tab)

Figma condemned Russia’s invasion of Ukraine as an attack on democratic values central to its mission. The company is supporting affected communities through employee donation matching and continued access to paid features for Ukrainian customers needing assistance. It is also complying with U.S. and EU sanctions and has halted new sales efforts in Russia. ## Support for Ukraine and Ukrainian Customers - Figma employees are donating to organizations aiding Ukrainian refugees and providing humanitarian relief. - The company is matching those employee contributions through its donation-matching program. - Ukrainian customers who request help will retain access to Figma’s paid features in the coming months. ## Actions Regarding Russia - Figma is fully complying with applicable U.S. and EU sanctions against Russia. - It has stopped pursuing new sales in the Russian market. Figma’s response combines humanitarian support for Ukraine with sanctions compliance and a suspension of new Russian business, while expressing solidarity with its Ukrainian community.

web-designfigmacollaborative-designdesign-tools

figmaMay 26, 2021

Q&A with Dantley Davis | Figma Blog (opens in new tab)

Dantley Davis’s Config 2021 Q&A presents design as intentional problem-solving shaped by curiosity, collaboration, and diverse perspectives. He emphasizes using adversity and data to create meaningful impact, while staying humble and avoiding ego-driven design culture. His answers also highlight the importance of cross-disciplinary knowledge, personal creativity, and building inclusive teams. ## Design Philosophy and Creative Practice - Davis describes his creative process as “intentional.” - The best design solves an unrecognized problem so effectively that people cannot imagine life without it. - He defines design as problem-solving through form and function. - His greatest design fear is producing work that receives no reaction. - He dislikes designing primarily for oneself. - He values data as an underused tool for informing design decisions. - His favorite UI font is Montserrat; he prefers Akzidenz-Grotesk for type, hex colors, and specifically `#000000`. ## Collaboration and Team Culture - Good teammates are curious and ego-free. - Teams feel cohesive when members: - Seek feedback because they trust one another. - Inspire each other through their work and perspectives. - Set aside personal ego. - Davis considers building the most diverse team in tech his greatest career accomplishment. - He views mentorship as an important part of his role in the Design Twitter community. ## Leadership and Professional Growth - Davis is skeptical of the emphasis placed on being a “thought leader.” - He encourages young designers to study business, engineering, and finance to become more well-rounded thinkers. - He admires Issa Rae for combining writing, producing, and acting while remaining authentic to her story. - He credits personal time and side projects with helping him do his best creative work. - He regrets that one shipped product remained available too long after it stopped meaningfully benefiting users. ## Design Inspirations and Future Ambitions - Davis would like to design a car interface and would love to shape Porsche’s entire ecosystem, from driving to its app. - He admires designer Clement Mok and would invite him to critique his team’s work. - He praises Roblox for enabling children to play, socialize, and build rather than merely consume content. - He enjoyed Afrotech’s virtual conference, especially its combination of online access and a feeling of presence. - His favorite Figma feature is Observation Mode. Ultimately, Davis advocates for intentional, user-centered design supported by data, interdisciplinary learning, honest feedback, and inclusive collaboration.

web-designfigmadesign-systemsuser-interface-design+2

figmaMay 5, 2021

Q&A with Robyn Kanner | Figma Blog (opens in new tab)

Robyn Kanner’s Config 2021 interview presents design as an active, collaborative practice rather than a fixed professional identity. Alongside her work as Creative Director for the Biden-Harris campaign, her answers emphasize persistence, teamwork, cultural awareness, and making things without being constrained by titles or tools. Her central advice is to stay present, keep creating, and define success through meaningful impact. ## Designing the Biden-Harris Campaign - Kanner led the Biden-Harris design team during the 2020 U.S. presidential election. - The team created a wide range of campaign materials, from JoeBiden.com to the campaign plane, working together in one Figma file. - She identifies helping elect Joe Biden as the greatest accomplishment of her career. - Her Config 2021 keynote provides a deeper account of the campaign and its creative process. ## A Relentless and Unrestricted Creative Practice - Kanner describes her creative process as “relentless.” - She does her best work early in the morning and late at night. - She rejects the idea of perfect design, saying there is “nothing perfect.” - Her advice to young designers is not to limit themselves to a job title—or even think of themselves primarily as designers—but simply to make things and let the rest develop naturally. - Her definition of design is immediate and action-oriented: “‘NOW.’” ## Collaboration and Team Culture - Good collaborators create space for the people around them. - Teams become genuine teams by “going through shit together.” - Kanner’s answers suggest that shared pressure, trust, and mutual support matter more than formal processes. - When asked whom she would want in a design critique, she chooses Michael Jordan, reflecting an interest in high-performance perspectives beyond design. ## Influences, Tastes, and Perspective - Her favorite UI typefaces are Decimal and Mercury, and she values type, color, and multiple color systems equally. - She admires her parents for shaping who she is. - She considers sociology underrated and code overrated within the design world. - Outside design, she highlights Jeff Buckley, BROCKHAMPTON’s “BUZZCUT,” and the video game Madden as sources of enjoyment and decompression. - She dismisses comparisons with other designers, emphasizing that everyone has their own path. ## Tools, Constraints, and Figma - Kanner dislikes being limited by tools, particularly Safari’s handling of animations. - She praises Figma as having “revolutionized creating.” - Her favorite Figma feature is Shift+H, though she jokingly says she likes all of them. - Her ambition to “put gradients on Mars” captures her playful, expansive approach to design. The interview ultimately recommends a broad and practical view of creativity: make meaningful work, support the people around you, resist restrictive labels, and focus on the present rather than chasing perfection or comparison.

web-designfigmaui-designdesign-collaboration+4

figmaOct 19, 2020

How Kimberly-Clark brings your favorite paper products into your home | Figma Blog (opens in new tab)

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.

web-designfigmadesign-systemsprototyping+3

figmaSep 6, 2020

Figma’s new EMEA HQ | Figma Blog (opens in new tab)

Figma announced a new London office serving as its EMEA headquarters, part of its broader hybrid-work strategy. The hub is intended to improve support for users through better time-zone coverage, stronger local partnerships, and access to diverse talent. Although the office’s in-person opening was delayed by COVID-19, Figma planned to continue building regional connections remotely. ## A Regional Hub for a Global User Base - Figma’s hybrid model combines remote work with centralized hubs. - London was selected as the EMEA headquarters to bring the company closer to users across Europe, the Middle East, and Africa. - An office represents more than physical workspace: it provides shared time zones, local market knowledge, and stronger relationships with regional design communities. - In 2020, 81% of Figma’s weekly active users lived outside the United States. ## Expanding Support Across EMEA - Figma recognized that its existing US-centered time-zone coverage was insufficient for international users. - The company established a product-specialist team in Amsterdam in early 2019. - Figma had engaged with communities and customers in cities including London, Paris, Helsinki, Kyiv, Moscow, Jakarta, and Singapore. - The London team had grown to 14 remotely working employees and supported customers such as Deliveroo, Zalando, Spotify, and Booking.com. ## Opening During the Pandemic - Figma postponed the in-person opening until it was safe for employees to return to offices. - The company emphasized that regional expansion could continue even without immediate physical gatherings. - Figma introduced Config Europe, its first virtual user conference, as a way for users and employees to share knowledge and maintain community connections. Figma’s London hub reflects a strategy of combining remote flexibility with regional offices that improve customer support, hiring, and community engagement. The company’s experience also demonstrates that international presence can be developed virtually while in-person work remains limited.

web-designfigmacollaborationdesign-tools+2

figmaApr 29, 2020

Figma’s Series D round | Figma Blog (opens in new tab)

Figma announced a $50 million Series D funding round on April 30, 2020, led by Peter Levine and Marc Andreessen of Andreessen Horowitz. The company planned to use the funding to strengthen its collaborative design and prototyping platform while expanding into broader visual communication and creativity tools. The announcement also highlighted Figma’s growing relevance as remote work accelerated during the COVID-19 pandemic. ## Funding and Investors - The Series D round raised **$50 million**. - It was led by **Peter Levine and Marc Andreessen at a16z**. - Existing investors—including **Index, Greylock, KPCB, Sequoia, and Founders Fund**—also participated. - New participants included **Henry Ellenbogen of Durable Capital** and several angel investors. ## Expanding Uses for Figma - Figma reported increased engagement as work and home life became more digitally connected. - Customers were using the platform beyond interface design for: - Visual whiteboarding - Diagramming - Slide creation - Virtual design sprints - City-building projects - Minecraft skin creation - These examples supported Figma’s broader vision of making design accessible to everyone, including non-designers. ## Planned Use of the Capital - Figma intended to invest further in its core design and prototyping platform. - Priorities included making the product more: - Powerful - Reliable - Collaborative - The company also planned to explore dedicated products for new visual communication and creativity use cases. - Figma viewed the shift toward remote collaboration as an opportunity to accelerate this work. ## Hiring and Company Mission - Figma continued hiring to support its expansion. - Its long-term mission remained making design accessible to a wider audience through web-based collaborative tools. Figma’s Series D funding was positioned as both an investment in its core collaborative design product and a step toward becoming a broader platform for visual communication.

web-designfigmaprototypingcollaborative-design+2

figmaJul 23, 2019

Behind the Plugins: Tiffany Chen, UX Designer @ Microsoft | Figma Blog (opens in new tab)

Tiffany Chen, a Microsoft UX designer, is developing an accessibility-focused Figma plugin that automates the manual work of annotating designs for accessibility. She sees plugins as a way to fill gaps in design tools, make inclusive design more accessible, and encourage people from diverse backgrounds to enter the design field. Her broader work combines technical feasibility with creative experimentation. ## Accessibility-Focused Plugin - Chen’s plugin is an “accessibility-focused order annotator.” - It automates much of the manual process involved in creating accessibility annotations for designs. - The plugin was planned for release to the Figma community on August 1, 2019. ## Why Chen Builds for Figma - Figma’s plugin system and APIs are easy to use, allowing her to focus on creating rather than debugging setup issues. - Plugins let designers build missing features themselves instead of waiting for design-tool companies to add them. - She describes the Figma community as supportive and enjoyable. ## Expanding Access to Design - Chen wants to help people begin nontraditional design careers, including those from psychology, anthropology, international relations, and computer science. - She believes diverse professional backgrounds bring valuable perspectives and knowledge to design. - Her computer science background influences her designs by balancing technical feasibility with novelty. - She views accessible, powerful tools such as Figma as a way to lower barriers to becoming a designer. ## Combining Technical and Creative Work - Chen’s proudest project began by asking people unusual questions, such as what lies they were told as children. - She transformed their responses into illustrated stories for an art-directed website. - Layering and parallax effects helped her combine storytelling, visual design, and technology. ## Designing with Broader Impact in Mind - Chen admires the principles of B Corporations, which require companies to consider effects on workers, customers, suppliers, and the environment. - She believes the design industry needs both greater awareness of inclusive product experiences and more accessible paths into the profession. Chen’s work demonstrates how plugins can support accessibility while also empowering designers to customize their tools. Her recommendation in practice is clear: use approachable, flexible design technology to make inclusive design easier and broaden participation in the field.

web-designfigmaux-designaccessibility+3

figmaApr 24, 2019

Getting to the bottom of line height in Figma | Figma Blog (opens in new tab)

Figma explains why it is changing text layout so that extra line height is distributed above and below letters and measured more modernly. The decision grew out of a historical review of typography, from metal type to digital fonts, where old physical constraints and platform inconsistencies shaped today’s behavior. The update is optional, and existing files remain unchanged unless users choose to update them. ## Figma’s New Approach - Figma will distribute extra line height above and below text rather than handling it through older conventions. - Line height will be measured in a more modern way. - The change is optional: - Existing files will not change automatically. - Users can update older text at their own pace. - Figma developed the approach through research and testing because its users employ text in many different contexts. ## The Early Centuries of Typesetting - Metal type separated typography into two roles: - Type designers created letterforms. - Typesetters arranged physical blocks into readable pages. - Font size referred to the height of the metal block, not necessarily the visible letters. - Two fonts with the same nominal size could have different letter heights and baseline positions. - Typesetters could place lines directly together, a practice called setting type solid. - To improve readability, they inserted thin strips of lead between lines. - This spacing was called “leading,” pronounced “ledding.” - For example, 16-point type with 4 points of leading produced a 20-point line height. - Choosing the right amount of leading depended on the font, font size, and line length. - The physical system imposed constraints: - Leading could be added but not removed. - Fonts generally arrived as fixed, unchangeable blocks. - Baselines and internal font proportions varied between typefaces. ## Digital Typography Introduces New Problems - Computers replaced physical type blocks with collections of numerical data stored in font files. - Fonts had to support different platforms and formats, including Windows, Macintosh, and OS/2. - Rendering differences, bugs, and platform-specific behavior made typography less consistent. - Digital typography also created new freedoms: - Text could extend beyond traditional font boxes. - Elements could overlap. - Typesetters could add, reduce, or completely remove leading. - Unlike metal type, digital fonts could define arbitrary default line heights, often making them taller than the nominal font size for improved readability. Figma’s changes attempt to preserve useful typographic principles while adapting them to the flexibility—and historical complications—of digital text layout.

web-designfigmacsstypography+2

figmaJun 4, 2018

With websites, what comes first: The copy or design? | Figma Blog (opens in new tab)

Website projects often become slow, repetitive exchanges between copywriters, designers, and stakeholders. The post argues that copy and design should be developed together rather than sequentially, using a shared, cloud-based workspace like Figma. Real-time collaboration reduces revisions, meetings, delays, and confusion while producing better web assets. ## The Problems with Separate Copy and Design Workflows - Copywriters may work in Google Docs while designers work in Sketch or another separate tool. - Teams repeatedly exchange drafts after discovering that text does not fit the design. - Design critiques, copy reviews, and stakeholder feedback can force additional redesigns. - Remote collaboration makes the process even more cumbersome; the author describes printing designs, writing edits by hand, scanning them, and sending them back. - Siloed tools make the project difficult to track, even for project managers. ## Developing Copy and Design Together in Figma - The author outlined the main copy points for each page in a Google Doc. - Designers created Figma frames representing the website pages. - Marketing and design worked simultaneously, progressing from high-fidelity wireframes to final designs. - Copy could be edited directly while viewing it in its intended visual context. - Designers spent less time handling communication and more time focusing on the design itself. ## A Shared Source of Truth - Stakeholders could access the latest copy and designs through a single project URL. - Team members could leave comments and review version history without exporting or emailing files. - The same designs could be used for user testing, allowing everyone to connect feedback with the current work. - Fewer meetings were needed, and the remaining meetings became more efficient. - Last-minute updates no longer required a separate scramble before milestone reviews. The practical recommendation is to replace sequential, tool-separated workflows with real-time collaboration between writers, designers, and stakeholders. Treating copy and design as interconnected parts of one process can make website projects faster, clearer, and less frustrating.

web-designfigmaui-ux-designsketch+4