🚀 Editor updates, Figma integration enhancements, Voting system, Custom Props for Global Context
And lots of other updates!
We’re excited to share some new features and updates designed to give you more control, flexibility, and integration options in your workflow. Let’s dive into what’s new:
Outline CSS Setting
We’ve added a new setting in the Design tab that allows you to define the outline for any element. This is especially useful when styling custom input fields and form elements, giving you more control over your design’s visual structure.
Custom Props for Global Context
You can now add custom props directly into your global context! This new versatile feature allows you to define custom controls for any use case, enabling you to create tailored components for your content editors.
This makes building complex, reusable components that work perfectly with your project’s unique needs easier than ever.
Here’s a quick example:
PLASMIC.registerGlobalContext(GlobalContextComponent, {
name: "GlobalContext",
props: {
customProp: {
type: "custom",
control: CustomControl,
defaultValue: 0,
},
},
});
Nested Component Structure
Structuring your components just got easier. You can now group components into folders simply by renaming them!
To create a folder, separate the folder name and component name with a slash (/).
This feature is currently available for components in the left sidebar only; support for the top navigator widget is planned and coming soon!
Nested Style Tokens Structure
Just like with components, you can now group style tokens into folders simply by renaming them! This new feature makes it much easier to manage and navigate your style tokens, especially in larger projects where tokens can quickly become overwhelming. By grouping them into logical folders, you can maintain a cleaner, more intuitive structure, improving both design consistency and development efficiency.
useRouter is now supported within extractPlasmicQueryData
We now support useRouter hook usage inside components and other hooks that are subject to prepass. With this enhancement you can now freely use useRouter within extractPlasmicQueryData. This enables you to build more dynamic and complex queries using data from your router, giving you greater flexibility in your applications.
export function CustomDataComponent(props) {
const { children } = props;
const router = useRouter();
const pathname = router.pathname;
const pageData = useMutablePlasmicQueryData(`page-meta-${pathname}`, pageDataFetcher);
return (
<DataProvider data={pageData} name='CustomPageData'>
{children}
</DataProvider>
)
}
File Uploader preview modal updates
We’ve enhanced the File Uploader component with a new update! It now adopts the standard gallery UI from the Ant Design 5 (antd5) library. After selecting a file through the file uploader input, you’ll now be able to view it in a gallery format before the upload begins, providing a cleaner and more intuitive user experience.
Figma Integration Enhancements
We’ve made several improvements to our Figma integration, making your design workflow smoother than ever:
Support for null values in
figmaPropsTransformImproved handling of object/array values in
figmaPropsTransformPlus, a range of bug fixes and optimizations to improve the overall import experience
Granular Permission Settings for Content Editors
Good news for our enterprise clients taking advantage of the custom roles & permissions feature—accidentally publishing a project is now a thing of the past! You can now fine-tune permissions for your content editors, giving you more control over who can publish projects. This prevents unintended releases and ensures that only the right team members have the authority to make your work live.
Forum - Vote system for “Ideas and Feedback” Category
The Ideas and Feedback category has always been a space for sharing suggestions, but over time it’s grown into a bit of a bottomless pit of ideas. To better manage this and gather more quantitative data on what features matter most to our community, we’ve now enabled topic voting in the category.
You can now vote on the ideas that are most important to you, helping us prioritize the features and improvements you want to see!
Shoutout to Our Open Source Contributors!
We’d like to give a special thanks to the amazing contributors from our open-source community. Your proactive contributions help make this project better every day. Kudos to everyone who has recently submitted improvements, fixes, and features!
🤝 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.