디자인 리소스 (Resources)
Ant Design에 관한 디자인 리소스와 도구 중 가치 있다고 생각하는 것들을 아래에 정리했어요. 아직도 계속 수집 중이고요. Sketch 심볼에 대한 피드백은 여기에 남길 수 있어요.
출처: 문서
본문
디자인 리소스 (Design Resources)
- Sketch Symbols
- https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg
- Desktop용 Sketch Symbols
- https://github.com/ant-design/ant-design/releases/download/5.13.3/AntDesign5.0_UI.KIT_202401.sketch
- 공식
- Mobile Components
- https://gw.alipayobjects.com/zos/basement_prod/c0c3852c-d245-4330-886b-cb02ef49eb6d.svg
- Mobile용 Sketch Symbols 파일
- https://gw.alipayobjects.com/os/bmw-prod/d6266aef-25b7-4892-b275-ce214121831c.sketch
- 공식
- Ant Design Pro
- https://gw.alipayobjects.com/zos/basement_prod/5edc7f4d-3302-4710-963b-7b6c77ea8d06.svg
- 공통 템플릿과 페이지
- https://gw.alipayobjects.com/os/bmw-prod/22208f9d-f8c5-4d7c-b87a-fec290e96527.sketch
- 공식
- Ant Design Chart
- https://gw.alipayobjects.com/zos/basement_prod/a9dc586a-fe0a-4c7d-ab4f-f5ed779b963d.svg
- 차트용 Sketch Symbols
- https://gw.alipayobjects.com/os/bmw-prod/704968a5-2641-484e-9f65-c2735b2c0287.sketch
- 공식
- Kitchen
- https://gw.alipayobjects.com/zos/basement_prod/d475d063-2754-4442-b9db-5d164e06acc9.svg
- Sketch 플러그인 모음
- http://kitchen.alipay.com
- 공식
- Ant Design Landing
- https://gw.alipayobjects.com/zos/basement_prod/b443f4be-5116-49b7-873f-a7c8502b8f0e.svg
- Landing 템플릿
- https://landing.ant.design/docs/download-cn
- 공식
- AntUIKit
- https://www.antuikit.com/antuikit.svg
- Figma 디자인 시스템, 블록, 플로우 & 템플릿
- https://www.antuikit.com
- Figma Resources
- https://gw.alipayobjects.com/zos/basement_prod/7b9ed3f2-6f05-4ddb-bac3-d55feb71e0ac.svg
- 항상 최신 상태인 Ant Design Figma 리소스
- https://www.antforfigma.com
- Figma Open Source Library
- https://gw.alipayobjects.com/zos/basement_prod/7b9ed3f2-6f05-4ddb-bac3-d55feb71e0ac.svg
- 코드에 완전히 정확한 컴포넌트를 갖춘 무료 오픈소스 Figma 라이브러리
- https://www.figma.com/community/file/831698976089873405
- AntBlocks UI for Figma
- https://uploads-ssl.webflow.com/64dc925e7cb893427a5c9cdc/64e4610f7818dcc7501057ad_antblocks-ui-card-img.svg
- Ant Design 기반의 고품질·반응형·커스터마이즈 가능한 React 컴포넌트
- https://www.antblocksui.com/#figma
- Ruyi Design Assistant
- https://github.com/ant-design/ant-design/assets/507615/45201521-37d0-4360-b81e-a1260dedad7a
- Figma 플러그인. Antd 코드 컴포넌트 라이브러리로 디자인하고, 개발자에게 친숙한 컴포넌트 코드를 전달
- https://www.figma.com/community/plugin/1192146318523533547
- UI Kit for Adobe XD
- https://uploads-ssl.webflow.com/5ecbd337fe499992c9ed75ba/5f2a7a30f3e817085cec5ac9_ant-xd-svg.svg
- Desktop용 컴포넌트 라이브러리
- https://www.antforxd.com
- MockingBot
- https://cdn.modao.cc/logo_mockingbot.svg
- 풍부한 컴포넌트 리소스
- https://modao.cc/square/ant-design
- JiShi Design
- https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*dxzdQYWlmjMAAAAAAAAAAAAAARQnAQ
- JiShi Design의 전체 컴포넌트와 템플릿 사용
- https://js.design/antd
- MasterGo
- https://mastergo-local-default.oss-cn-beijing.aliyuncs.com/ant-design-mastergo.svg
- MasterGo의 전체 컴포넌트와 템플릿 사용
- https://mastergo.com/community/?utm_source=antdesign&utm_medium=link&utm_campaign=resource&cata_name=AntDesign
- Ant for Plasmic
- https://user-images.githubusercontent.com/7129/149994038-76214796-cd6a-4e80-b0a4-117e8edac050.png
- 이 React 비주얼 빌더에서 라이브 Ant 컴포넌트를 드래그/드롭하고 props를 조작하세요
- https://www.plasmic.app/ant-design
아티클 (Articles)
Ant Design 디자인 시스템 뒤에 숨은 이야기를 알고 싶으신가요? Ant Design을 어떻게 더 잘 적용할 수 있을까요? 아래에 잘 선별된 아티클을 확인해 볼 수 있어요. Ant Design 공식 칼럼을 팔로우하는 것도 환영해요. Ant Design, AntV 시각화, Kitchen 디자인 플러그인, B-side 제품 디자인, SaaS 제품 디자인, 자연스러운 상호작용, 성장 디자인, 지능형 디자인, 디자인 엔지니어링 등 Ant Design 디자인 시스템과 관련된 최신 공유와 토론을 찾을 수 있어요.
참고 자료 (Reference)
컴포넌트와 패턴을 설계할 때 영감을 주고 시간을 아껴 주며 어려움을 극복하게 해 준 책들을 아래에 정리해요. UI 디자인에 대해 더 알고 싶다면 이 멋진 디자인 시스템들을 추천해요: Fiori Design, Human Interface Guidelines, Lightning Design System, Material Design.
- About Face 4 #C7EBD6
- https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*GA-CRIRqKjgAAAAAAAAAAABkARQnAQ
- 디지털 제품과 시스템을 위한 인터랙션 디자인 가이드
- https://www.wiley.com/en-sg/About+Face%3A+The+Essentials+of+Interaction+Design%2C+4th+Edition-p-9781118766576
- Designing Web Interfaces #009C94
- https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KK2xSJu0M80AAAAAAAAAAABkARQnAQ
- 웹 인터페이스를 위한 모범 사례, 패턴과 원칙
- http://shop.oreilly.com/product/9780596516253.do
- Designing Interfaces #9489CF
- https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*slN2QpTvIs0AAAAAAAAAAABkARQnAQ
- 인터페이스 디자인 가이드라인
- https://www.amazon.com/Designing-Interfaces-Patterns-Effective-Interaction/dp/1449379702/ref=pd_sbs_14_t_1/131-2623973-6077764?_encoding=UTF8&pd_rd_i=1449379702&pd_rd_r=ebe12a8d-435f-474b-a593-72aadf26c45a&pd_rd_w=18rob&pd_rd_wg=bhRFl&pf_rd_p=5cfcfe89-300f-47d2-b1ad-a4e27203a02a&pf_rd_r=8V8CD0EE336ZZEG15DEN&psc=1&refRID=8V8CD0EE336ZZEG15DEN
- Non-Designer's Design Book, The, 4th Edition #FAF0CD
- https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*1HbNSIju7pEAAAAAAAAAAABkARQnAQ
- 좋은 디자인의 기본 원칙
- http://www.peachpit.com/store/non-designers-design-book-9780133966152
- The Design of Everyday Things #F8F3D1
- https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*4woBSLvOjfMAAAAAAAAAAABkARQnAQ
- 사람 중심 디자인 철학에 대하여
- https://jnd.org/the-design-of-everyday-things-revised-and-expanded-edition/
- Emotional Design #E8EEB4
- https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6ZQJQoKRORsAAAAAAAAAAABkARQnAQ
- 디자인에서 감성 요소의 역할 설명
- https://www.amazon.com/Emotional-Design-Love-Everyday-Things/dp/0465051367
- Web Form Design #C2DAED
- https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*VhhwRo7axKQAAAAAAAAAAABkARQnAQ
- 폼 디자인의 핵심
- https://rosenfeldmedia.com/books/web-form-design/
더 알아보기 (Learn more)
