Max text width for specific text styles in design system

Question

Is it possible to set a max text width for specific text styles in Figma (e.g., body text) to maintain legibility? I want to prevent team members from creating overly long lines of text, which can be hard to read. If there’s no direct way, does anyone have a workaround or best practice to achieve this

ThuyAnh · Answer

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.

Sign up

Login with SSO

Login to the community

Login with SSO