피그마
제공된 라이브러리에 있는 TDS 컴포넌트로 디자인하는 것을 권장해요.
UI 스타일 개발에 신경쓰지 않고 개발 문서에 있는 코드를 토대로 빠르게 개발할 수 있어요.
라이선스 안내
본 UI Kit을 사용함으로써, 본 UI Kit에 포함된 라이선스의 조건에 동의하는 것으로 간주됩니다.
파일 직접 다운로드
UI Kit .fig 파일을 다운로드 후 라이브러리에 연결해 사용해요.
1. 파일 다운로드
여기서 파일을 다운로드 해주세요.
유의사항
UI Kit에 적용된 Semantic Color는 현재 버전의 코드와 일치하지 않아요.
2. 파일 가져오기
- 피그마를 실행한 후 상단 메뉴에서 Import 버튼을 클릭해요.
- 다운로드한
TDS_Mobile_for_Apps_in_Toss_(2602).fig파일을 선택하거나 창으로 드래그&드롭 해주세요. - 선택한 프로젝트 또는 Drafts 폴더 안에 파일이 생성돼요.
3. 라이브러리로 연결 (Publish)
- 불러온 파일을 열고, 왼쪽 패널에서 Assets 탭을 클릭해요.
- 오른쪽 상단( 📚 ) 아이콘을 클릭하여 Manage libraries 창을 열어주세요.
- 파일 옆의 Publish 버튼을 눌러 “이 파일을 라이브러리로 사용”하도록 설정해 주세요.
🔸 Publish 전: 다운로드 파일 안에서만 사용 가능
🔸 Publish 후: 다른 피그마 디자인 파일에서도 사용 가능
4. 컴포넌트 연결 후 사용
- 작업장 왼쪽 패널의 Asset 탭을 눌러주세요.
- TDS Library 파일이 활성화되어 있지 않다면 Add to file버튼을 클릭해주세요
- Assets 탭에서 버튼, 아이콘, 색상 등 필요한 컴포넌트를 드래그해서 사용해 주세요.
자동 업데이트는 불가해요
새 버전이 나오면, 다시 파일을 다운로드 해야해요.
새로운 버전이 나올 경우 공지해 드릴 예정이에요.
디자인할 때 꼭 지켜주세요
아래 항목들은 실제 개발과의 정합성을 맞추기 위해 특히 중요한 기준이에요.
- 모든 화면의 최상단에는 ❖ Navigation 컴포넌트를 반드시 사용해 주세요. 필수 컴포넌트가 이미 포함된 🌈 Screen을 꺼내 쓰면 더 편리해요.
- 가능한 한 오른쪽 패널에서만 속성을 조작해 주세요. 캔버스에서 직접 수정하면 코드에 없는 속성이 생겨 개발 시 구현이 어렵거나 시간이 오래 걸릴 수 있어요.
- 화면은 가로 375px 기준으로 작업해 주세요. 다른 크기도 가능하지만, ❖ Keypad 처럼 반응형을 지원하지 않는 컴포넌트가 있어 불편할 수 있어요.
- 화면 상단에는 ❖ Top, 그 아래에는 ❖ ListRow를 사용하면 대부분의 화면을 빠르게 구성할 수 있어요.
- 대부분의 TDS 컴포넌트에는 기본 패딩이 포함돼 있어서 gap 없이 붙여서 사용해도 자연스럽게 보여요. 예를 들어, ❖ ListRow에는 S, M, L, XL 네 가지 상하 패딩 옵션이 있어요. 그래도 간격 조절이 필요하다면 오토레이아웃의 gap을 사용해주세요.
자주 묻는 질문
개발자 커뮤니티로 문의해 주세요. 빠르게 도와드릴게요.
그래도 필요한 컴포넌트가 없다면 채널톡으로 요청해 주세요. 가능한 빠르게 검토할게요.
직접 디자인할 수도 있지만, 다른 TDS 컴포넌트와 어울리게 만들어 주세요.
각 컴포넌트에 이미 폰트가 적용돼 있어서 별도 설치 없이 사용할 수 있어요.
Missing Fonts로 보여도 실제 사용에는 문제가 없어요.
가능하지만 신중하게 판단해 주세요.
컴포넌트를 깨서 일부만 사용하면 개발 시 별도의 코드를 작성해야 해요.
가끔 발생하는 버그예요. 알맞은 색상으로 수정해서 사용해 주세요.
영어로 검색하거나 유니코드로 검색해 주세요.
피그마의 한계로 현재는 개선이 어려워요.
원칙적으로 가능하지만, 심사 과정에서 부적절하거나 사용성을 크게 해치는 경우에는 반려될 수 있어요.
다크 모드는 추후 지원할 예정이에요. 지금은 라이트 모드 기준으로만 디자인해 주세요.
개발자 커뮤니티로 언제든 문의해 주세요.