

They will keep their connection and update when you change the related style. This will make it easier to add subheads or define sections of the text as links (among other things). Users can select and apply various text and fill styles inside one text field by highlighting a portion of the text. In Figma, text fields work a little differently. That means if you want to format part of a sentence as a link, include a section header, or make any other adjustments, you’ll distort the connection between the text field and the originally applied style. Override any part of your text field with a specific style In most design tools, text fields can only hold one style. Pain point 2: Using Styles in text fields If your link color changes, simply update the original fill style and it will propagate through your design in all the places where it was used. All three attributes can be set up (and then used) individually.

We fixed this problem by breaking apart form, color and alignment. If your brand changes - let’s say you realized your ‘light grey’ link color doesn’t pass accessibility tests - you have to manually update all of the styles impacted by that change. In most design tools, you can’t separate text and color style, so you must create 9 styles - 3 colors for each of the 3 text formats (and that doesn’t even include text alignment). If you add a few colors to the mix - for example, to highlight link text - things become exponentially complicated. If your brand uses a font like Helvetica, you’d need to create Helvetica styles for headers (h1), subheads (h2) and paragraph text (p). Traditionally, text styles tie form, color and alignment together. In the meantime, here’s a glimpse at two of the major pain points it solves: Pain Point 1: Setting up text Styles When we release Figma Styles publicly, we’ll do a deep dive into our approach’s benefits. They honed in on the exact issues I struggled with, and I was excited by their solutions. Through previous user studies, he and the team surfaced key pain points with using styles in other tools.

You can enable your team’s Styles, and you’ll receive notifications when there are changes.Īfter joining Figma, I worked together with Rasmus, one of our designers, to finalize the interaction model for Styles. These styles will be accessible in your team library, to allow everyone to stay in sync with the most up-to-date versions. We took a modular approach, allowing you to apply text, fill, layout grid, effect and stroke styles separately. Styles will simplify your workflow and keep text and layer attributes consistent across all your documents. Today, we’re excited to announce a private beta for Figma Styles. Thanks to everyone who indicated interest! We’ll be following up soon. Edit: The Styles beta group is now closed.
