GO FURTHER, FASTER: Try the Swift Career Accelerator today! >>

How to transfer the line parameter from figma to swiftUI layout?

Forums > SwiftUI

Good day everyone. Guys who faced layout in figma? Tell me how to interpret the parameter "line height" in the layout of the swiftUI? Something didn't google anything. 🙄 Picking this modifier .lineSpacing(120)

Just picked this answer. But not working. Answer by Ole-Kristian

let font = UIFont(name: "SomeFont", size: 16)!
return Text("Some Text")
    .font(.custom("SomeFont", size: 16))
    .lineSpacing(32 - font.lineHeight)
    .padding(.vertical, (32 - font.lineHeight) / 2)

3      

Figma website says that - "Every Text layer will now calculate Line height percentage, as a percentage of the Font Size".

So I can calculate the height of one line as...

let calcPrecent: CGFloat = (fontSize / 100) * 120    //Line height 120  (size height from Figma)
let padding: CGFloat = (calcPrecent - size) / 2
Text("Example")
  .padding(.vertical, padding)

But I didn’t find the information on how .lineSpacing() is calculated in swiftUI.

2      

Guys, who knows the solution? Tell? I've already tried everything!

2      

Hi @Steven_Kirke,

Font size determines how big or small the letters are, while line height controls the vertical space between the lines of text.

The line-height is a value representing the height a font need to get correctly rendered in all its own glyphs, plus some blank space between the lines.

You can imagine a frame wrapping/surrounding the rendered text as the line-height frame.

Said that, on some platforms you are allowed to handle the value of font line-height, for example you can do it for web using CSS to get the font rendered in the browser following the required value, Android also allows to set this value for fonts.

In iOS, this is not possible, at least not "directly". You can check in the documentation of UIFont here and verify this is a read only property. It can seems a limitation, but it has sense to me. The reason it has sense is that I have often seen designers ask you to use a line-height value too small that was producing as final result text having the accents overlapping with the bottom of the line just above.

Anyway, Apple provide us a specific SwiftUI modifier to increase the space between multiple lines, the .lineSpacing() you can find some documentation here.

This will works only in case you want to increase spacing because the modifier doesn't accept a negative value.

The value you must pass to the lineSpacing modifier is expressed in pixels as CGFloat. So that assuming you can see a line-height value in Figma declared as 24.0 while the font used is an Avenir Next sized as 16.0; you should retrieve the embedded lineHeight value from the font, you can read it accessing the lineHeight property from the instance of UIFont configured as Avenir Next in size 16. You can do it like that just as an example:

let avenirNext16 = UIFont(name: "Avenir Next", size: 16)!
print(avenirNext16.lineHeight)

You will see the lineHeight for the Avenir Next font in size 16 is approximatively 21.86. Now you can calculate the additional lineSpacing value subtracting the original lineHeight (21.86) from the expected final lineHeight (24.0)

let desiredLineHeight = 24.0
let originalLineHeight = avenirNext16.lineHeight // 21.86
let spacingValue = desiredLineHeight - originalLineHeight // 2.14

This is the value you need to pass to lineSpacing modifier to get the exact result as by Figma design.

   

Hacking with Swift is sponsored by try! Swift Tokyo.

SPONSORED Ready to dive into the world of Swift? try! Swift Tokyo is the premier iOS developer conference will be happened in April 9th-11th, where you can learn from industry experts, connect with fellow developers, and explore the latest in Swift and iOS development. Don’t miss out on this opportunity to level up your skills and be part of the Swift community!

Get your ticket here

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.