figmaSep 8, 2025

The Anatomy of a Summer Campaign: How Instacart Staged a Sick ’90s Throwback | Figma Blog (opens in new tab)

Instacart’s “Summer Like It’s 1999” campaign used nostalgia to recreate the carefree feeling of a late-’90s summer. The campaign combined discounted retro snacks, a cohesive visual identity, immersive advertising, and a free Third Eye Blind concert. Its success depended on close collaboration across creative, marketing, CPG partners, and external agencies, with Figma serving as the shared source of truth. ## Recreating ’90s Nostalgia - Instacart reduced prices on nostalgic products such as Bagel Bites, Capri-Sun, and Otter Pops to their approximate 1999 prices. - The campaign culminated in a free Third Eye Blind concert in New York City. - Its visual language drew on: - Chunky typography - Bright, vivid colors - Fish-eye photography - Oversize clothing and other recognizable ’90s references - The team aimed to evoke nostalgia while keeping the work distinctly recognizable as Instacart. ## Building an All-in-One Creative Toolkit - Instacart’s in-house creative studio held daily meetings to align on: - Typography - Color palettes - Illustration - Photography - Logo and lockup treatments - Designers explored a wide range of ’90s references before reducing them to the essential elements that fit the brand. - The resulting toolkit documented the campaign’s colors, illustrations, typography, and other visual rules. - It became a living Figma file that internal teams, marketers, and external partners could use to create new assets. - The toolkit supported later campaign extensions, including a Venmo partnership and an advertisement inspired by the ’90s movie theater experience. ## Cross-Functional Collaboration - Creative, marketing, and CPG co-marketing teams worked together from the beginning rather than relying on formal handoffs. - Marketers had direct access to Figma, enabling frequent reviews, rapid changes, and visibility into work in progress. - The shared workspace helped maintain consistency across many campaign touchpoints, including: - The app icon - Splash pages - Television commercials - Billboards - Partner executions - The toolkit provided a flexible “north star” while allowing teams to remain expressive and adapt the campaign as new needs emerged. ## Developing a Detailed Photography Brief - The photography brief specified not only the products and scenes to capture, but also the precise visual treatment. - The team planned: - Low camera angles - Fish-eye effects - Idyllic outdoor locations - ’90s-inspired styling - Product placement required careful planning because the brief passed through multiple stakeholders. - Illustrations, typography, and textures were designed to layer over the photography, adding complexity and reinforcing a unified campaign style. Instacart’s campaign demonstrates how a strong, flexible design system can turn a broad creative idea into a coordinated, multi-channel experience. Establishing shared guidelines early—and keeping them accessible throughout production—helped the company move quickly without losing brand consistency.

typographyfigmadesign-systemsphotography+3

figmaJul 2, 2025

How We Shaped the Visual Identity for Config 2025 | Figma Blog (opens in new tab)

Figma’s Brand Studio spent 10 months developing Config 2025’s visual identity for a large, global audience and a wide range of physical and digital formats. The team centered the system on expressive animated glyphs made from basic shapes, creating an identity that could adapt as the event evolved. By combining conceptual flexibility, component-based design, motion, and Figma’s refreshed brand language, they made Config feel tactile, dynamic, and distinctly connected to the spirit of making. ## Building a Flexible Visual Concept - The creative process began with broad exploration rather than fixed moodboards or a narrowly defined style. - The team focused on a concept that could support varied execution: - Social media content - Main-stage screens - Physical installations - Attendee badges and merchandise - Spatial experiences - Creative Director Damien Correll emphasized constraining the concept without constraining execution, allowing the identity to remain adaptable. - Because event plans and requirements change, the visual system needed “wiggle room” and the ability to evolve over time. ## Glyphs as a Language of Making - The visual identity revolved around animated glyphs built from simple shapes, or primitives. - Each glyph combined inner and outer elements that interacted with one another. - Their shifting forms represented: - Dynamism - Change - Adaptability - The unpredictable nature of creative work - Motion allowed a single glyph to trigger ripples and transform an entire composition. - The concept aligned with Config’s product announcements, including Figma Draw and Figma Sites, which focused on helping users express themselves in new ways. ## A Component-Based Toolkit - The team created a glyph library directly in Figma. - Glyphs were built as reusable components, making it easy for partners and vendors to: - Swap variations - Customize compositions - Adapt assets to different surfaces - This approach helped maintain consistency while supporting many applications and production constraints. ## Extending Figma’s Refreshed Brand - Config’s identity built on Figma’s recently updated visual language. - The team adapted the refreshed: - Color palette - Typeface, Figma Sans - Playful primitive-based design approach - This connection allowed Config to feel like an extension of Figma’s broader brand while still having its own expressive event personality. Figma’s approach demonstrates how a strong event identity can combine a clear conceptual foundation with modular, adaptable assets. Designing the system as reusable components—and allowing motion and variation to carry meaning—enabled Config 2025 to remain cohesive across thousands of touchpoints without becoming rigid.

typographyfigmamotion-designfigma-draw+3

figmaMay 6, 2025

The Making of Practice, a Book on Design and Craft by Figma | Figma Blog (opens in new tab)

Practice, Figma’s third annual Config magazine, explores craft as intentional making shaped by patience, precision, experimentation, and repetition. The project argues that quality depends not only on whether something works, but on how it works. Its editorial and visual design connect historical craftsmanship with contemporary digital tools and creative practice. ## Craft as the Theme - The magazine focuses on what it means to make with intention. - Craft is presented as a process of: - Practicing repeatedly - Learning through failure - Studying more experienced makers - Taking risks and pushing boundaries - Dylan Field summarizes the central idea: “The question is not just, can you make it work? It’s how it works that actually matters.” - The contributors demonstrate that patience, observation, and intentionality apply across disciplines and mediums. ## A Contemporary Take on Traditional Bookmaking - Design studio Other Means created the print edition with type designer Kia Tasbihgou. - The visual direction draws inspiration from William Morris and the Kelmscott Press, particularly its emphasis on intrinsic quality and artistic taste. - Traditional bookmaking elements—including: - Initial caps - Fleurons - Decorative borders - Drop caps - These details were reinterpreted in a contemporary style to connect historical craft with modern design. ## Craft Across Design and Technology - Practice brings together articles, interviews, and essays from Figma’s Story Studio. - Its contributors work with screens, pixels, data, and digital tools, but share principles with makers in more physical disciplines. - The project presents craft as both rooted in tradition and driven by innovation. - The magazine’s featured subjects explore craft through themes including adaptation, iteration, application, and value. ## Practice as a Typeface - The book’s distinctive drop caps were expanded into a complete typeface. - The resulting font includes a full alphabet of visually distinctive characters. - Figma created a type specimen website using Figma Sites. - The typeface is available to view and download through the Practice website. Practice ultimately recommends treating making as a deliberate, ongoing discipline rather than a race to a working result. Whether designing software, typography, books, or physical objects, strong work comes from sustained practice and attention to how the final result is made.

typographyfigmagraphic-designfigma-sites+2

figmaMay 6, 2025

24 Artifacts That Define Craft | Figma Blog (opens in new tab)

Figma’s “24 artifacts that define craft” presents objects chosen by designers and makers as examples of intentional making. The collection argues that craft is not limited to perfection or complexity; it comes from thoughtful decisions, practiced skill, meaningful constraints, and attention to both process and experience. Whether an artifact is durable, practical, playful, or fleeting, its quality reflects deliberate choices. ## Craft as Intentional Decision-Making - The artifacts come from *Practice*, a Figma book created by its Story Studio and Brand Studio teams and designed with Other Means and type designer Kia Tasbihgou. - Examples range from a vintage puzzle box and precision-mixed daiquiri to an AI poetry camera and a familiar spreadsheet. - Each object reveals its maker’s judgment: - What to refine or leave raw - When to continue experimenting or stop - How to balance durability, usefulness, and delight - The central idea is that great craft “doesn’t happen by accident.” ## Designing Experiences, Not Just Objects - Garden designer Piet Oudolf’s work demonstrates that craft can mean shaping an experience rather than producing a fixed visual artifact. - His freehand garden schematics use loose forms, color nodes, and plant abbreviations while reflecting deep knowledge of how plants interact. - Oudolf avoids renderings because they capture only one artificial moment, rather than the changing experience of being in the garden. - His work shows that expertise can support spontaneity and looseness instead of requiring rigid precision. ## Structure and Flexibility in Graphic Design - Ladislav Sutnar’s *Catalog Design Progress* revitalized industrial catalogs through a combination of strict typographic systems and adaptable layouts. - The catalog provided a consistent visual framework while allowing individual products to receive customized treatment. - Its design transformed an everyday commercial tool into both an organizational system and an example of visual art. - Craft emerges through the balance between standards and room for variation. ## Precision Under Limitation - A Russian Constructivist poster by the Stenberg Brothers illustrates how constraints can intensify craft. - Its sharp geometric stripes and repeated, photorealistic portraits create tension between contrasting visual languages. - Lithography required decisions to be made directly and intentionally, without endless digital-style revisions. - The poster suggests that simplicity is demanding because every compositional choice remains exposed. ## Doing More with Less - Playdate, the yellow handheld console by Panic with hardware by Teenage Engineering, embodies craft through limitation. - Its one-bit screen and small processor prevent technically elaborate graphics but encourage inventive game design. - Distinctive features—including the bright yellow body, limited “seasons” of games, and physical crank—make the constraints part of the product’s identity. - The console demonstrates that craft is about doing something exceptionally well, not adding more features. ## Making the Process Part of the Art - Wintergatan’s Marble Machine combines a music box with a Rube Goldberg-like mechanism. - Its elaborate, human-powered construction makes the act of producing music as engaging as the resulting sound. - The machine invites active participation from both performer and audience, contrasting with passive music consumption. - Its appeal comes from the visible relationship between mechanism, effort, and outcome. ## A Broad Definition of Craft - The selected artifacts span landscape design, publishing, posters, consumer electronics, and musical machines. - Together, they frame craft as a mindset rather than a particular medium or aesthetic. - Craft may appear as precision, improvisation, restraint, system-building, physical labor, or playful interaction. - The common thread is purposeful making: understanding materials and constraints well enough to create something with character and intent. The collection recommends looking beyond polished appearances and examining the decisions behind an artifact. Good craft comes from combining knowledge, discipline, and judgment with the courage to embrace limits and leave room for human experience.

typographyaiproduct-designgraphic-design+2

figmaApr 7, 2025

How to Streamline Your Design System Workflow in Figma | Figma Blog (opens in new tab)

Figma’s latest design-system updates reduce the repetitive work involved in organizing variables, styles, components, and documentation. The post combines nine quality-of-life improvements with a set of plugins covering the workflow from color and typography foundations through documentation, component specs, and code handoff. Together, these tools aim to make design systems faster to build, easier to maintain, and more useful to developers. ## Reordering Modes and Collections - Modes and variable collections can now be rearranged with drag and drop. - Existing modes and IDs remain intact, avoiding resets, broken dependencies, or out-of-sync designs. - Teams can: - Move frequently used collections to the top. - Group related modes. - Reorganize collections during rebrands or product-line updates. - The default mode can also be changed more easily. ## Nine Quality-of-Life Improvements Figma introduced several smaller improvements intended to remove workflow friction: - A shortcut for jumping directly to a component’s main source. - The ability to duplicate and copy styles. - Options to hide and reveal variable paints. - A clearer component-description interface. - A variable modal that can be dragged from anywhere in its header. - Automatic saving for variable changes. - Tooltips that provide context for component names. - Better alignment for the Edit button. - Improved text overflow handling for long style names. ## Building the Foundations The post recommends using community plugins to accelerate the foundational work of creating colors, typography, spacing, and other core design-system decisions. ### Creating Color Palettes The highlighted tools support different aspects of color-system creation: - **CSS color-mix()** helps create color palettes and gradients. - **Colorbox** generates complete color ramps. - **The Genome Color Tool** helps build color scales that meet WCAG accessibility requirements. ### Establishing Typography and Variables - **Peppercorn** assists with setting up an entire type system. - **Print Variables** creates sticker sheets for variable collections. - **Auto Documentation** generates visual documentation for variables. - **Variables and Styles List** presents variable sheets inside a Figma canvas widget. ## Documenting Components and Styles Documentation tools help teams make systems easier to understand and adopt: - **Propstar** maps component property and prop variations. - **Specs** generates component specifications. - **Similayer** filters for particular layers and properties. - **Style Finder** locates styles across pages. These tools can reduce the manual effort required to explain component behavior and find existing design decisions. ## Bridging Design and Development The recommended implementation tools connect Figma variables and styles with code: - **CTRL Var** supports variable renaming. - **Export Import Variables** moves variables into or out of Figma. - **Handoff** copies CSS variables quickly. - **Variables Converter** translates variables into code. - **Shaper** helps manage token architecture and generate CSS. ## Practical Recommendation Start with Figma’s built-in improvements for organizing collections, modes, styles, and variables, then add plugins selectively for color generation, documentation, component specification, and code handoff. The goal is not to use every tool, but to create a repeatable workflow that keeps design-system foundations consistent and makes implementation easier for developers.

typographyfigmadesign-systemsdesign-tokens+4

figmaFeb 18, 2025

In Good Company: How Publishers Use Figma to Help Design the News | Figma Blog (opens in new tab)

Publishers are adapting to digital-first journalism by redesigning products, developing new visual identities, and experimenting with formats that attract and retain readers. The article argues that Figma helps media organizations coordinate designers, editors, engineers, and executives while maintaining accuracy, clarity, and accessibility. The New York Times’ redesigned app illustrates how collaborative prototyping can support a broader subscription ecosystem without losing journalism’s central role. ## The shift toward digital-first publishing - Legacy publishers face accelerating change as audiences move from print to web and mobile. - Subscription models are becoming more important amid an unpredictable advertising market, although many readers remain reluctant to pay for online news. - Media teams must build stronger relationships with readers while exploring new products and formats. - Figma supports this work by keeping multidisciplinary teams aligned during design and experimentation. ## The New York Times’ redesigned app - Relaunched in October 2024, the app reflects The Times’ strategy of connecting multiple products, including News, Games, Cooking, Audio, Wirecutter, and The Athletic. - The redesign places the **Today** section and the latest news at the center of the experience. - A top navigation system makes other verticals easier to discover, with each product receiving its own home screen. - Rather than creating one “super app” feed, the design gives each section a distinct visual identity: - Lifestyle uses image-heavy grids with headline overlays, based on a component called a “poster.” - Opinion uses stylized headlines to communicate its different editorial perspective. - The overall concept treats journalism as the central “sun,” with other products orbiting around it. ## Figma as a newsroom collaboration space - The project involved section editors, engineers, senior management, product designers, and The Times’ storytelling group. - Teams used Figma asynchronously to explore layouts combining text, images, video, and audio. - Designers could share interactive prototypes directly instead of preparing as many presentation decks or relying on screen-sharing meetings. - The shared workspace helped stakeholders see colleagues’ work immediately and participate in shaping the app’s editorial formats. The article’s broader recommendation is that collaborative design tools can help publishers manage complex digital transformations while preserving strong editorial identities.

typographyfigmadesign-systemsprototyping+3

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.

typographyfigmadesign-systemscomponent-library+1

figmaSep 15, 2024

Figma on Figma: Our Latest Brand Refresh | Figma Blog (opens in new tab)

Figma refreshed its visual identity to reflect its evolution from a designer-focused tool into a collaborative platform for entire product teams. The new language moves beyond static cursors and heavy outlines, using flexible primitives, dynamic compositions, broader color, custom typography, and motion. Its central idea is to portray Figma as a shared space where people from different roles create together. ## Expanding Beyond a Designer-Centric Identity - Figma’s earlier branding was rooted in “vector vernacular,” including static cursors and bold black outlines. - As developers, product managers, and other contributors became part of the platform, the brand needed to represent more than traditional design work. - The refresh emphasizes the many people involved in turning ideas into finished products. ## Four Foundations of the New Visual Language - **Versatile primitives:** Visual building blocks represent the diverse individuals involved in co-creation. - **Dynamic compositions:** Layouts reflect different ways of making, experimenting, and building. - **Expanded color palette:** Color variables make the system easier to adapt across contexts. - **Integrated motion:** Animation expresses actions and flows within the creative process. ## Typography and Custom Fonts - Figma partnered with Grilli Type to create **Figma Sans**, described as an opinionated grotesque. - The broader type system includes: - Figma Sans - Figma Condensed - Figma Mono - Figma Hand, created with OH no Type - Together, the fonts support different modes of communication, from product design and engineering to brainstorming and collaboration. ## Starting in the Sandbox - Brand Studio began by studying how people use Figma across the entire process: - Brainstorming and ideation - Inspecting elements - Refining and polishing work - The team explored the idea of activities happening simultaneously in a shared environment, similar to “parallel play.” - Playgrounds designed by Isamu Noguchi and Mitsuru Senda inspired the concept of the Figma canvas as a place where people gather, experiment, and create. - Other references included carefully crafted tile work and infrastructure, suggesting a visual system that could combine playfulness with structure. Figma’s new identity is designed to make collaboration visible: a flexible, colorful, and animated system that reflects both the individuality of contributors and the shared space where product ideas take shape.

typographyfigmadesign-systemsdesign-tokens+2

figmaSep 4, 2024

Just Our Type: The Story of Creating Figma Sans | Figma Blog (opens in new tab)

Figma created Figma Sans as part of a broader brand refresh responding to its expanding audience and product ecosystem. Replacing Whyte, the new typeface was designed with Grilli Type to combine a distinctive, opinionated character with flexibility, legibility, and performance across many contexts. The process favored a bespoke solution over existing fonts and used exploratory concepts to define the final direction. ## A Typeface for an Expanding Brand - Figma’s visual identity was evolving across color, illustration, pattern, motion, and typography. - Its previous typeface, Whyte—with its distinctive inktrap variation—had served the brand since 2019. - The broader audience now included designers, developers, product managers, and newcomers, requiring a typeface that could communicate widely. - Figma sought a contemporary grotesque: a sans serif style that could support varied weights, optical sizes, and applications. ## Finding a Fresh Approach - The Brand Studio prioritized: - Flexibility across display and text use - Strong legibility - Effective performance in places such as the Help Center - A visual personality aligned with Figma’s new, more complex brand language - The team evaluated existing typefaces, including Marr Sans and Agipo, but found that none fully met the brief. - They chose to commission a custom typeface so the collaboration itself could help clarify Figma’s typographic needs. - Grilli Type was selected for its design expertise, narrative focus, and willingness to develop a concept rather than follow current trends or historical models. ## Defining an “Opinionated” Typeface - Grilli Type began by creating a mood board to identify the central tension in the brief. - “Opinionated” became a guiding idea: the typeface should feel confident, purposeful, and free of unnecessary decoration. - The design team explored references including: - Karl Gerstner’s work - 1920s German typography - Bell Centennial, designed for phone books by Matthew Carter - Two initial directions were presented: - A more straightforward approach with simplified forms - A more unconventional and expressive direction - Rather than choosing one option outright, Figma used the concepts to discuss the desired design space. - Feedback favored the simpler shapes of the first direction while incorporating some of the distinctive character of the second. Figma Sans emerged from treating typography as a central part of Figma’s evolving brand—not merely as a replacement font. Its recommended role is both expressive and practical: a recognizable voice for brand communication that remains readable and versatile throughout Figma’s products and content.

typographyfigmabrandingtypeface-design+2

figmaMar 5, 2023

Meet the maker: Marcin Wichary | Figma Blog (opens in new tab)

Marcin Wichary’s book *Shift Happens* explores the 150-year evolution of keyboards, typing, and QWERTY as tools shaped by many people rather than a single inventor. His making process relies on rapid prototyping, experimentation, and frequent feedback, whether he is writing, designing, coding, or preparing print materials. The project demonstrates how play and iteration can make a complex, long-term creative effort manageable. ## The History and Meaning of Keyboards - The book examines how keyboards evolved from typewriters to teletypes, computers, and modern devices. - Although keyboards seem functional and unremarkable, their role has changed significantly: - They were once primarily used for producing documents. - Today, they are often used for chatting, texting, and online communication. - QWERTY’s history reflects collective technological development; its designer is effectively “everybody and no one.” ## A Prototyping-Based Creative Process - Wichary builds small versions of ideas, evaluates them, and shares them with others. - He began designing the book’s layout before finishing the manuscript. - Custom plugins automated the flow of text and images into the print layout. - He ordered a print-on-demand prototype as soon as the first manuscript was ready, before completing proofreading. - He tested difficult print scenarios, including: - Black pages - Vivid colors - Highly detailed photographs - Specific paper and page sizes - Iteration often made the project feel unfinished and chaotic, but embracing that uncertainty helped him improve the work. ## Using Experiments to Sustain Momentum - To avoid becoming overwhelmed by writing, research, and image licensing, Wichary created small experimental projects. - He: - Reverse-engineered vintage keyboards and connected them to modern computers. - Built unusual keyboards, including a piano-based typing keyboard. - Tested exceptionally good and bad keyboards. - Created mini-games and a typewriter simulator. - These projects were partly useful for research but also helped preserve his enjoyment of the subject. ## Reviving the Gorton Typeface - Wichary recreated Gorton, a distinctive technical typeface associated with 1980s keyboards and CNC machinery. - Because it had never been released as a TrueType font, he redrew it in Figma and refined it in Glyphs. - The work connected to his first Figma project, which involved type-design tools, and gave him an opportunity to use those tools as a practicing type designer. ## Figma as a Book and Collaboration Tool - He used Figma for: - Moodboards - Print layouts - Website and Kickstarter designs - Newsletter materials - Color systems - Reusable layouts through auto layout - Plugins helped manage complex layouts that had to be revised repeatedly. - Figma’s sharing features made it easy to solicit feedback from people unfamiliar with the tool. - Comments, voting, and canvas annotations supported collaboration with friends, designers, and remote 3D artists. ## Feedback as Part of Making - Wichary built a custom app to gather reactions to individual book chapters through a private URL. - Reviewers could respond using emojis or short comments. - The app made feedback more accessible and provided a refreshing break from writing. - Building a purpose-specific tool also made the feedback process enjoyable rather than purely evaluative. The project’s central lesson is to combine disciplined iteration with playful experimentation. Prototypes, small tools, and early feedback can expose problems sooner while keeping a demanding creative project engaging.

typographyfigmaprototypingauto-layout+4

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.

typographyfigmaaccessibilityux+3

figmaMay 4, 2022

The power of emoji | Figma Blog (opens in new tab)

Emoji have become an essential layer of digital communication, helping convey emotion, tone, body language, and intent that are otherwise difficult to express through text. Jennifer Daniel, chair of Unicode’s Emoji Subcommittee, argues that emoji do not create new ideas; they translate long-standing human concepts into a flexible visual form. Because Unicode characters are permanent and globally interoperable, new emoji must be selected carefully, with an emphasis on broad usefulness and future relevance. ## Emoji supplement face-to-face communication - Digital communication lacks cues such as: - Rhythm and cadence - Volume - Eye contact - Body language - Emoji help restore some of these signals by clarifying a message’s emotional intent and tone. - As people become more familiar with emoji, choosing and placing them becomes almost instinctive. ## Emoji are contextual rather than a universal language - Emoji represent concepts that have existed throughout written and visual communication, rather than inventing new ones. - Their meanings can shift depending on context and cultural use. - For example, ❤️‍🔥 might suggest religious devotion, heartburn, or desire. - The way people actually use emoji often differs from how they believe they use them. ## Unicode makes emoji permanent - The Emoji Subcommittee operates within the Unicode Consortium, which standardizes digital writing systems worldwide. - Adding an emoji creates a permanent Unicode code point: - It cannot be removed or deprecated. - There are no “do-overs” if an idea becomes outdated. - This permanence contrasts with the fast, experimental cycle common in technology. - Unicode therefore tends to formalize concepts that already exist instead of rapidly creating new ones. ## Selecting useful, future-proof emoji - With more than 3,500 emoji, storage and implementation complexity are becoming constraints. - The committee is shifting away from overly specific objects—such as buckets, saws, and shorts—and toward symbols that support human expression and connection. - Strong candidates are: - Broadly relevant across cultures - Open to multiple meanings - Useful metaphorically or symbolically - Combinable with existing emoji to express new ideas - Adding one narrowly defined character can create pressure for related additions, such as needing both golden retriever and poodle emoji. - As a result, many valid proposals are rejected when their meaning is too specific or already expressible through existing characters. Emoji work best as flexible building blocks for communication, not as an attempt to represent every object or concept. Designers and standards bodies should prioritize symbols that are widely understandable, culturally adaptable, and capable of expressing multiple layers of human emotion and intent.

typographyunicodeemojidigital-communication+2

figmaMar 29, 2022

What’s new in Figma: March 2022 | Figma Blog (opens in new tab)

Figma’s March 2022 updates focus on making Figma and FigJam more accessible, flexible, and useful across devices and global teams. Major additions include FigJam for iPad, right-to-left text support, font-independent superscript and subscript characters, and improved Slack notifications. Together, these features help users ideate anywhere, design for more languages, and keep distributed teams informed. ## FigJam for iPad - FigJam is now available on the iPad through the App Store. - Users can sketch, brainstorm, and annotate away from desktop distractions. - Work can be resumed across iPad and desktop, supporting more fluid workflows. ## Right-to-left text support - Figma and FigJam now support right-to-left writing systems. - Arabic, Hebrew, Urdu, and other languages can be designed and edited more naturally. - The update improves Figma’s suitability for global audiences and international products. ## Superscript and subscript in any font - Superscript and subscript characters can now be used even when the selected font lacks those glyphs. - Figma automatically creates a synthetic, or “faux,” glyph. - The glyph is resized and repositioned to match the surrounding font style. ## Slack notifications for teams - Figma’s updated Slack app helps teams track activity in shared files, teams, and projects. - Notifications can arrive in real time or as hourly and daily digests. - Teams can subscribe project files to dedicated Slack channels. - Comment and collaboration updates can be shared where teammates already coordinate work. Overall, the release recommends using Figma’s new cross-device, localization, typography, and collaboration features to make design work more accessible and connected.

typographyfigmafigjamslack+3

figmaJul 27, 2021

30 updates: recent features and fixes in Figma | Figma Blog (opens in new tab)

Figma’s July 2021 update roundup highlights 30 small improvements designed to make everyday design work faster and less disruptive. The changes span vector editing, typography, images, collaboration, navigation, accessibility, browser behavior, and keyboard shortcuts. Together, they reduce friction across common workflows rather than introducing one major feature. ## Vector, Stroke, and Drawing Improvements - Redesigned the stroke panel with easier controls for end caps and connector properties, including connectors copied from FigJam. - Added math operations for changing properties with mixed values. - The Pencil and Pen tools now remember selected stroke settings for future use. - Added hover states for frame presets and improved grid property drag handles. - New rulers are automatically selected after creation, allowing immediate keyboard adjustment or deletion. ## Image and Export Workflow - Added browser support for **Copy as PNG**, using `⌘+Shift+C` or `Ctrl+Shift+C`. - Holding `⌘`/`Ctrl` while resizing an image immediately crops it. - Image adjustment sliders can now be used without an extra click. - Export settings now include an “include bounding box” option, with the corresponding Plugin API setting `use_absolute_bounds`. - Renamed “Contents only” export to “Ignore overlapping layers.” - Pasting an image during text editing now exits text mode and pastes the image normally. ## Typography and Fonts - A second fill added to an object is now a solid color instead of a gradient. - Text export behavior was improved with more precise bounds controls. - Copying text with a missing font now activates the global missing-font indicator. - The missing-font dialog lets users click directly to identify affected layers. - Removed the “+” option for text nodes with mixed styles, making it easier to override them with a new style or color. - Renaming a file no longer produces an unnecessarily tall selected-text background. ## Collaboration and FigJam Integration - Preferences now sync automatically across open tabs without requiring a reload. - Stickies copied from FigJam as text are ordered according to their layout. - Zooming with “Z” no longer shows a selection rectangle to other collaborators. - Layer-panel icons update faster to reflect their corresponding objects. - The layers panel now scrolls to the selected layer when selection keyboard shortcuts are used. ## Navigation, Menus, and Interaction - The “Move to project” dialog can be dismissed by clicking outside it or pressing Esc. - Increased the clickable area for the top-menu chevron. - Middle-clicking selected links opens them. - Alignment and repositioning buttons remain active while editing text. - Users can pan across links without triggering disruptive link pop-ups. - The redesigned cursor hand is less intrusive. - Toolbar dropdowns now work correctly in View Only mode. ## Browser and Safari Fixes - Safari users can scrub fields by holding `⌥` and moving the mouse. - Right-click menus remain open more reliably in Safari. - Various interaction and menu behaviors were refined to make browser-based Figma more consistent. Figma presents these updates as an ongoing effort to remove small sources of friction from design workflows. Users can review the changes in the associated Figma Community file and follow the “What’s New” page for weekly fixes and improvements.

typographyfigmafigjamplugin-api+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.

typographyfigmaui-designdesign-collaboration+4