{"id":21969898,"url":"https://github.com/yamoo9/figma","last_synced_at":"2025-04-28T10:39:35.220Z","repository":{"id":49308094,"uuid":"242870779","full_name":"yamoo9/Figma","owner":"yamoo9","description":"Figma로 하는 디자인 맛보기 Class","archived":false,"fork":false,"pushed_at":"2020-08-19T07:32:23.000Z","size":73456,"stargazers_count":44,"open_issues_count":0,"forks_count":12,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T08:41:35.509Z","etag":null,"topics":["design","figma","tools","ui"],"latest_commit_sha":null,"homepage":"https://bit.ly/yamoo9FigmaMc","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yamoo9.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-25T00:04:04.000Z","updated_at":"2025-02-12T17:58:41.000Z","dependencies_parsed_at":"2022-09-14T07:20:50.837Z","dependency_job_id":null,"html_url":"https://github.com/yamoo9/Figma","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2FFigma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2FFigma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2FFigma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yamoo9%2FFigma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yamoo9","download_url":"https://codeload.github.com/yamoo9/Figma/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251296711,"owners_count":21566655,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design","figma","tools","ui"],"created_at":"2024-11-29T14:27:13.701Z","updated_at":"2025-04-28T10:39:30.184Z","avatar_url":"https://github.com/yamoo9.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Figma로 하는 디자인 맛보기 Class\n\nFigma 디자인 도구를 활용하는 방법 맛보기 강의 수업 자료 저장소입니다.\n\n\u003cimg src=\"./_/figma-course.png\" alt/\u003e\n\n## 1. Figma\n\nFigma 디자인 도구 소개 및 기본 사용법을 학습합니다.\n\n- Figma 도구 리뷰\n- UI 디자인 도구 비교(Sketch, Adobe XD, Photoshop 등)\n- Figma Config 2020(세미나 발표 해설)\n- Figma 계정(Account) 생성/설정\n- 파일 브라우저(File Browser)\n- 외부 디자인 파일 불러오기(Sketch, Adobe XD 등)\n- 도구 인터페이스(Tool Interface)\n- 캔버스(Canvas)\n- 프레임(Frame)\n- 레이아웃 그리드(Layout Grid)\n- 뷰 옵션(View Options)\n- 이동 / 크기 변경(Moving \u0026 Scaling)\n- 중첩(Nested) 프레임 / 슬라이싱(Slicing)\n- 도형(Shapes) 그리기\n- 펜(Pen), 연필(Pencil)로 그리기\n- 텍스트(Text)\n- 이미지(Images) 가져오기\n- 이미지 마스킹(Masking)\n- 레이어(Layers) 관리\n- 컬러(Colors)\n- 이펙트(Effects)\n- 블렌딩(Blending)\n- 스타일(Styles)\n- 컴포넌트(Component)\n- 자동 배치(Auto Layout)\n- 플러그인(Plugins)\n\n## 2. 프로토타이핑 \u0026 핸드오프\n\n디자인 → 프로토타이핑(코드 Zero) 제작 과정을 맛봅니다.\n\n- 코멘트(Comments) 나누기\n- 프로토타이핑(Prototyping)\n- 에셋 내보내기(Exports)\n- 핸드오프(Code)\n\n## 3. 코드 맛보기\n\n디자인 → 코드(개발) 프로세스를 맛봅니다.\n\n- HTML, CSS 언어 소개 및 디자인\n- JavaScript, DOM API 소개 및 디자인\n\n## 튜토리얼(한글화)\n\nFigma 팀이 제공하는 튜토리얼 문서를 한글로 번역하였습니다.\n\n1. [Figma 오버뷰(Overview)](https://www.figma.com/file/Ed5sC3qorDVWgiCt64qZEM/01-Figma-%EC%98%A4%EB%B2%84%EB%B7%B0-Overview)\n1. [Figma 기초 학습(Basic)](https://www.figma.com/file/crVSINy2eVZ4x7kvzXd6rb/02-Figma-%EA%B8%B0%EC%B4%88-%ED%95%99%EC%8A%B5-Basic)\n1. [Figma 와이어프레임(Wireframe)](https://www.figma.com/file/RUrkutbkXO5zpsY0oqKYXE/03-Figma-%EC%99%80%EC%9D%B4%EC%96%B4%ED%94%84%EB%A0%88%EC%9E%84-Wireframe)\n1. [Figma 프로토타입(Prototype)](https://www.figma.com/file/us6xovlKt0GLd6ZBbiuF9Y/04-Figma-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-Prototype)\n1. [Figma 자동 배치(Auto Layout)](https://www.figma.com/file/4uQA39FDevPRDQo2cdt2cG/05-Figma-%EC%9E%90%EB%8F%99-%EB%B0%B0%EC%B9%98-Auto-Layout)\n\n## 실습 파일\n\nFigma 기초 툴테크닉을 학습한 후, 준비 된 실습 예제 제작를 진행해봅니다.\n\n### 멀티 캠퍼스 UI 제작 실습\n\n준비 된 예제 순서에 맞춰 Design Sytem → UI → Prototyping 순으로 실습을 진행합니다.\n\n\u003cimg src=\"./_/multicampus.png\" alt\u003e\n\n- [Multi Campus UI (실습 시작)](https://www.figma.com/file/oeC5IV5WsuUxkJ5Qh56nbd/Multi-Campus-UI-%EC%8B%A4%EC%8A%B5%EC%8B%9C%EC%9E%91)\n- [Multi Campus UI (실습 완성)](https://www.figma.com/file/SGmYm8IfdRXpASo3vp4r3L/Multi-Campus-UI-%EC%8B%A4%EC%8A%B5%EC%99%84%EC%84%B1)\n\n\u003cbr\u003e\n\n\n### 패럴럭스(Parallax) 프로토타이핑\n\n준비 된 예제를 실습해 패럴럭스 프로토타입에 대해 학습합니다. (Smart Animate 활용)\n\n#### 0. 이미지 다운로드\n\n[Woman Wearing Grey Long-sleeved Top Photography](https://www.pexels.com/photo/woman-wearing-grey-long-sleeved-top-photography-1122868/)\n\n#### 1. 이미지 오려내기 \n\nPhotoshop을 사용해 사진에서 원하는 객체를 오려냅니다.\n\n\u003cimg src=\"./_/Parallax-Ps.png\" alt\u003e\n\n#### 2. UI 디자인\n\nFigma에서 오려낸 객체를 적절히 배치한 UI를 그려냅니다.\n\n\u003cimg src=\"./_/Parallax-Figma.png\" alt\u003e\n\n- [Parallax 효과 (실습 시작)](https://www.figma.com/file/VGB3b1kWp60Y20YaLJ6IEe/Parallax-%ED%9A%A8%EA%B3%BC-%EC%8B%A4%EC%8A%B5-%EC%8B%9C%EC%9E%91)\n- [Parallax 효과 (실습 완성)](https://www.figma.com/file/THBQt5XoqDFOhrQ1yYWjZA/Parallax-%ED%9A%A8%EA%B3%BC-%EC%8B%A4%EC%8A%B5-%EC%99%84%EC%84%B1)\n\n## 디자인 시스템\n\n- [디자인 시스템에 대해 알아야 할 모든 것](./DesignSystem/everything-you-need-to-know-about-design-systems.md)\n- [Figma를 활용한 디자인 시스템 제작](./DesignSystem/README.md)\n\n## 타이포그래피\n\n- [웹 타이포그래피](./WebTypography/README.md)\n\n## 디자인 패턴 \n\n- [pttrns.com](https://pttrns.com)\n- [ui-patterns.com](https://ui-patterns.com/patterns)\n- [mobile-patterns.com](https://www.mobile-patterns.com/)\n\n## 디자인 리소스\n\n- [Vector 로고 - worldvectorlogo.com](https://worldvectorlogo.com)\n- [Bitmap 이미지 - pexels.com](https://pexels.com)\n- [Bitmap 이미지 - unsplash.com](https://unsplash.com)\n\n## 디자인 온라인 도구\n\n- [웹 타이포그래피 - gridlover.net](https://www.gridlover.net/try) | [8pt Grid 콘텐츠](https://gist.github.com/yamoo9/19ed3b70982d2e5be0cee0d79536d553#file-gridlover-markdown-txt)\n- [웹 타이포그래피 - Basel;ne](http://b4d455.fr/basel)\n- [온라인 Photo 에디터 - photopea.com](https://photopea.com)\n\n## 디자인 레퍼런스\n\n- [dribbble.com](https://dribbble.com)\n- [behance.net](https://behance.net)\n\n## Figma 추천 플러그인\n\n\u003c!-- \n  https://note.com/smikami/n/nf5114712aaa5 \n  https://note.com/tribako/n/nd14d25dd5743\n--\u003e\n\n### 더미 데이터\n\n- [Unsplush](https://www.figma.com/c/plugin/738454987945972471/Unsplash)\n- [Content Reel](https://www.figma.com/c/plugin/731627216655469013/Content-Reel)\n- [Brandfetch](https://www.figma.com/c/plugin/733590967040604714/Brandfetch)\n\n### 실제 데이터\n\n- [Google Sheets Sync](https://www.figma.com/c/plugin/735770583268406934/Google-Sheets-Sync)\n\n### 생산성 향상\n\n- [Figma Walker](https://www.figma.com/c/plugin/732773762837487095/Figma-Walker)\n- [Instance Finder](https://www.figma.com/c/plugin/741895659787979282/Instance-Finder)\n- [Find and Replace](https://www.figma.com/c/plugin/735072959812183643/Find-and-Replace)\n- [Minimap](https://www.figma.com/c/plugin/772952119002135124/Minimap)\n- [Arrow Auto](https://www.figma.com/c/plugin/751007211632768205/Arrow-Auto)\n- [Notepad](https://www.figma.com/c/plugin/739527655081183968/Notepad)\n\n### 지도 \n\n- [Map Maker](https://www.figma.com/c/plugin/731312569747199418/Map-Maker)\n- [Mapsicle](https://www.figma.com/community/plugin/736458162635847353/Mapsicle)\n\n### 프로토타입\n\n- [SkewDat](https://www.figma.com/c/plugin/741472919529947576/SkewDat)\n- [Vectary 3D](https://www.figma.com/c/plugin/769588393361258724/Vectary-3D)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamoo9%2Ffigma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyamoo9%2Ffigma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyamoo9%2Ffigma/lists"}