By Dani Beaumont
The latest release of Adobe XD include some highly-requested, well-deserved improvements to type controls; with support for uppercase, lowercase, title case, and strikethrough. Let me show you this feature in action.
I have some content here on the canvas and I'd like to start editing the text. There's always two ways to select text on the canvas. One is to come in and just click once to select the entire block of text. Another is to double-click inside and subselect some a portion of the entire block. I'll start with the block selected, and I'm going to come here to the Properties Inspector down to the text area.
Now, if you're familiar with XD you probably recognize a lot of the text controls that we've had in the past. The new features are here towards the bottom where I have the ability to toggle on any of these text controls. So if I click on the first toggle here, it will turn on uppercase for the selected set that I have I can toggle by clicking a second time which is going to revert it to whatever the state of the text was before that toggle. I can come to the second one and toggle to lowercase. It's going to change all of the text to lowercase. I also have the ability to apply something known as title case which in essence capitalizes the first letter of every word in the block from there. I can keep that turned on if I'd like and then come to another toggle for strikethrough and strike through all of that text. So that's how I do it in bulk. If I wanted to come to a block of text in just make a selective change, I could come into a text block and double click to select it then double click once again on let's say an individual word or two words at a time with them selected. I can come in and set that strike through again for example, and then hit escape to step out of that block of text and make the change. Once I have any of these type overrides defined for a block of text.
I can always save that text out. As a character style and then apply it to large blocks of text that occurs. In other parts of my design. Also the nice part about this implementation is you don't have to worry — these controls are not only available in the design canvas, but they carry over to the desktop preview app to the mobile preview app and in the web browser for prototypes and design specs, in fact in design specs the specification for any type controls you might have applied will be included in what your developer sees as they proceed with the project.
I encourage you to give this new capability a try.
Whether you're emphasizing typography with uppercase text, crossing it out with strikethrough or adding footnotes with subscript and superscript, Adobe XD has several typography styling options available from the property inspector. Below the type selection live a series of icons representing the Adobe XD typography controls from upper and lower case, to strikethrough, super and subscript. Clicking these icons will enable the typography style on your text in Adobe XD.
