Fueled typography

CONFIG.md

@@ -149,14 +149,14 @@ ios:
   typography:
     # [optional] Absolute or relative path to swift file where to export UIKit fonts (UIFont extension).
     fontSwift: "./Source/UIComponents/UIFont+extension.swift"
-    # [optional] Absolute or relative path to swift file where to generate LabelStyle extensions for each style (LabelStyle extension).
-    labelStyleSwift: "./Source/UIComponents/LabelStyle+extension.swift"
+    # [optional] Absolute or relative path to swift file where to generate TextStyle extensions for each style (TextStyle extension).
+    textStyleSwift: "./Source/UIComponents/TextStyle+extension.swift"
     # [optional] Absolute or relative path to swift file where to export SwiftUI fonts (Font extension).
     swiftUIFontSwift: "./Source/View/Common/Font+extension.swift"
-    # Should FigmaExport generate UILabel for each text style (font)? E.g. HeaderLabel, BodyLabel, CaptionLabel
-    generateLabels: true
-    # Relative or absolute path to directory where to place UILabel for each text style (font) (Requred if generateLabels = true)
-    labelsDirectory: "./Source/UIComponents/"
+    # Should FigmaExport generate TextStyles for each text style (font)? E.g. Header, Body, Caption
+    generateTextStyles: true
+    # Relative or absolute path to directory where to place TextStyles for each text style (font) (Required if generateTextStyles = true)
+    textStylesDirectory: "./Source/UIComponents/"
     # Typography name style: camelCase or snake_case
     nameStyle: camelCase
 

Examples/Example/UIComponents/Source/Typography/LabelStyle.swift

@@ -1,3 +1,4 @@
+//  swiftlint:disable all
 //
 //  The code generated using FigmaExport — Command line utility to export
 //  colors, typography, icons and images from Figma to Xcode project.

Examples/Example/UIComponents/Source/Typography/UIFont+extension.swift

@@ -1,3 +1,4 @@
+//  swiftlint:disable all
 //
 //  The code generated using FigmaExport — Command line utility to export
 //  colors, typography, icons and images from Figma to Xcode project.
@@ -10,43 +11,31 @@
 import UIKit
 
 public extension UIFont {
-
-    static func body() -> UIFont {
-        customFont("PTSans-Regular", size: 16.0, textStyle: .body, scaled: true)
-    }
-
-    static func caption() -> UIFont {
-        customFont("PTSans-Regular", size: 14.0, textStyle: .footnote, scaled: true)
-    }
-
-    static func header() -> UIFont {
-        customFont("PTSans-Bold", size: 20.0)
-    }
-
-    static func largeTitle() -> UIFont {
-        customFont("PTSans-Bold", size: 34.0, textStyle: .largeTitle, scaled: true)
-    }
-
-    static func uppercased() -> UIFont {
-        customFont("PTSans-Regular", size: 14.0)
-    }
+    static let body: UIFont = customFont("PTSans-Regular", size: 16.0, textStyle: .body)
+    static let caption: UIFont = customFont("PTSans-Regular", size: 14.0, textStyle: .footnote)
+    static let header: UIFont = customFont("PTSans-Bold", size: 20.0)
+    static let largeTitle: UIFont = customFont("PTSans-Bold", size: 34.0, textStyle: .largeTitle)
+    static let uppercased: UIFont = customFont("PTSans-Regular", size: 14.0)
 
     private static func customFont(
         _ name: String,
         size: CGFloat,
-        textStyle: UIFont.TextStyle? = nil,
-        scaled: Bool = false) -> UIFont {
-
+        textStyle: UIFont.TextStyle? = nil
+    ) -> UIFont {
         guard let font = UIFont(name: name, size: size) else {
             print("Warning: Font \(name) not found.")
             return UIFont.systemFont(ofSize: size, weight: .regular)
         }
-        
-        if scaled, let textStyle = textStyle {
+
+        if let textStyle {
             let metrics = UIFontMetrics(forTextStyle: textStyle)
             return metrics.scaledFont(for: font)
-        } else {
-            return font
         }
+
+        return font
+    }
+
+    internal func lineSpacing(lineHeight customLineHeight: CGFloat) -> CGFloat {
+        max(0, customLineHeight - self.lineHeight)
     }
 }

Examples/Example/figma-export.yaml

@@ -61,13 +61,15 @@ ios:
 
   # Parameters for exporting typography
   typography:
-    # Path to directory where to place UIFont+extension.swift file
+    # Choose what font system you want to use SwiftUI or UIKit
+    fontSystem: UIKit
+    # Path to directory where to place UIFont+extension.swift file required for both SwiftUI and UIKit
     fontSwift: "./UIComponents/Source/Typography/UIFont+extension.swift"
     # [optional] Absolute or relative path to swift file where to generate LabelStyle extensions for each style (LabelStyle extension).
     labelStyleSwift: "./UIComponents/Source/Typography/LabelStyle+extension.swift"
-    # Will FigmaExport generate UILabel for each text style (font) e.g. HeaderLabel, BodyLabel, CaptionLabel.
-    generateLabels: true
-    # Path to directory where to place UILabel for each text style (font) (Required if generateLabels = true)
-    labelsDirectory: "./UIComponents/Source/Typography"
+    # Should FigmaExport generate TextStyles or Labels (based on fontSystem) for each text style (font)? E.g. Header, Body, Caption
+    generateStyles: true
+    # Relative or absolute path to directory where to place TextStyles or Labels (based on fontSystem) for each text style (font) (Required if generateStyles = true)
+    stylesDirectory: "./UIComponents/Source/Typography"
     # Typography name style: camelCase or snake_case
     nameStyle: camelCase

Examples/ExampleSwiftUI/figma-export.yaml

@@ -65,7 +65,7 @@ ios:
     fontSwift: "./ExampleSwiftUI/View/Common/UIFont+extension.swift"
     # [optional] Absolute or relative path to swift file where to export SwiftUI fonts (Font extension).
     swiftUIFontSwift: "./ExampleSwiftUI/View/Common/Font+extension.swift"
-    # Will FigmaExport generate UILabel for each text style (font) e.g. HeaderLabel, BodyLabel, CaptionLabel.
-    generateLabels: false
+    # Should FigmaExport generate TextStyles for each text style (font)? E.g. Header, Body, Caption
+    generateTextStyles: true
     # Typography name style: camelCase or snake_case
     nameStyle: camelCase

README.md

@@ -204,13 +204,15 @@ If name of an image contains idiom at the end (e.g. ~ipad), it will be exported
 #### Typography
 
 When your execute `figma-export typography` command `figma-export` generates 3 files:
-1. `UIFont+extension.swift` extension for UIFont that declares your custom fonts. Use these fonts like this `UIFont.header()`, `UIFont.caption1()`.
-2. `LabelStyle.swift` struct for generating attributes for NSAttributesString with custom lineHeight and tracking (letter spacing).
-3. `Label.swift` file that contains base Label class and class for each text style. E.g. HeaderLabel, BodyLabel, Caption1Label. Specify these classes in xib files on in code.
+1. `TextStyle.swift` struct for generating TextStyles for SwiftUI with custom line spacing, kerning (letter spacing) and text case.
+2. `TextStyle+extension.swift` extension including all the custom TextStyles from the Figma file.
+3. `Font+extension` extension for Font that declares your custom fonts.
+4. `UIFont+extension.swift` extension for UIFont that declares your custom fonts. Mainly used to get the default font lineHeight.
 
 Example of these files:
-- [./Examples/Example/UIComponents/Source/Typography/Label.swift](./Examples/Example/UIComponents/Source/Typography/Label.swift)
-- [./Examples/Example/UIComponents/Source/Typography/LabelStyle.swift](./Examples/Example/UIComponents/Source/Typography/LabelStyle.swift)
+- [./Examples/Example/UIComponents/Source/Typography/TextStyle.swift](./Examples/Example/UIComponents/Source/Typography/TextStyle.swift)
+- [./Examples/Example/UIComponents/Source/Typography/TextStyle+extension.swift](./Examples/Example/UIComponents/Source/Typography/TextStyle+extension.swift)
+- [./Examples/Example/UIComponents/Source/Typography/Font+extension.swift](./Examples/Example/UIComponents/Source/Typography/Font+extension.swift)
 - [./Examples/Example/UIComponents/Source/Typography/UIFont+extension.swift](./Examples/Example/UIComponents/Source/Typography/UIFont+extension.swift)
 
 ### Android
@@ -430,11 +432,10 @@ Custom Stencil templates for colors and images must have the following names:
 - Image+extension.swift.stencil for SwiftUI images
 
 Custom Stencil templates for typography must have the following names:
-- Label.swift.stencil,
-- LabelStyle.swift.stencil,
-- LabelStyle+extension.swift.stencil,
+- TextStyle.swift.stencil,
+- TextStyle+extension.swift.stencil,
+- Font+extension.swift.stencil
 - UIFont+extension.swift.stencil
-- Font+extension.swift.stencil.stencil
 
 ##### Android
 
@@ -453,7 +454,7 @@ Custom Stencil templates must have the following names:
 #### iOS
 1. Add a custom font to the Xcode project. Drag & drop font file to the Xcode project, set target membership, and add font file name in the Info.plist file. [See developer documentation for more info.](https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app)<br><img src="images/fonts.png" width="400" />
 2. Run `figma-export typography` to export text styles
-3. Use generated fonts and labels in your code. E.g. `button.titleLabel?.font = UIFont.body()`, `let label = HeaderLabel()`.
+3. Use generated fonts and text styles in your code. E.g. `Text("Header").textStyle(.header)`.
 
 #### Android
 1. Place font file under the `res` directory of your module

Sources/FigmaExport/Input/Params.swift

@@ -1,5 +1,6 @@
 import Foundation
 import FigmaExportCore
+import XcodeExport
 
 extension NameStyle: Decodable {}
 
@@ -92,11 +93,13 @@ struct Params: Decodable {
         }
 
         struct Typography: Decodable {
+			let fontSystem: FontSystem?
             let fontSwift: URL?
-            let labelStyleSwift: URL?
+            let textStyleSwift: URL?
+			let labelStyleSwift: URL?
             let swiftUIFontSwift: URL?
-            let generateLabels: Bool
-            let labelsDirectory: URL?
+            let generateStyles: Bool
+            let stylesDirectory: URL?
             let nameStyle: NameStyle
         }
 

Sources/FigmaExport/Resources/iOSConfig.swift

@@ -118,14 +118,14 @@ ios:
   typography:
     # [optional] Absolute or relative path to swift file where to export UIKit fonts (UIFont extension).
     fontSwift: "./Source/UIComponents/UIFont+extension.swift"
-    # [optional] Absolute or relative path to swift file where to generate LabelStyle extensions for each style (LabelStyle extension).
-    labelStyleSwift: "./Source/UIComponents/LabelStyle+extension.swift"
+    # [optional] Absolute or relative path to swift file where to generate TextStyle extensions for each style (TextStyle extension).
+    textStyleSwift: "./Source/UIComponents/TextStyle+extension.swift"
     # [optional] Absolute or relative path to swift file where to export SwiftUI fonts (Font extension).
     swiftUIFontSwift: "./Source/View/Common/Font+extension.swift"
-    # Should FigmaExport generate UILabel for each text style (font)? E.g. HeaderLabel, BodyLabel, CaptionLabel
-    generateLabels: true
-    # Relative or absolute path to directory where to place UILabel for each text style (font) (Requred if generateLabels = true)
-    labelsDirectory: "./Source/UIComponents/"
+    # Should FigmaExport generate TextStyles for each text style (font)? E.g. Header, Body, Caption
+    generateTextStyles: true
+    # Relative or absolute path to directory where to place TextStyles for each text style (font) (Required if generateTextStyles = true)
+    textStylesDirectory: "./Source/UIComponents/"
     # Typography name style: camelCase or snake_case
     nameStyle: camelCase
 """#

Sources/FigmaExport/Subcommands/ExportTypography.swift

@@ -37,7 +37,8 @@ extension FigmaExportCommand {
                     nameStyle: typographyParams.nameStyle
                 )
                 let processedTextStyles = try processor.process(assets: textStyles).get()
-                logger.info("Saving text styles...")
+                let fontSystemString = typographyParams.fontSystem.map { " for \($0.rawValue)"} ?? ""
+                logger.info("Saving text styles\(fontSystemString)...")
                 try exportXcodeTextStyles(textStyles: processedTextStyles, iosParams: ios)
                 logger.info("Done!")
             }
@@ -62,17 +63,18 @@ extension FigmaExportCommand {
                 fontExtensionURL: iosParams.typography?.fontSwift,
                 swiftUIFontExtensionURL: iosParams.typography?.swiftUIFontSwift
             )
-            let labelUrls = XcodeTypographyOutput.LabelURLs(
-                labelsDirectory: iosParams.typography?.labelsDirectory,
-                labelStyleExtensionsURL: iosParams.typography?.labelStyleSwift
+            let styleUrls = XcodeTypographyOutput.StyleURLs(
+                directory: iosParams.typography?.stylesDirectory,
+                extensionsURL: iosParams.typography?.textStyleSwift
             )
             let urls = XcodeTypographyOutput.URLs(
                 fonts: fontUrls,
-                labels: labelUrls
+                styles: styleUrls
             )
             return XcodeTypographyOutput(
+                fontSystem: iosParams.typography?.fontSystem,
                 urls: urls,
-                generateLabels: iosParams.typography?.generateLabels,
+                generateStyles: iosParams.typography?.generateStyles,
                 addObjcAttribute: iosParams.addObjcAttribute,
                 templatesPath: iosParams.templatesPath
             )

Sources/XcodeExport/Model/XcodeTypographyOutput.swift

@@ -1,8 +1,41 @@
 import Foundation
 
+public enum FontSystem: String, Decodable {
+    case uiKit = "UIKit"
+    case swiftUI = "SwiftUI"
+
+    var styleExtensionStencilFile: String {
+        switch self {
+        case .swiftUI:
+            return "TextStyle+extension.swift.stencil"
+        case .uiKit:
+            return "LabelStyle+extension.swift.stencil"
+        }
+    }
+
+    var styleStencilFile: String {
+        switch self {
+        case .swiftUI:
+            return "TextStyle.swift.stencil"
+        case .uiKit:
+            return "LabelStyle.swift.stencil"
+        }
+    }
+
+    var styleFile: String {
+        switch self {
+        case .swiftUI:
+            return "TextStyle.swift"
+        case .uiKit:
+            return "LabelStyle.swift"
+        }
+    }
+}
+
 public struct XcodeTypographyOutput {
+    let fontSystem: FontSystem
     let urls: URLs
-    let generateLabels: Bool
+    let generateStyles: Bool
     let addObjcAttribute: Bool
     let templatesPath: URL?
 
@@ -18,40 +51,42 @@ public struct XcodeTypographyOutput {
         }
     }
 
-    public struct LabelURLs {
-        let labelsDirectory: URL?
-        let labelStyleExtensionsURL: URL?
-        
+    public struct StyleURLs {
+        let directory: URL?
+        let extensionsURL: URL?
+
         public init(
-            labelsDirectory: URL? = nil,
-            labelStyleExtensionsURL: URL? = nil
+            directory: URL? = nil,
+            extensionsURL: URL? = nil
         ) {
-            self.labelsDirectory = labelsDirectory
-            self.labelStyleExtensionsURL = labelStyleExtensionsURL
+            self.directory = directory
+            self.extensionsURL = extensionsURL
         }
     }
 
     public struct URLs {
         public let fonts: FontURLs
-        public let labels: LabelURLs
-        
+        public let styles: StyleURLs
+
         public init(
             fonts: FontURLs,
-            labels: LabelURLs
+            styles: StyleURLs
         ) {
             self.fonts = fonts
-            self.labels = labels
+            self.styles = styles
         }
     }
 
     public init(
+        fontSystem: FontSystem? = .swiftUI,
         urls: URLs,
-        generateLabels: Bool? = false,
+        generateStyles: Bool? = false,
         addObjcAttribute: Bool? = false,
         templatesPath: URL? = nil
     ) {
+        self.fontSystem = fontSystem ?? .swiftUI
         self.urls = urls
-        self.generateLabels = generateLabels ?? false
+        self.generateStyles = generateStyles ?? false
         self.addObjcAttribute = addObjcAttribute ?? false
         self.templatesPath = templatesPath
     }

Sources/XcodeExport/Resources/Font+extension.swift.stencil

@@ -1,16 +1,7 @@
 {% include "header.stencil" %}
 import SwiftUI
 
-public extension Font {
-{% for textStyle in textStyles %}{% if textStyle.supportsDynamicType %}
-    static func {{ textStyle.name }}() -> Font {
-        if #available(iOS 14.0, *) {
-            return Font.custom("{{ textStyle.fontName }}", size: {{ textStyle.fontSize }}, relativeTo: .{{ textStyle.type }})
-        } else {
-            return Font.custom("{{ textStyle.fontName }}", size: {{ textStyle.fontSize }})
-        }
-    }{% else %}
-    static func {{ textStyle.name }}() -> Font {
-        Font.custom("{{ textStyle.fontName }}", size: {{ textStyle.fontSize }})
-    }{% endif %}{% endfor %}
+public extension Font {{ '{' }}{% for textStyle in textStyles %}{% if textStyle.supportsDynamicType %}
+    static let {{ textStyle.name }} = Font.custom("{{ textStyle.fontName }}", size: {{ textStyle.fontSize }}, relativeTo: .{{ textStyle.type }}){% else %}
+    static let {{ textStyle.name }} = Font.custom("{{ textStyle.fontName }}", size: {{ textStyle.fontSize }}){% endif %}{% endfor %}
 }