Skip to content
BranchesTags

Latest commit

History

14 Commits

Folders and files

NameName
Last commit message
Last commit date
DesignSystem
DesignSystem
Keynote
Keynote
WebTypography
WebTypography
_
_
assets
assets
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md

Repository files navigation

Figma로 하는 디자인 맛보기 Class

Figma 디자인 도구를 활용하는 방법 맛보기 강의 수업 자료 저장소입니다.

1. Figma

Figma 디자인 도구 소개 및 기본 사용법을 학습합니다.

  • Figma 도구 리뷰
  • UI 디자인 도구 비교(Sketch, Adobe XD, Photoshop 등)
  • Figma Config 2020(세미나 발표 해설)
  • Figma 계정(Account) 생성/설정
  • 파일 브라우저(File Browser)
  • 외부 디자인 파일 불러오기(Sketch, Adobe XD 등)
  • 도구 인터페이스(Tool Interface)
  • 캔버스(Canvas)
  • 프레임(Frame)
  • 레이아웃 그리드(Layout Grid)
  • 뷰 옵션(View Options)
  • 이동 / 크기 변경(Moving & Scaling)
  • 중첩(Nested) 프레임 / 슬라이싱(Slicing)
  • 도형(Shapes) 그리기
  • 펜(Pen), 연필(Pencil)로 그리기
  • 텍스트(Text)
  • 이미지(Images) 가져오기
  • 이미지 마스킹(Masking)
  • 레이어(Layers) 관리
  • 컬러(Colors)
  • 이펙트(Effects)
  • 블렌딩(Blending)
  • 스타일(Styles)
  • 컴포넌트(Component)
  • 자동 배치(Auto Layout)
  • 플러그인(Plugins)

2. 프로토타이핑 & 핸드오프

디자인 → 프로토타이핑(코드 Zero) 제작 과정을 맛봅니다.

  • 코멘트(Comments) 나누기
  • 프로토타이핑(Prototyping)
  • 에셋 내보내기(Exports)
  • 핸드오프(Code)

3. 코드 맛보기

디자인 → 코드(개발) 프로세스를 맛봅니다.

  • HTML, CSS 언어 소개 및 디자인
  • JavaScript, DOM API 소개 및 디자인

튜토리얼(한글화)

Figma 팀이 제공하는 튜토리얼 문서를 한글로 번역하였습니다.

  1. Figma 오버뷰(Overview)
  2. Figma 기초 학습(Basic)
  3. Figma 와이어프레임(Wireframe)
  4. Figma 프로토타입(Prototype)
  5. Figma 자동 배치(Auto Layout)

실습 파일

Figma 기초 툴테크닉을 학습한 후, 준비 된 실습 예제 제작를 진행해봅니다.

멀티 캠퍼스 UI 제작 실습

준비 된 예제 순서에 맞춰 Design Sytem → UI → Prototyping 순으로 실습을 진행합니다.


패럴럭스(Parallax) 프로토타이핑

준비 된 예제를 실습해 패럴럭스 프로토타입에 대해 학습합니다. (Smart Animate 활용)

0. 이미지 다운로드

Woman Wearing Grey Long-sleeved Top Photography

1. 이미지 오려내기

Photoshop을 사용해 사진에서 원하는 객체를 오려냅니다.

2. UI 디자인

Figma에서 오려낸 객체를 적절히 배치한 UI를 그려냅니다.

디자인 시스템

타이포그래피

디자인 패턴

디자인 리소스

디자인 온라인 도구

디자인 레퍼런스

Figma 추천 플러그인

더미 데이터

실제 데이터

생산성 향상

지도

프로토타입

About

Figma로 하는 디자인 맛보기 Class

bit.ly/yamoo9FigmaMc

Topics

designfigmatoolsui

Resources

Readme
MIT license
Activity

Stars

45 stars

Watchers

3 watching

Forks

13 forks
Report repository

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - yamoo9/Figma: Figma로 하는 디자인 맛보기 Class · GitHub
Skip to content
BranchesTags
Latest commit
History
14 Commits
Folders and files
NameName
Last commit message
Last commit date
DesignSystem
DesignSystem
Keynote
Keynote
WebTypography
WebTypography
_
_
assets
assets
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
Repository files navigation
Figma로 하는 디자인 맛보기 Class
Figma 디자인 도구를 활용하는 방법 맛보기 강의 수업 자료 저장소입니다.
1. Figma
Figma 디자인 도구 소개 및 기본 사용법을 학습합니다.
  • Figma 도구 리뷰
  • UI 디자인 도구 비교(Sketch, Adobe XD, Photoshop 등)
  • Figma Config 2020(세미나 발표 해설)
  • Figma 계정(Account) 생성/설정
  • 파일 브라우저(File Browser)
  • 외부 디자인 파일 불러오기(Sketch, Adobe XD 등)
  • 도구 인터페이스(Tool Interface)
  • 캔버스(Canvas)
  • 프레임(Frame)
  • 레이아웃 그리드(Layout Grid)
  • 뷰 옵션(View Options)
  • 이동 / 크기 변경(Moving & Scaling)
  • 중첩(Nested) 프레임 / 슬라이싱(Slicing)
  • 도형(Shapes) 그리기
  • 펜(Pen), 연필(Pencil)로 그리기
  • 텍스트(Text)
  • 이미지(Images) 가져오기
  • 이미지 마스킹(Masking)
  • 레이어(Layers) 관리
  • 컬러(Colors)
  • 이펙트(Effects)
  • 블렌딩(Blending)
  • 스타일(Styles)
  • 컴포넌트(Component)
  • 자동 배치(Auto Layout)
  • 플러그인(Plugins)
2. 프로토타이핑 & 핸드오프
디자인 → 프로토타이핑(코드 Zero) 제작 과정을 맛봅니다.
  • 코멘트(Comments) 나누기
  • 프로토타이핑(Prototyping)
  • 에셋 내보내기(Exports)
  • 핸드오프(Code)
3. 코드 맛보기
디자인 → 코드(개발) 프로세스를 맛봅니다.
  • HTML, CSS 언어 소개 및 디자인
  • JavaScript, DOM API 소개 및 디자인
튜토리얼(한글화)
Figma 팀이 제공하는 튜토리얼 문서를 한글로 번역하였습니다.
  1. Figma 오버뷰(Overview)
  2. Figma 기초 학습(Basic)
  3. Figma 와이어프레임(Wireframe)
  4. Figma 프로토타입(Prototype)
  5. Figma 자동 배치(Auto Layout)
실습 파일
Figma 기초 툴테크닉을 학습한 후, 준비 된 실습 예제 제작를 진행해봅니다.
멀티 캠퍼스 UI 제작 실습
준비 된 예제 순서에 맞춰 Design Sytem → UI → Prototyping 순으로 실습을 진행합니다.

패럴럭스(Parallax) 프로토타이핑
준비 된 예제를 실습해 패럴럭스 프로토타입에 대해 학습합니다. (Smart Animate 활용)
0. 이미지 다운로드
Woman Wearing Grey Long-sleeved Top Photography
1. 이미지 오려내기
Photoshop을 사용해 사진에서 원하는 객체를 오려냅니다.
2. UI 디자인
Figma에서 오려낸 객체를 적절히 배치한 UI를 그려냅니다.
디자인 시스템
타이포그래피
디자인 패턴
디자인 리소스
디자인 온라인 도구
디자인 레퍼런스
Figma 추천 플러그인
더미 데이터
실제 데이터
생산성 향상
지도
프로토타입
About
Figma로 하는 디자인 맛보기 Class
bit.ly/yamoo9FigmaMc
Topics
designfigmatoolsui
Resources
Readme
MIT license
Activity
Stars
45 stars
Watchers
3 watching
Forks
13 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - yamoo9/Figma: Figma로 하는 디자인 맛보기 Class · GitHub
Skip to content
BranchesTags
Latest commit
History
14 Commits
Folders and files
NameName
Last commit message
Last commit date
DesignSystem
DesignSystem
Keynote
Keynote
WebTypography
WebTypography
_
_
assets
assets
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
Repository files navigation
Figma로 하는 디자인 맛보기 Class
Figma 디자인 도구를 활용하는 방법 맛보기 강의 수업 자료 저장소입니다.
1. Figma
Figma 디자인 도구 소개 및 기본 사용법을 학습합니다.
  • Figma 도구 리뷰
  • UI 디자인 도구 비교(Sketch, Adobe XD, Photoshop 등)
  • Figma Config 2020(세미나 발표 해설)
  • Figma 계정(Account) 생성/설정
  • 파일 브라우저(File Browser)
  • 외부 디자인 파일 불러오기(Sketch, Adobe XD 등)
  • 도구 인터페이스(Tool Interface)
  • 캔버스(Canvas)
  • 프레임(Frame)
  • 레이아웃 그리드(Layout Grid)
  • 뷰 옵션(View Options)
  • 이동 / 크기 변경(Moving & Scaling)
  • 중첩(Nested) 프레임 / 슬라이싱(Slicing)
  • 도형(Shapes) 그리기
  • 펜(Pen), 연필(Pencil)로 그리기
  • 텍스트(Text)
  • 이미지(Images) 가져오기
  • 이미지 마스킹(Masking)
  • 레이어(Layers) 관리
  • 컬러(Colors)
  • 이펙트(Effects)
  • 블렌딩(Blending)
  • 스타일(Styles)
  • 컴포넌트(Component)
  • 자동 배치(Auto Layout)
  • 플러그인(Plugins)
2. 프로토타이핑 & 핸드오프
디자인 → 프로토타이핑(코드 Zero) 제작 과정을 맛봅니다.
  • 코멘트(Comments) 나누기
  • 프로토타이핑(Prototyping)
  • 에셋 내보내기(Exports)
  • 핸드오프(Code)
3. 코드 맛보기
디자인 → 코드(개발) 프로세스를 맛봅니다.
  • HTML, CSS 언어 소개 및 디자인
  • JavaScript, DOM API 소개 및 디자인
튜토리얼(한글화)
Figma 팀이 제공하는 튜토리얼 문서를 한글로 번역하였습니다.
  1. Figma 오버뷰(Overview)
  2. Figma 기초 학습(Basic)
  3. Figma 와이어프레임(Wireframe)
  4. Figma 프로토타입(Prototype)
  5. Figma 자동 배치(Auto Layout)
실습 파일
Figma 기초 툴테크닉을 학습한 후, 준비 된 실습 예제 제작를 진행해봅니다.
멀티 캠퍼스 UI 제작 실습
준비 된 예제 순서에 맞춰 Design Sytem → UI → Prototyping 순으로 실습을 진행합니다.

패럴럭스(Parallax) 프로토타이핑
준비 된 예제를 실습해 패럴럭스 프로토타입에 대해 학습합니다. (Smart Animate 활용)
0. 이미지 다운로드
Woman Wearing Grey Long-sleeved Top Photography
1. 이미지 오려내기
Photoshop을 사용해 사진에서 원하는 객체를 오려냅니다.
2. UI 디자인
Figma에서 오려낸 객체를 적절히 배치한 UI를 그려냅니다.
디자인 시스템
타이포그래피
디자인 패턴
디자인 리소스
디자인 온라인 도구
디자인 레퍼런스
Figma 추천 플러그인
더미 데이터
실제 데이터
생산성 향상
지도
프로토타입
About
Figma로 하는 디자인 맛보기 Class
bit.ly/yamoo9FigmaMc
Topics
designfigmatoolsui
Resources
Readme
MIT license
Activity
Stars
45 stars
Watchers
3 watching
Forks
13 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - yamoo9/Figma: Figma로 하는 디자인 맛보기 Class · GitHub
Skip to content
BranchesTags
Latest commit
History
14 Commits
Folders and files
NameName
Last commit message
Last commit date
DesignSystem
DesignSystem
Keynote
Keynote
WebTypography
WebTypography
_
_
assets
assets
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
Repository files navigation
Figma로 하는 디자인 맛보기 Class
Figma 디자인 도구를 활용하는 방법 맛보기 강의 수업 자료 저장소입니다.
1. Figma
Figma 디자인 도구 소개 및 기본 사용법을 학습합니다.
  • Figma 도구 리뷰
  • UI 디자인 도구 비교(Sketch, Adobe XD, Photoshop 등)
  • Figma Config 2020(세미나 발표 해설)
  • Figma 계정(Account) 생성/설정
  • 파일 브라우저(File Browser)
  • 외부 디자인 파일 불러오기(Sketch, Adobe XD 등)
  • 도구 인터페이스(Tool Interface)
  • 캔버스(Canvas)
  • 프레임(Frame)
  • 레이아웃 그리드(Layout Grid)
  • 뷰 옵션(View Options)
  • 이동 / 크기 변경(Moving & Scaling)
  • 중첩(Nested) 프레임 / 슬라이싱(Slicing)
  • 도형(Shapes) 그리기
  • 펜(Pen), 연필(Pencil)로 그리기
  • 텍스트(Text)
  • 이미지(Images) 가져오기
  • 이미지 마스킹(Masking)
  • 레이어(Layers) 관리
  • 컬러(Colors)
  • 이펙트(Effects)
  • 블렌딩(Blending)
  • 스타일(Styles)
  • 컴포넌트(Component)
  • 자동 배치(Auto Layout)
  • 플러그인(Plugins)
2. 프로토타이핑 & 핸드오프
디자인 → 프로토타이핑(코드 Zero) 제작 과정을 맛봅니다.
  • 코멘트(Comments) 나누기
  • 프로토타이핑(Prototyping)
  • 에셋 내보내기(Exports)
  • 핸드오프(Code)
3. 코드 맛보기
디자인 → 코드(개발) 프로세스를 맛봅니다.
  • HTML, CSS 언어 소개 및 디자인
  • JavaScript, DOM API 소개 및 디자인
튜토리얼(한글화)
Figma 팀이 제공하는 튜토리얼 문서를 한글로 번역하였습니다.
  1. Figma 오버뷰(Overview)
  2. Figma 기초 학습(Basic)
  3. Figma 와이어프레임(Wireframe)
  4. Figma 프로토타입(Prototype)
  5. Figma 자동 배치(Auto Layout)
실습 파일
Figma 기초 툴테크닉을 학습한 후, 준비 된 실습 예제 제작를 진행해봅니다.
멀티 캠퍼스 UI 제작 실습
준비 된 예제 순서에 맞춰 Design Sytem → UI → Prototyping 순으로 실습을 진행합니다.

패럴럭스(Parallax) 프로토타이핑
준비 된 예제를 실습해 패럴럭스 프로토타입에 대해 학습합니다. (Smart Animate 활용)
0. 이미지 다운로드
Woman Wearing Grey Long-sleeved Top Photography
1. 이미지 오려내기
Photoshop을 사용해 사진에서 원하는 객체를 오려냅니다.
2. UI 디자인
Figma에서 오려낸 객체를 적절히 배치한 UI를 그려냅니다.
디자인 시스템
타이포그래피
디자인 패턴
디자인 리소스
디자인 온라인 도구
디자인 레퍼런스
Figma 추천 플러그인
더미 데이터
실제 데이터
생산성 향상
지도
프로토타입
About
Figma로 하는 디자인 맛보기 Class
bit.ly/yamoo9FigmaMc
Topics
designfigmatoolsui
Resources
Readme
MIT license
Activity
Stars
45 stars
Watchers
3 watching
Forks
13 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - yamoo9/Figma: Figma로 하는 디자인 맛보기 Class · GitHub
Skip to content
BranchesTags
Latest commit
History
14 Commits
Folders and files
NameName
Last commit message
Last commit date
DesignSystem
DesignSystem
Keynote
Keynote
WebTypography
WebTypography
_
_
assets
assets
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
Repository files navigation
Figma로 하는 디자인 맛보기 Class
Figma 디자인 도구를 활용하는 방법 맛보기 강의 수업 자료 저장소입니다.
1. Figma
Figma 디자인 도구 소개 및 기본 사용법을 학습합니다.
  • Figma 도구 리뷰
  • UI 디자인 도구 비교(Sketch, Adobe XD, Photoshop 등)
  • Figma Config 2020(세미나 발표 해설)
  • Figma 계정(Account) 생성/설정
  • 파일 브라우저(File Browser)
  • 외부 디자인 파일 불러오기(Sketch, Adobe XD 등)
  • 도구 인터페이스(Tool Interface)
  • 캔버스(Canvas)
  • 프레임(Frame)
  • 레이아웃 그리드(Layout Grid)
  • 뷰 옵션(View Options)
  • 이동 / 크기 변경(Moving & Scaling)
  • 중첩(Nested) 프레임 / 슬라이싱(Slicing)
  • 도형(Shapes) 그리기
  • 펜(Pen), 연필(Pencil)로 그리기
  • 텍스트(Text)
  • 이미지(Images) 가져오기
  • 이미지 마스킹(Masking)
  • 레이어(Layers) 관리
  • 컬러(Colors)
  • 이펙트(Effects)
  • 블렌딩(Blending)
  • 스타일(Styles)
  • 컴포넌트(Component)
  • 자동 배치(Auto Layout)
  • 플러그인(Plugins)
2. 프로토타이핑 & 핸드오프
디자인 → 프로토타이핑(코드 Zero) 제작 과정을 맛봅니다.
  • 코멘트(Comments) 나누기
  • 프로토타이핑(Prototyping)
  • 에셋 내보내기(Exports)
  • 핸드오프(Code)
3. 코드 맛보기
디자인 → 코드(개발) 프로세스를 맛봅니다.
  • HTML, CSS 언어 소개 및 디자인
  • JavaScript, DOM API 소개 및 디자인
튜토리얼(한글화)
Figma 팀이 제공하는 튜토리얼 문서를 한글로 번역하였습니다.
  1. Figma 오버뷰(Overview)
  2. Figma 기초 학습(Basic)
  3. Figma 와이어프레임(Wireframe)
  4. Figma 프로토타입(Prototype)
  5. Figma 자동 배치(Auto Layout)
실습 파일
Figma 기초 툴테크닉을 학습한 후, 준비 된 실습 예제 제작를 진행해봅니다.
멀티 캠퍼스 UI 제작 실습
준비 된 예제 순서에 맞춰 Design Sytem → UI → Prototyping 순으로 실습을 진행합니다.

패럴럭스(Parallax) 프로토타이핑
준비 된 예제를 실습해 패럴럭스 프로토타입에 대해 학습합니다. (Smart Animate 활용)
0. 이미지 다운로드
Woman Wearing Grey Long-sleeved Top Photography
1. 이미지 오려내기
Photoshop을 사용해 사진에서 원하는 객체를 오려냅니다.
2. UI 디자인
Figma에서 오려낸 객체를 적절히 배치한 UI를 그려냅니다.
디자인 시스템
타이포그래피
디자인 패턴
디자인 리소스
디자인 온라인 도구
디자인 레퍼런스
Figma 추천 플러그인
더미 데이터
실제 데이터
생산성 향상
지도
프로토타입
About
Figma로 하는 디자인 맛보기 Class
bit.ly/yamoo9FigmaMc
Topics
designfigmatoolsui
Resources
Readme
MIT license
Activity
Stars
45 stars
Watchers
3 watching
Forks
13 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - yamoo9/Figma: Figma로 하는 디자인 맛보기 Class · GitHub
Skip to content
BranchesTags
Latest commit
History
14 Commits
Folders and files
NameName
Last commit message
Last commit date
DesignSystem
DesignSystem
Keynote
Keynote
WebTypography
WebTypography
_
_
assets
assets
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
Repository files navigation
Figma로 하는 디자인 맛보기 Class
Figma 디자인 도구를 활용하는 방법 맛보기 강의 수업 자료 저장소입니다.
1. Figma
Figma 디자인 도구 소개 및 기본 사용법을 학습합니다.
  • Figma 도구 리뷰
  • UI 디자인 도구 비교(Sketch, Adobe XD, Photoshop 등)
  • Figma Config 2020(세미나 발표 해설)
  • Figma 계정(Account) 생성/설정
  • 파일 브라우저(File Browser)
  • 외부 디자인 파일 불러오기(Sketch, Adobe XD 등)
  • 도구 인터페이스(Tool Interface)
  • 캔버스(Canvas)
  • 프레임(Frame)
  • 레이아웃 그리드(Layout Grid)
  • 뷰 옵션(View Options)
  • 이동 / 크기 변경(Moving & Scaling)
  • 중첩(Nested) 프레임 / 슬라이싱(Slicing)
  • 도형(Shapes) 그리기
  • 펜(Pen), 연필(Pencil)로 그리기
  • 텍스트(Text)
  • 이미지(Images) 가져오기
  • 이미지 마스킹(Masking)
  • 레이어(Layers) 관리
  • 컬러(Colors)
  • 이펙트(Effects)
  • 블렌딩(Blending)
  • 스타일(Styles)
  • 컴포넌트(Component)
  • 자동 배치(Auto Layout)
  • 플러그인(Plugins)
2. 프로토타이핑 & 핸드오프
디자인 → 프로토타이핑(코드 Zero) 제작 과정을 맛봅니다.
  • 코멘트(Comments) 나누기
  • 프로토타이핑(Prototyping)
  • 에셋 내보내기(Exports)
  • 핸드오프(Code)
3. 코드 맛보기
디자인 → 코드(개발) 프로세스를 맛봅니다.
  • HTML, CSS 언어 소개 및 디자인
  • JavaScript, DOM API 소개 및 디자인
튜토리얼(한글화)
Figma 팀이 제공하는 튜토리얼 문서를 한글로 번역하였습니다.
  1. Figma 오버뷰(Overview)
  2. Figma 기초 학습(Basic)
  3. Figma 와이어프레임(Wireframe)
  4. Figma 프로토타입(Prototype)
  5. Figma 자동 배치(Auto Layout)
실습 파일
Figma 기초 툴테크닉을 학습한 후, 준비 된 실습 예제 제작를 진행해봅니다.
멀티 캠퍼스 UI 제작 실습
준비 된 예제 순서에 맞춰 Design Sytem → UI → Prototyping 순으로 실습을 진행합니다.

패럴럭스(Parallax) 프로토타이핑
준비 된 예제를 실습해 패럴럭스 프로토타입에 대해 학습합니다. (Smart Animate 활용)
0. 이미지 다운로드
Woman Wearing Grey Long-sleeved Top Photography
1. 이미지 오려내기
Photoshop을 사용해 사진에서 원하는 객체를 오려냅니다.
2. UI 디자인
Figma에서 오려낸 객체를 적절히 배치한 UI를 그려냅니다.
디자인 시스템
타이포그래피
디자인 패턴
디자인 리소스
디자인 온라인 도구
디자인 레퍼런스
Figma 추천 플러그인
더미 데이터
실제 데이터
생산성 향상
지도
프로토타입
About
Figma로 하는 디자인 맛보기 Class
bit.ly/yamoo9FigmaMc
Topics
designfigmatoolsui
Resources
Readme
MIT license
Activity
Stars
45 stars
Watchers
3 watching
Forks
13 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - yamoo9/Figma: Figma로 하는 디자인 맛보기 Class · GitHub
Skip to content
BranchesTags
Latest commit
History
14 Commits
Folders and files
NameName
Last commit message
Last commit date
DesignSystem
DesignSystem
Keynote
Keynote
WebTypography
WebTypography
_
_
assets
assets
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
Repository files navigation
Figma로 하는 디자인 맛보기 Class
Figma 디자인 도구를 활용하는 방법 맛보기 강의 수업 자료 저장소입니다.
1. Figma
Figma 디자인 도구 소개 및 기본 사용법을 학습합니다.
  • Figma 도구 리뷰
  • UI 디자인 도구 비교(Sketch, Adobe XD, Photoshop 등)
  • Figma Config 2020(세미나 발표 해설)
  • Figma 계정(Account) 생성/설정
  • 파일 브라우저(File Browser)
  • 외부 디자인 파일 불러오기(Sketch, Adobe XD 등)
  • 도구 인터페이스(Tool Interface)
  • 캔버스(Canvas)
  • 프레임(Frame)
  • 레이아웃 그리드(Layout Grid)
  • 뷰 옵션(View Options)
  • 이동 / 크기 변경(Moving & Scaling)
  • 중첩(Nested) 프레임 / 슬라이싱(Slicing)
  • 도형(Shapes) 그리기
  • 펜(Pen), 연필(Pencil)로 그리기
  • 텍스트(Text)
  • 이미지(Images) 가져오기
  • 이미지 마스킹(Masking)
  • 레이어(Layers) 관리
  • 컬러(Colors)
  • 이펙트(Effects)
  • 블렌딩(Blending)
  • 스타일(Styles)
  • 컴포넌트(Component)
  • 자동 배치(Auto Layout)
  • 플러그인(Plugins)
2. 프로토타이핑 & 핸드오프
디자인 → 프로토타이핑(코드 Zero) 제작 과정을 맛봅니다.
  • 코멘트(Comments) 나누기
  • 프로토타이핑(Prototyping)
  • 에셋 내보내기(Exports)
  • 핸드오프(Code)
3. 코드 맛보기
디자인 → 코드(개발) 프로세스를 맛봅니다.
  • HTML, CSS 언어 소개 및 디자인
  • JavaScript, DOM API 소개 및 디자인
튜토리얼(한글화)
Figma 팀이 제공하는 튜토리얼 문서를 한글로 번역하였습니다.
  1. Figma 오버뷰(Overview)
  2. Figma 기초 학습(Basic)
  3. Figma 와이어프레임(Wireframe)
  4. Figma 프로토타입(Prototype)
  5. Figma 자동 배치(Auto Layout)
실습 파일
Figma 기초 툴테크닉을 학습한 후, 준비 된 실습 예제 제작를 진행해봅니다.
멀티 캠퍼스 UI 제작 실습
준비 된 예제 순서에 맞춰 Design Sytem → UI → Prototyping 순으로 실습을 진행합니다.

패럴럭스(Parallax) 프로토타이핑
준비 된 예제를 실습해 패럴럭스 프로토타입에 대해 학습합니다. (Smart Animate 활용)
0. 이미지 다운로드
Woman Wearing Grey Long-sleeved Top Photography
1. 이미지 오려내기
Photoshop을 사용해 사진에서 원하는 객체를 오려냅니다.
2. UI 디자인
Figma에서 오려낸 객체를 적절히 배치한 UI를 그려냅니다.
디자인 시스템
타이포그래피
디자인 패턴
디자인 리소스
디자인 온라인 도구
디자인 레퍼런스
Figma 추천 플러그인
더미 데이터
실제 데이터
생산성 향상
지도
프로토타입
About
Figma로 하는 디자인 맛보기 Class
bit.ly/yamoo9FigmaMc
Topics
designfigmatoolsui
Resources
Readme
MIT license
Activity
Stars
45 stars
Watchers
3 watching
Forks
13 forks
Report repository
Releases
Packages
Contributors

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - yamoo9/Figma: Figma로 하는 디자인 맛보기 Class · GitHub
Skip to content
BranchesTags
Latest commit
History
14 Commits
Folders and files
NameName
Last commit message
Last commit date
DesignSystem
DesignSystem
Keynote
Keynote
WebTypography
WebTypography
_
_
assets
assets
.gitignore
.gitignore
LICENSE
LICENSE
README.md
README.md
Repository files navigation
Figma로 하는 디자인 맛보기 Class
Figma 디자인 도구를 활용하는 방법 맛보기 강의 수업 자료 저장소입니다.
1. Figma
Figma 디자인 도구 소개 및 기본 사용법을 학습합니다.
  • Figma 도구 리뷰
  • UI 디자인 도구 비교(Sketch, Adobe XD, Photoshop 등)
  • Figma Config 2020(세미나 발표 해설)
  • Figma 계정(Account) 생성/설정
  • 파일 브라우저(File Browser)
  • 외부 디자인 파일 불러오기(Sketch, Adobe XD 등)
  • 도구 인터페이스(Tool Interface)
  • 캔버스(Canvas)
  • 프레임(Frame)
  • 레이아웃 그리드(Layout Grid)
  • 뷰 옵션(View Options)
  • 이동 / 크기 변경(Moving & Scaling)
  • 중첩(Nested) 프레임 / 슬라이싱(Slicing)
  • 도형(Shapes) 그리기
  • 펜(Pen), 연필(Pencil)로 그리기
  • 텍스트(Text)
  • 이미지(Images) 가져오기
  • 이미지 마스킹(Masking)
  • 레이어(Layers) 관리
  • 컬러(Colors)
  • 이펙트(Effects)
  • 블렌딩(Blending)
  • 스타일(Styles)
  • 컴포넌트(Component)
  • 자동 배치(Auto Layout)
  • 플러그인(Plugins)
2. 프로토타이핑 & 핸드오프
디자인 → 프로토타이핑(코드 Zero) 제작 과정을 맛봅니다.
  • 코멘트(Comments) 나누기
  • 프로토타이핑(Prototyping)
  • 에셋 내보내기(Exports)
  • 핸드오프(Code)
3. 코드 맛보기
디자인 → 코드(개발) 프로세스를 맛봅니다.
  • HTML, CSS 언어 소개 및 디자인
  • JavaScript, DOM API 소개 및 디자인
튜토리얼(한글화)
Figma 팀이 제공하는 튜토리얼 문서를 한글로 번역하였습니다.
  1. Figma 오버뷰(Overview)
  2. Figma 기초 학습(Basic)
  3. Figma 와이어프레임(Wireframe)
  4. Figma 프로토타입(Prototype)
  5. Figma 자동 배치(Auto Layout)
실습 파일
Figma 기초 툴테크닉을 학습한 후, 준비 된 실습 예제 제작를 진행해봅니다.
멀티 캠퍼스 UI 제작 실습
준비 된 예제 순서에 맞춰 Design Sytem → UI → Prototyping 순으로 실습을 진행합니다.

패럴럭스(Parallax) 프로토타이핑
준비 된 예제를 실습해 패럴럭스 프로토타입에 대해 학습합니다. (Smart Animate 활용)
0. 이미지 다운로드
Woman Wearing Grey Long-sleeved Top Photography
1. 이미지 오려내기
Photoshop을 사용해 사진에서 원하는 객체를 오려냅니다.
2. UI 디자인
Figma에서 오려낸 객체를 적절히 배치한 UI를 그려냅니다.
디자인 시스템
타이포그래피
디자인 패턴
디자인 리소스
디자인 온라인 도구
디자인 레퍼런스
Figma 추천 플러그인
더미 데이터
실제 데이터
생산성 향상
지도
프로토타입
About
Figma로 하는 디자인 맛보기 Class
bit.ly/yamoo9FigmaMc
Topics
designfigmatoolsui
Resources
Readme
MIT license
Activity
Stars
45 stars
Watchers
3 watching
Forks
13 forks
Report repository
Releases
Packages
Contributors