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
1 Like
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.