A pack from Double Glitch with a collection of pre-made text effects that you can apply to your designs with just a few clicks. Reminds me of the good ol’ days of downloadable Photoshop actions. While the pack is commercial, I suggest checking out a free demo in the Community and watching a screencast.
My guess is we’ll see hanging punctuation in the wild more often now. (Good luck, developers.)
6/32 Hanging punctuation
— Figma (@figma) March 28, 2023
Preserve the flow of your text by letting punctuation, like quotation marks, hang outside of the text box. pic.twitter.com/xheJmZsYCa
The timing of this release is impeccable — just a couple of months ago WebKit added support for leading-trim CSS property to Safari Technology Preview (although other browsers are not rushing). For a deeper dive into why it’s important, see Leading-Trim: The Future of Digital Typesetting by Ethan Wang from Microsoft.
4/32 Leading trim
— Figma (@figma) March 28, 2023
Align and style your text just the way you want it by trimming that extra spacing. pic.twitter.com/ltSLeZXTzm
Dan Hollick with a fascinating thread on an optimal x-height size and a visual arc.
Why are some typefaces harder to read than others at the same font-size?
— Dan Hollick 🇿🇦 (@DanHollick) March 16, 2023
Well, it has a lot to do with x-height but of course it's a bit more complicated than that: ↓ pic.twitter.com/QElNG1aq7q
Along with its basic built-in spellchecker, Figma introduced a new API opening the door to more advanced tools. SpellCheck is a commercial plugin offering a bunch of features, like checking an entire project, building a personal dictionary, detecting ”Lorem Ipsum”, auto-correcting typos, and supporting multiple languages.
Trim text elements by nesting them within frames to remove space above capital letters and below the baseline. This removes the bounding box and makes text behave as every other element in your layout. See also this thread by Roman Shamin on how font metrics leading to equal space above and below the text can make digital design and development easier.
Miguel with a few useful shortcuts for adjusting font size, weight, letter spacing, and line height.
Happy Monday! Here are some some great shortcuts when deep in the weeds of type exploration in @figma.
— miggity miggity mac (@miggi) August 1, 2022
Easily adjust font size, weight, letter spacing and line height using modifier keys and the <, > symbols. On Windows, swap out "alt" for "⌥" and "ctrl" for "⌘"#figmatip pic.twitter.com/byFfkVWUMe
Text alignment shortcuts (⌘-⌥-L for left, ⌘-⌥-T for center, ⌘-⌥-R for right) also work when you apply them inside the text box.
Free Google Font pairing and color palette suggestions.
Rasmus Andersson shows how to make a simple font in Figma.
Sunday funday: Make your own font in @Figma.
— Rasmus Andersson (@rsms) June 5, 2022
Copy this file to get started: https://t.co/e9SyhPZpqL pic.twitter.com/rM6ctpKB3h
“Check out our nine Google Fonts pairings and start using them in your design projects. The pairings are hand-picked from Google Fonts catalog and open-sourced for everyone to use.”
“Tune in to hear Clara, Amanda, and Qi walk through how to get started and unlock more font styles. From optical sizing to slant, learn how variable fonts give you more design control and expression.”
An interview with Thierry Blancpain, co-founder of Grilli Type, one of the font foundries that were a part of Figma’s variable fonts beta.
Another great shortcut from Miggie to avoid going into the advanced type settings menu — click on the “Fixed size” icon while holding Option (Alt) to enable truncated text. (With so much free space to the right, I wonder what’s the justification for hiding this option in the menu.)
Option (alt) + click on 'Fixed' text to convert text field to have truncate text behavior in @figma. #figmatip pic.twitter.com/aDhkDL7b3j
— Miggi (@miggi) May 19, 2022
Figma built a fantastic interactive page showing great possibilities provided by variable fonts and how to use them in Figma. It’s been a year since Toni Gemayel built the Variable Fonts plugin, and I’m happy it finally became a native feature.
Dylan Field shared three steps that Figma takes to become a more global company. First, Figma incorporated in Japan, set up an office in Tokyo, and started working on localizing Figma into Japanese. Second, they’re expanding in EMEA by opening offices in Paris and Berlin. And last but not least, Figma finally added support for RTL languages! Great news for designers working with Arabic, Hebrew, and Urdu who relied on 3rd-party plugins in the past. See thread by Lauren Budorick on why implementing RTL support was a huge undertaking.
A few typographic updates: the new default font size list (finally including 16px default on the web!), Inter replaced Roboto as a default font, and support for faux superscripts and subscripts that can be applied to any font — check out Tom Lowry’s behind the scenes deep dive for juicy details.
If the screenshot is real, this is an exciting rumor!
#Figma is adding the support of variable fonts! pic.twitter.com/Poelisk1HK
— Nima Owji (@nima_owji) January 8, 2022
Great article by Christine Vallaure on improving accessibility by using relative font sizes in CSS, and how to work around pixel-based sizes in Figma. While I always use a combination of rem and em units, I wasn’t familiar with the 62.5% CSS hack or that units can be switched during hand-off in Zeplin. Very cool!
You can now mix different text sizes in the same text box, sticky note, or shape.