Max text width for specific text styles in design system

The only workaround I have is creating a content wrapper component then asking my team to use it. It might be restrictive sometimes, but that is the best way I can think of to keep our designs consistent. Here’s how I do it:

• Create an autolayout frame, call it ‘contentWrapper’, set whatever max min width or margin/padding I want.
• Create a new autolayout frame, type in lorem text, call it ‘content’
• Make component for ‘content’, make some size variants if needed, then paste an instance to ‘contentWrapper’, set to Fill container.
• Create swap instance property for ‘content’ in ‘contentWrapper’
• Now your team can use contentWrapper directly, or design however they want and swap with the ‘content’ instance.

The reason I want to have swappable ‘content’ is for maximum flexibility, but if you really want to restrict future designs, you can skip that part.

I do this with literally everything, from content wrappers to modals, drawers, toasts, dropdowns etc. It may be time consuming at first, but the hard work will pay off when the designing / editing process kicks in, especially when you’re working with a team.

The screenshot is one of the components I made using this method.

I learned this from Carbon Design System. They have a community file here, you can check it out to get a clearer idea of what I mean.