gridaco/ui-dataset

A pre labelled dataset for ui element / layout detection

ui-dataset

A pre labelled dataset for ui element / layout detection

What do we offer?

• More than 20,000+ realworld application screenshots.
• More than 100,000+ labelled buttons preset with tons of variants
• More than 10,000 NLP tokens text classification used in ui designs
• Open figma source maintained by bridged.xyz

Labeled source

Labeled source available here

Contributing

contact current collaborator for design file access and contributing.

Labeling standard

It's labelling terminology and definition is based on Reflect design system.

UI Dataset Generator

UI Dataset generator plugin based on reflect is available at assistant with reflect-ui-generator

Tools

• ui labeller tool
• ui crawler tool

Terms

If you are a company / individual using this dataset for your own model, you must specify this origin project to your own. else, we will strongly file a legal issue about license usage.

I'm looking for the model

The very model trained and officially maintianed is available with context engine

Disclaimer

The origin image labelled in this dataset, the origin image might be licensed it self, as noticed. The action of "labelling" and "label" is done by the community, taking no authority, free to use.

Related Projects

• gridaco/figma-archives

ui-dataset's Issues

NavBars: 확장된 네비게이션바는 어디까지 인정될까요?

이런 경우는 상단 전체를 네비게이션바 로 라벨링 해야할까요?

Accordion: iOS의 설정앱 같은 경우는 아코디언 인가요?

누르면 확장되는 것이 아코디언인데,
실제로 iOS앱 대부분은 누르면 페이지를 이동시키고 있습니다.
이 경우도 아코디언이라 봐야하는 것일까요?

Checkboxes: iOS에서는 체크박스가 선호되지 않는 문제가 있습니다.

iOS 스크린샷이라 그런지.,.. 애플에서 이런 경우를 대부분 Reject하는 듯 합니다.
체크박스는 정말 꼭 필요한 경우에만 보이고 있습니다.

https://material.io/design/platform-guidance/cross-platform-adaptation.html#cross-platform-guidelines

[Select Star] 하단 탭바는 버튼이 아닙니다.

위의 영역은 Bottom Tab Bar 이며 버튼이 아니라 제외했습니다.

https://docs.google.com/spreadsheets/d/1I6A-WmaPK0Yj_bOYuhuhoLqcAvFcqUp2ofaK9ysp3bo/edit?disco=AAAALhIjE7g

NavBars: 검색바는 NavBars로 봐야하는 것일까요?

상단에 검색만 있는 경우가 종종 있습니다.

[discussion/button] Buttons: Chips or Button? (when containing avatar)

Buttons: 하단의 Add cards는 버튼일까요?

하단의 Footer 전체를 액션으로 처리하는 앱이 종종 있습니다.
이 경우 하단 푸터 전체를 버튼으로 봐야할까요? 아니면 그냥 넘어가야 할까요?

General: 박스의 크기가 정확하게 똑같아야 할까요?

예를 들어 작은 아바타의 경우, 같은 크기의 박스를 그리는 것은 현실적으로 어렵습니다. (Figma도 아니고..)

Buttons: 텍스트 버튼 아이콘 버튼이 같이 있는 경우 라벨링은 어떻게 할까요?

현재 기준으로는 아이콘 Only 버튼은 라벨링하지 않고 있는데,
이런 식으로 한쪽에는 텍스트버튼, 한쪽에는 아이콘 버튼이 있는 경우가 종종 있네요

[discussion/button] Buttons: When if buttons inside dialog/modal -> should it be considered as button?

모달이나 Sheet 안에 버튼들도 일단 버튼으로 라벨링을 하는 것이 맞을까요?

Pagenation은 아예 등장하질 않습니다..

600개를 넘게 라벨링하면서 페이지네이션은 아예 보이질 않습니다.
모바일에서는 사용하기 어려운 UI라.. 끝까지 안나올 것 같은 생각이 듭니다. ;;;;

Navbar: navigation 라벨링시 주의할 점

하단에 내비게이션 바가 있는 경우를 라벨링하는 경우가 있는데,
하단바 라벨링은 제외해주세요. 별도의 컴포넌트로 라벨링할 생각입니다 :)

How do I get this dataset ？

How do I get this dataset，use design file generate？

[discussion/button] Buttons: Text Button or Link?

링크<a/> 와 텍스트 only <button>은 한끗차이라서 맥락으로 이것이 버튼인지 아니면 링크인지를 구분해야 할 것 같습니다.
제 의견은 텍스트 only 버튼은 기본적으로는 라벨링하지 않고, 일부 예외를 가이드에 넣어두면 어떨까 합니다.

NavBars 내의 button

NavBars 내에 버튼이 있는 경우 (<, X, Done, More 등)
NavBars도 라벨링하고, 개별 버튼들도 Buttons로 라벨링 하면 되는거 맞을까요?

Buttons : 다음 두가지 항목은 button으로 봐야할까요?

toggle 은 별도의 컴포넌트로 치는걸까요? button에 들어갈까요?