RedMadRobot / figma-export

Command line utility to export colors, typography, icons and images from Figma to Xcode / Android Studio project
MIT License
718 stars 114 forks source link

Running the exporter however its not inserting the generated code into the swift files #221

Closed sashensingh08 closed 6 months ago

sashensingh08 commented 8 months ago

Hi, I am currently running the project in an SPM package and im unable to get the exporter to write to my swift files...it gets all the icons into the assets .xcassets correctly.

when running the exporter I do get this

[17:01:46]: ▸ 2023-10-12T17:01:46+0100 info com.redmadrobot.figma-export : Writting files to Xcode project...
[17:01:47]: ▸ 2023-10-12T17:01:47+0100 error com.redmadrobot.figma-export : Unable to add some file references to Xcode project
[17:01:47]: ▸ 2023-10-12T17:01:47+0100 info com.redmadrobot.figma-export : Done!

But im not sure if this is an issue. Also when an asset is removed from Figma how do I get the exporter to remove it from .xcassets as well?

sashensingh08 commented 8 months ago

it seems this issue only happens when im trying to get s subset of icons of figma

this is my original command

"figma-export icons '*/32' -i figma-export.yaml"

but if I do

"figma-export icons -i figma-export.yaml"

then it works?

subdan commented 8 months ago

Could you please give me an access to your Figma project and figma-export.yaml file so I can reproduce the issue?

Unable to add some file references to Xcode project

It means that FigmaExport can't find Xcode project and target specified by xcodeprojPath and target properties. Please, check this properties.

sashensingh08 commented 8 months ago

Thanks for the reply. Unfortunately I can give you access to Figma since it's a company one. but here is the .yaml file

---
figma:
  # Identifier of the file containing light color palette, icons and light images. To obtain a file id, open the file in the browser. The file id will be present in the URL after the word file and before the file name.
  lightFileId: WximK7QBDMyS2Xyenm****

# [optional] Common export parameters
common:
  # [optional]
  colors:
    # [optional] RegExp pattern for color name validation before exporting. If a name contains "/" symbol it will be replaced by "_" before executing the RegExp
    nameValidateRegexp: '^([a-zA-Z_]+)$' # RegExp pattern for: background, background_primary, widget_primary_background
    # [optional] RegExp pattern for replacing. Supports only $n
    nameReplaceRegexp: 'color_$1'
    # [optional] Extract light and dark mode colors from the lightFileId specified in the figma params. Defaults to false
    useSingleFile: false
    # [optional] If useSingleFile is true, customize the suffix to denote a dark mode color. Defaults to '_dark'
    darkModeSuffix: '_dark'
  icons:
    nameValidateRegexp: '^([aA-z-0-9_~]+)_([0-9]{2})(\s?([aA-z0-9_~]+)?)$' # RegExp pattern for: ic_24_icon_name, ic_24_icon
    nameReplaceRegexp: 'dp_icon_$2_$1'
  images:
    # [optional]Name of the Figma's frame where image components are located
    figmaFrameName: Illustrations
    # [optional] RegExp pattern for image name validation before exporting. If a name contains "/" symbol it will be replaced by "_" before executing the RegExp
    nameValidateRegexp: '^(img)_([a-z0-9_]+)$' # RegExp pattern for: img_image_name
    # [optional] RegExp pattern for replacing. Supports only $n
    nameReplaceRegexp: 'image_$2'
    # [optional] Extract light and dark mode icons from the lightFileId specified in the figma params. Defaults to false
    useSingleFile: false
    # [optional] If useSingleFile is true, customize the suffix to denote a dark mode icons. Defaults to '_dark'
    darkModeSuffix: '_dark'
  # [optional]
  typography:
    # [optional] RegExp pattern for text style name validation before exporting. If a name contains "/" symbol it will be replaced by "_" before executing the RegExp
    nameValidateRegexp: '^[a-zA-Z0-9_]+$' # RegExp pattern for: h1_regular, h1_medium
    # [optional] RegExp pattern for replacing. Supports only $n
    nameReplaceRegexp: 'font_$1'

# iOS export parameters
ios:
  # Path to xcodeproj
  xcodeprojPath: "./Example.xcodeproj"
  # Xcode Target containing resources and corresponding swift code
  target: "UIComponents"
  # Absolute or relative path to the Assets.xcassets directory
  xcassetsPath: "./Sources/Depot/Resources/Assets.xcassets"
  # Is Assets.xcassets located in the main bundle?
  xcassetsInMainBundle: true
  # [optional] Is Assets.xcassets located in a swift package? Default value is false.
  xcassetsInSwiftPackage: false
  # [optional] When `xcassetsInSwiftPackage: true` use this property to specify a resource bundle name for Swift packages containing Assets.xcassets (e.g. ["PackageName_TargetName"]). This is necessary to avoid SwiftUI Preview crashes.
  resourceBundleNames: []
  # [optional] Add @objc attribute to generated properties so that they are accessible in Objective-C. Defaults to false
  addObjcAttribute: false

  # [optional] Parameters for exporting colors
  colors:
    # How to export colors? Use .xcassets and UIColor extension (useColorAssets = true) or extension only (useColorAssets = false)
    useColorAssets: true
    # [required if useColorAssets: True] Name of the folder inside Assets.xcassets where to place colors (.colorset directories)
    assetsFolder: Colors
    # Color name style: camelCase or snake_case
    nameStyle: camelCase
    # [optional] Absolute or relative path to swift file where to export UIKit colors (UIColor) for accessing from the code (e.g. UIColor.backgroundPrimary)
    colorSwift: "./Sources/UIColor+extension.swift"
    # [optional] Absolute or relative path to swift file where to export SwiftUI colors (Color) for accessing from the code (e.g. Color.backgroundPrimary)
    swiftuiColorSwift: "./Source/Color+extension.swift"
    # [optional] If true and a color style name contains symbol "/" then "/" symbol indicates grouping by folders, and each folder will have the "Provides Namespace" property enabled. Defaults to `false`.
    groupUsingNamespace: false

  # [optional] Parameters for exporting icons
  icons:
    # Image file format: pdf or svg
    format: pdf
    # Name of the folder inside Assets.xcassets where to place icons (.imageset directories)
    assetsFolder: Icons
    # Icon name style: camelCase or snake_case
    nameStyle: snake_case
    # [optional] Absolute or relative path to swift file where to export icons (SwiftUI’s Image) for accessing from the code (e.g. Image.illZeroNoInternet)
    swiftUIImageSwift: "./Sources/Depot/Utilities/Image+Icons.swift"
    # [optional] Absolute or relative path to swift file where to generate extension for UIImage for accessing icons from the code (e.g. UIImage.ic24ArrowRight)
    imageSwift: "./Sources/Depot/Utilities/UIImage+Icons.swift"

  # [optional] Parameters for exporting images
  images:
    # Name of the folder inside Assets.xcassets where to place images (.imageset directories)
    assetsFolder: Illustrations
    # Image name style: camelCase or snake_case
    nameStyle: camelCase
    # [optional] An array of asset scales that should be downloaded. The valid values are 1, 2, 3. The deafault value is [1, 2, 3].
    scales: [1, 2, 3]
    # [optional] Absolute or relative path to swift file where to export images (SwiftUI’s Image) for accessing from the code (e.g. Image.illZeroNoInternet)
    swiftUIImageSwift: "./Source/Image+extension_illustrations.swift"
    # [optional] Absolute or relative path to swift file where to generate extension for UIImage for accessing illustrations from the code (e.g. UIImage.illZeroNoInternet)
    imageSwift: "./Example/Source/UIImage+extension_illustrations.swift"

  # [optional] Parameters for exporting typography
  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 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/"
    # Typography name style: camelCase or snake_case
    nameStyle: camelCase

It means that FigmaExport can't find Xcode project and target specified by xcodeprojPath and target properties. Please, check this properties.

Ah so actually we have a separate SPGKit package for our design assets, so it does not have an Xcode project, I kept the defaults here since its not optional but im guessing this could be causing the issue?

Just more on our specific use case, our figma file contains 24 and 32 versions for the icons I was trying only to grab the 32 versions....the original command works without trying to get a specific version works but pulls everything....im wondering if I could then write another script ontop of figma-export to manually remove the assets and change the generated file

subdan commented 6 months ago

Just more on our specific use case, our figma file contains 24 and 32 versions for the icons I was trying only to grab the 32 versions....the original command works without trying to get a specific version works but pulls everything....im wondering if I could then write another script ontop of figma-export to manually remove the assets and change the generated file

You can specify pattern to export only 32-px icons — https://github.com/RedMadRobot/figma-export#arguments

subdan commented 6 months ago

Ah so actually we have a separate SPGKit package for our design assets, so it does not have an Xcode project, I kept the defaults here since its not optional but im guessing this could be causing the issue?

You must set xcassetsInSwiftPackage to true. https://github.com/RedMadRobot/figma-export/blob/master/CONFIG.md

subdan commented 6 months ago

Also when an asset is removed from Figma how do I get the exporter to remove it from .xcassets as well?

Just run figma-export command again. It will remove assets before exporting.

sashensingh08 commented 6 months ago

thanks @subdan its all working now :)