Product updates - token overrides, expression search, extended length units support and more

We’ve had a very productive month and are happy to share many new updates with you! Leave you feedback and suggestions in the form below.

We’d love to hear your thoughts! If you’d like to help us improve the product and have a few minutes to spare, we invite you to fill out a short questionnaire. Your feedback would be greatly appreciated. Take the survey

Flex gaps now support more length units (rem, %)

Gap properties for flex and responsive columns now accept the following CSS length units: ch, cm, em, ex, in, mm, pc, pt, px, rem, vh, vw, vmax, vmin, and %.

A few notes on the new length units, and how to use them:

• rem - Use it when you want gaps that scale with the user’s font size settings (better for accessibility), or when you want consistent spacing that scales with your overall typography. If you don’t want that type of behaviour and expect an exact, fixed spacing that shouldn’t change regardless of font size, use px.

• percentage - If you’re using percentage (%) gaps, remember that they only work when your container has a fixed size. Without that, the browser can’t figure out what the percentage should be relative to.

Token overrides

You can now override token values in Studio — both for tokens from imported projects and tokens you’ve registered in code.

When you override a token, it only affects your current project. The original value in the source project or your code stays unchanged. This is useful when you want to customize imported components without modifying the original library or to customize your branding theme.

To override a token, open the Assets → Style Tokens tab in your left sidebar, find the token, click the menu icon, and select “Override value.” You can also have different overrides for specific targets (like Dark Mode or different breakpoints).

A few scenarios where this helps:

Multi-brand apps: You’re building multiple apps from the same component library. Each app can override tokens to match its own brand while sharing the same base components.

Local experimentation: You want to try out a different color scheme or spacing without affecting the shared library. Override the tokens in your project to test things out.

Read more about token overrides in our updated documentation.

New code component prop type — color

Code components can now have a dedicated color prop type, which can be overridden from the Studio:

PLASMIC.registerComponent(StatusText, {
 props: {
   color: ‘color’,
 }
});

When building custom components that need color inputs, use this instead of a plain string prop—you’ll get better type safety and a nicer editing experience.

Expression search

We’ve added a new expression search feature to help you find and manage all the strings, code snippets, dynamic values, and other values in your project.

There are the following types that you can search for and filter by to narrow things down:

• Text — simple text expressions

• Code — JavaScript/TypeScript code blocks

• Object path — data bindings like $state.user.name

• Event handler — interaction handlers

• Template — template strings

Some common use cases:

• Finding translations: Search for specific text strings to see where they’re used across your project. Useful when updating copy or tracking down hardcoded text that should be dynamic.

• Debugging data flow: Filter by “object path” to see all the places you’re referencing a specific state variable or data source. This helps when you’re trying to understand how data moves through your components.

• Tracking event handlers: Filter by “event handler” to find all interactions of a certain type, or search for a specific function call.

We hope that this feature will make your debugging workflow smoother! If you’re interested in being able to replace text across multiple expressions at once, we’d love to hear from you — it’s a feature we’re considering adding in the future.

Tokens and style presets documentation updated

We’ve refreshed the token and style preset docs with up-to-date usage examples and better coverage of how everything works — including the new override functionality.

HTML importer improvements

Screen breakpoints support

The HTML importer now recognizes media queries and converts them to Plasmic breakpoints.

For example, if you paste HTML with CSS that contains @media-queries, it will import the styles into respective screen-size variants if they exist. Notice the font sizes on the heading element after the import:

The base styles will always import. But if you want the media query styles to come through, you’ll need breakpoints in your project that match those widths. If they don’t exist, those responsive styles just won’t apply.

SVG support

You can now paste HTML with SVG content, and we’ll parse it as actual HTML tags rather than flattening everything to an image.

Go ahead and try pasting something from svgrepo!

Simplify access to ID attribute in Customizable Components

We’ve simplified how you access ID attributes in customizable components. The react-aria components in the root of the customizable component now have the ID field, which you can make externally accessible.

If you’re working with custom interactions or accessibility features that need specific IDs, this should save you some time. See the image below for a detailed instruction on how to expose ID field:

Added support to preserve jsx/tsx import extensions in codegen for Plasmic components

Some bundlers and transpilers require you to keep .jsx or .tsx extensions in your import statements. We’ve added a new flag to plasmic.json to support this - preserveJsImportExtensions

// plasmic.json
{
  “platform”: “react”,
  “preserveJsImportExtensions”: false,
  “code”: {
    “lang”: “ts”,
    “scheme”: “blackbox”
  },
  ...
}

By default, this is set to false, which means Plasmic will strip the extensions from imports (the standard behavior). If you set it to true, the generated code will keep the .jsx and .tsx extensions in the import paths for Plasmic components.

🤝 Join our community

Stay in the loop and connect with fellow creators. Join our forum at forum.plasmic.app and Slack at plasmic.app/slack.