hsleedevelop
hsleedevelop
hsleedevelop
  • 분류 전체보기 (22)
    • Develop (22)
      • CS (1)
      • iOS (7)
      • Swift (13)
      • SwiftUI (0)

최근 글

  • Xcode 14 빌드 속도 올리는 방법
    2023.01.29
    Xcode 14 빌드 속도 올리는 방법
  • 스토리보드, XIB Inspectable에 enum 연동하⋯
    2023.01.29
  • M1 ARM-64 Simulator 지원하지 않는 프레임워⋯
    2023.01.07
  • String에 HTML 링크 적용
    2023.01.07
  • Xcode 정의로 이동하지 않고 우측 에디터에서 보는 방법
    2022.11.13
    Xcode 정의로 이동하지 않고 우측 에디터에서 보는 방법

인기 글

  • [iOS][Swift] WiFi AP 목록 스캔 또는 장치⋯
    2022.08.28
  • Figma 자동 익스포트 for Xcode, Android⋯
    2022.08.28
    Figma 자동 익스포트 for Xcode, Android⋯
  • Failed to uninstall gitlab-runne⋯
    2022.09.16
    Failed to uninstall gitlab-runne⋯
  • iOS 메모리 사용량 파헤치기
    2022.09.11
  • Xcode 14 빌드 속도 올리는 방법
    2023.01.29
    Xcode 14 빌드 속도 올리는 방법

태그

  • XIB Inspectable
  • 시뮬레이터
  • Simulator
  • html
  • excldue
  • KingFisher에서 SVG 이미지 다운로드하는 방법
  • Xcode 정의로 이동하지 않고 우측 에디터에서 보는 방법
  • Xcode Build
  • Xcode 정의
  • Xcode
  • SwiftUI 상에서 HTML 출력과 Link
  • ios localization
  • Xcode 빌드
  • SVG 다운로드
  • 스위프트
  • enum 연동하는 방법
  • Swift
  • Xcode 14 빌드 속도 올리는 방법
  • SVG download
  • Xcode 베젤
  • Kingfisher SVG
  • architecturel
  • xcode 꿀팁
  • CSS 적용하는 방법
  • Xcode Build 실행 시 명확하게 표시하는 방법
  • Link
  • Xcode bezel
  • Jump to definition
  • xcode 팁
  • Xcode Definition

최근 댓글

전체 방문자
1,465
오늘
2
어제
2

티스토리

hELLO · Designed By 정상우.
hsleedevelop

hsleedevelop

Figma 자동 익스포트 for Xcode, Android Studio
Develop/Swift

Figma 자동 익스포트 for Xcode, Android Studio

2022. 8. 28. 21:34
반응형

피그마에서는 아직까지 기존의 스케치 > 제플린 환경처럼 폰트, 이미지, 컬러를 개발툴 (AOS, iOS)에서 바로 사용할 수 있도록 익스포트 하는 기능이 제공되고 있지 않다. 물론 이미지를 익스포트 하는 기능은 훌륭하지만,,

 

컬러셋, 아이콘, 이미지, 타이포그래피에 대해

개발자가 한땀 한땀 각각의 컴포넌트를 직접 개발툴에서 만들거나 옮겨야 하기 때문에 적지 않은 공수와 노력이 든다.
또한 디자인 변경으로 인한 컴포넌트 업데이트 시에도 피그마에서 해당 컴포넌트를 찾아 변경된 값을 확인 후 개발툴에서 직접 수정해야 하므로 관리도 상당히 어렵고 사람이 직접 하므로 실수가 유발 될 수 있다.

 

이러한 이유로 피그마 커뮤니티 플러그인을 비롯해 유틸리티를 찾던 중 러시아 iOS 개발자가 만든 figma-export 라는 오픈 소스를 발견하여 몇일 간 디자이너와의 프로토타이핑을 거쳐 만족할 만한 결과를 얻었다. (지난 4월만 해도 스타 수 가 40중반이었는데 어느새 400이 넘었다.)

 

이제 이를 활용하여 컴포넌트를 활용한 디자인 시스템을 구현할 수 있게 된 것이다.

 

Design requirements

각 디바이스 플랫폼 별로 Color, Icon, Image, Typography를 사용할 경우 피그마 스타일의 description 필드에 각각 iOS, android, web을 명시하고 특정 컴포넌트를 디자이너가 개별적으로 사용 시에는 none으로 명시하여 퍼블리싱 되지 않게 설정해준다.

 

스타일과 컴포넌트는 반드시 Team Library로 퍼블리싱 해야함.
중요한 점은 팀 라이브러리로 익스포트하여 사용하기 위해서는 프로 버전이나 Organization 라이선스가 필요하다.

 

Colors

기본적으로 다크모드 지원 시 Figma 프로젝트에서 2개의 파일로 구성되어야 하며, 하나는 라이트 컬러 팔레트로 다른 하나는 다크 컬러 팔레트로 구성한다.

 

단일 파일로 구성할 때는 다크모드 컬러의 이름 뒤에 _dark 서픽스를 추가한다.
(suffix는 config에서 정의할수 있다.)

iOS를 위한 High Contrast 를 지원하게 될 경우는 총 네개의 파일이 필요할 수 있다.

 

Icons

아이콘 컴포넌트들은 Icons 로 명명된 프레임에 구성해야한다.
(또는 해당 프레임을 Config에서 정의한다. common.icons.figmaFrameName)
다크모드 지원 시 별도 파일로 분리해야한다. 컬러와 동일

 

Images

일러스트레이션 컴포넌트들은 Illustrations 로 명명된 프레임에 구성해야한다.
(또는 해당 프레임을 Config에서 정의한다. common.images.figmaFrameName)
다크모드 지원 시 별도 파일로 분리해야한다. 컬러와 동일

 

Typography

피그마 파일은 텍스트 스타일로 연결해야한다.

 

 

샘플 파일 링크
sample - [RTC Key] UI kit
light version - FigmaExport Example File [Light]
dark version - FigmaExport Example File [Dark]

 

반응형

'Develop > Swift' 카테고리의 다른 글

UserDefaults 모든 항목 출력, 경로, 리셋  (0) 2022.09.06
Advances in Collection View Layout  (0) 2022.09.04
[iOS][Swift] WiFi AP 목록 스캔 또는 장치 연결  (0) 2022.08.28
Swift 요약 1  (0) 2022.05.08
Swift Basics 2부  (0) 2022.05.08
    'Develop/Swift' 카테고리의 다른 글
    • UserDefaults 모든 항목 출력, 경로, 리셋
    • Advances in Collection View Layout
    • [iOS][Swift] WiFi AP 목록 스캔 또는 장치 연결
    • Swift 요약 1
    figma, figma android, figma xcode, figma-export, 피그마 익스포트, 피그마 추출
    hsleedevelop
    hsleedevelop
    iOS, Swift js, node js, react c, c++, .net ruby, sql
    댓글쓰기
    Advances in Collection View Layout
    다음 글
    Advances in Collection View Layout
    이전 글
    [iOS][Swift] WiFi AP 목록 스캔 또는 장치 연결

    티스토리툴바