variable-fonts

2 posts

figma

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.

figma

Config 2022: Thinking big and acting with urgency | Figma Blog (opens in new tab)

Figma’s Config 2022 centered on the idea that designers and builders can influence major global and local challenges by thinking bigger and acting urgently. The 24-hour event brought together 100 speakers for 68 talks, while Figma introduced a broad set of product updates aimed at improving responsive design, collaboration, prototyping, and workflow integration. ## Config’s Broader Mission - Config connected a global design community spanning nearly every country. - Dylan Field argued that creatives are not powerless in the face of issues such as economic inequality and climate change. - The event encouraged attendees to use design and technology to create meaningful change, locally and globally. ## Expanded Design and Prototyping Capabilities - **Dark mode** became available on Figma’s desktop and web applications. - **Redesigned auto layout** added more intuitive responsive-design controls, including absolute positioning and negative spacing. - **Variable font support** enabled more expressive and optimized typography. - **Spring animations** allowed designers to create more natural transitions in prototypes. - **Individual strokes** made it possible to customize borders on specific sides of four-sided shapes. - **Updated outlines** exposed hidden objects and bounding boxes across the canvas. ## More Flexible Design Systems - **Component properties** reduced the need for excessive variants. - The feature also improved alignment between design systems and implementation code, supporting smoother developer handoff. - **Review states** enabled teams to approve changes, request revisions, and provide contextual feedback through branching. ## Collaboration and Workflow Integrations - **Spotlight** allowed participants in multiplayer sessions to direct everyone’s attention to a specific collaborator. - New **FigJam widgets** connected collaborative ideas with execution tools: - Jira - Asana - GitHub - Additional FigJam widgets included greeting cards and voice memos for team celebrations. - **International keyboard shortcuts**, initially in beta, improved shortcut support for German, Japanese, and French keyboards. ## Sharing and File Management - **Password protection** gave file owners more control over who could access shared files. - **Favoriting files** made frequently used documents easier to find and access. Figma positioned these updates as tools for making design work more responsive, collaborative, inclusive, and connected to broader product-development workflows. Teams can benefit most by adopting the features that strengthen their design systems, review processes, and collaboration practices.