figmaOct 22, 2025

Three New Features to Help Build Brand Momentum With Figma Buzz | Figma Blog (opens in new tab)

Figma is expanding Figma Buzz to help marketing teams create branded assets at scale while preserving design-system consistency. The October 2025 update introduces configurable templates based on component properties, plugin integrations, and built-in video trimming. Together, these features give marketers more flexibility while helping brand teams maintain control over approved designs, assets, and content. ## Configurable Templates Built on Design Systems - Brand designers can copy templates from Figma Design component sets into Figma Buzz. - Component properties automatically remain functional in Buzz. - Marketers can customize templates through the **Change layout** panel by: - Selecting layout variants - Toggling elements such as dates on or off - Switching between approved component instances - Changing colors, logos, calls to action, or illustrations - Teams can offer flexible template variations without creating and maintaining hundreds of separate files. - The result is easier template discovery and customization without compromising brand guidelines. ## Plugins for Connected Marketing Workflows Plugins are now available directly in Figma Buzz, reducing the need to move between design and marketing tools. Initial integrations focus on digital asset management, translation management, and animation, while teams can also create and publish internal plugins. ### Digital Asset Management DAM integrations let marketers access approved assets and keep designs synchronized without leaving Figma Buzz. Featured plugins include: - Air - Brandfolder - Bynder - OrangeLogic These connections support browsing and importing approved images, as well as uploading completed designs back to asset-management systems. ### Translation Management Translation-management integrations allow teams to pull localized copy directly into Figma Buzz templates. This helps marketing organizations scale campaigns globally while keeping translations connected to their visual design context. ## Video Trimming - Users can trim videos directly inside Figma Buzz. - This provides more control over how video content appears in branded assets. - It builds on earlier support for importing and exporting video. Figma positions these additions as part of its broader effort to make Buzz a scalable workspace for brand and marketing teams. Teams can use design-system-driven templates for consistency, plugins to connect existing workflows, and in-app video editing to produce polished campaign assets more efficiently.

component-propertiesfigmadesign-systemsplugins+4

figmaJul 28, 2025

A Tale of Two Parameter Architectures—and How We Unified Them | Figma Blog (opens in new tab)

Figma’s component properties and variables both let users define a value once and apply it across a design, but they were originally built on separate architectures. This led to conflicting bindings, inconsistent rendering, and duplicated engineering effort. Figma unified the systems into one parameter architecture, improving consistency and creating a scalable foundation for future products. ## Two Different Parameter Systems - **Component properties**, introduced in 2022, addressed the gap between design and code. - They enabled **scoped parametrization**: parameters could be defined by a component and applied only to its internal layers. - This gave design-system authors a clear customization contract and mirrored how component properties work in code. - The model supported features such as: - Boolean properties - Text and instance customization - Component variants and states - Component properties helped power products including Figma Sites, Figma Make, and Code Connect. ## Variables and Global Parametrization - Variables provided a broader, more globally reusable parameter system. - They supported values such as colors and could define different values for contextual modes, such as light and dark themes. - Unlike component properties, variables were designed to be reused across many unrelated layers and components. - This made variables well suited to design tokens and system-wide configuration. ## Problems Caused by Separate Architectures - The two systems evolved independently despite having similar goals. - A variable and a component property could bind to the same layer property, producing inconsistent results in the editor. - Users had to learn different behaviors and rules for concepts that appeared similar. - Maintaining two implementations increased engineering complexity and slowed feature development. - Extending parametrization to other Figma products risked reproducing the same technical limitations. ## Unifying the Architecture - Figma built a single underlying parameter architecture to support both component properties and variables. - The unified system preserves the distinction between: - Parameters scoped to a component - Parameters reused globally across a project - It eliminates competing bindings and makes parameter behavior more predictable. - The change also improves developer velocity by allowing new capabilities to build on shared infrastructure. ## Broader Impact - Designers receive a more consistent mental model for configuring components and design systems. - Rendering behavior is more reliable when multiple parameter types interact. - Figma can extend parametrization across existing and future products without maintaining separate technical foundations. - The unified architecture supports Figma’s broader goal of connecting design-system behavior with code and interactive products. Figma’s recommendation in practice is to treat component properties and variables as complementary uses of one parameter model: use scoped properties for component contracts and variables for reusable, contextual design tokens.

component-propertiesfigmadesign-systemsresponsive-design+3

figmaJul 18, 2023

The Shared Language of Props | Figma | Figma Blog (opens in new tab)

Design and engineering use the same component vocabulary, but often attach different meanings to terms such as “property,” “variant,” and “button.” Figma properties primarily describe visual variations, while code props may also control behavior, events, data, and rendering. Effective collaboration therefore requires translating concepts across environments rather than assuming identical names imply identical implementations. ## Components and Properties as Shared Concepts - Components are reusable elements governed by rules describing how they can look and behave. - Properties, or “props,” define the possible expressions of a component, including: - Variants - Boolean values - Instance swaps - Text values - In Figma, properties are used mainly to represent visual differences. - In code, props can also represent non-visual concerns such as event handlers and data. - A shared term can conceal different assumptions when designers and developers work in different tools and contexts. ## A Button Is Not the Same Everywhere - Designers and developers both work with buttons, but prioritize different concerns: - Designers focus on visual consistency and maintainability across design files. - Developers focus on interactivity, rendering, accessibility, and implementation. - A Figma button and a code-based button may share a name without sharing the same API or purpose. - Migrating a React and TypeScript application to a design-system-based frontend exposed conflicts between Material UI conventions and the organization’s custom design system. - The component library aimed to be intuitive and lightweight for full-stack engineers who primarily connected frontend and backend systems. ## Divergent Component Models - The design system contained two Figma components: - `Button` - `IconButton` - The codebase contained five button components. - Figma’s `Button` and `IconButton` did not use the same inheritance or primitive-component structure as the codebase. - Some properties, such as size and color variants, were duplicated in Figma because that structure better represented the design model. - Although the components shared names and broad concepts, they did not share the same purpose or complete set of properties. Teams should treat design and code components as related models rather than identical ones. Clear translation of property names, meanings, and responsibilities can preserve each environment’s strengths while reducing misunderstandings during implementation.

component-propertiesfigmadesign-systemsreact+3

figmaSep 27, 2022

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

September 2022 brought Figma and FigJam updates focused on collaboration and design-system workflows. Component properties became more flexible through an open beta, while Google Calendar integration made it easier to connect files with meetings. Figma also announced Schema events and released more than 300 templates for common design and team activities. ## More Flexible Component Properties The open beta expands component-property capabilities to make design systems easier to manage and customize: - **Preferred values** provide curated component options when swapping instances. - **Exposed nested instances** let users customize nested-instance properties from the parent component. - **Simplified instances** hide unnecessary layers and details, emphasizing only editable elements for people using the component. ## Figma and FigJam in Google Calendar A new Google Chrome extension connects Figma and FigJam directly to Google Calendar: - Users can attach a Figma or FigJam file to a calendar event. - Teams can add meeting materials without leaving Calendar or manually copying links. ## Schema Design Systems Conference Figma opened registration for Schema, its design-systems-focused conference: - Programming is available virtually and in person. - In-person sessions are planned for New York, Tokyo, and London. - The event brings together design-systems leaders and practitioners to share ideas and improve their systems. ## More Than 300 New Templates Figma and FigJam added hundreds of templates organized by role and use case, helping teams start projects more quickly. Examples include: - Brand guidelines for documenting a brand’s visual source of truth - Product development roadmaps for moving features from idea to execution - Team meeting agendas - Roadmap planning, SWOT analysis, and design critique activities These updates make Figma more practical for collaborative meetings while giving design-system teams greater control over reusable components.

component-propertiesfigmadesign-systemsfigjam+3