에셋 편리하게 Export하는 방법

개요

  • DesignSystem에 있는 에셋 관리의 편의성을 높이기 위해, iOS는 아래의 과정을 통해 코드를 자동으로 생성하고자 합니다.

준비

  1. figma에서 에셋을 다운받습니다
    1. Icon은 export 기능을 통해 내보냅니다.
    2. Color는 plugin Color2Code를 이용하여 내보냅니다.

    image.png

  2. brew 명령어를 통해 swiftgen을 설치합니다(brew 이외에 다양한 방법으로 설치할 수 있으니 참고)
    1. brew install swiftgen
    2. (주의) terminal이 Rosetta이면 안됩니다. brew가 M1 기반으로 설치되는 것을 권장합니다.
  3. 프로젝트 디렉토리 위치에서 아래 명령어를 터미널에서 실행합니다
    1. make swiftgen

  4. UWColor, UWICon 코드 생성 완료

    image.png

참고

  • 현재 swiftgen 파일은 swiftgen-colors.yml과 swiftgen-icons.yml 두개로 구성 되어 있습니다.
    • 이는 Icon, color를 각각 내보내기 위함이며 현재는 asset의 계층구조를 따르지 않고 flat하게 내보내어 호출할 때 길지 않도록 했습니다.
      input_dir: 리소스 위치
  output_dir: 프로젝트명/Modules/DesignSystem/Sources/DesignSystem/Asset/Color/
    
  xcassets:
    # 🎨 색상 전용 설정
    inputs:
      - Colors.xcassets
    outputs:
      - templateName: swift5
        params:
          forceProvidesNamespaces: false
          enumName: UWColor
          publicAccess: true
        output: UWColor.swift
    

      input_dir: 리소스 위치
  output_dir: 프로젝트명/Modules/DesignSystem/Sources/DesignSystem/Asset/Icon/
    
  xcassets:
    # 🖼️ 아이콘 전용 설정
    inputs:
      - Icons.xcassets
    outputs:
      - templateName: swift5
        params:
          forceProvidesNamespaces: false
          enumName: UWIcon
          publicAccess: true
        output: UWIcon.swift

  • 두 개의 swiftgen 명령어 한번에 실행하기 위해 Makefile에 명령어를 추가로 작성했습니다.

      swiftgen:
  	swiftgen config run --config swiftgen-colors.yml
  	swiftgen config run --config swiftgen-icons.yml