youtube.com

Figma for Edu: Working with components in Figma

Workshop file here: https://www.figma.com/community/file/1282006881523256512/Figma-for-Edu-Monlthy-Workshop%3A-Components

In this workshop we will cover how to create components, component sets, and publish a library so you can improve your workflow with reusable design elements that you can share with your collaborators.

Figma is free to use. Sign up here: https://bit.ly/3msp0OV
Figma is free for students and educators: https://figma.com/education

____________________________________________________

Find us on ⬇️
Twitter: https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
Figma forum: https://forum.figma.com/

____________________________________________________


#Figma #FigmaEdu #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

AriRaNg

youtube.com

Define your design system's foundations - Lesson 2 part 2 : Introduction to design systems

Figma is free to use. Sign up here: https://bit.ly/3msp0OV

Habitz design system Community file: https://bit.ly/3BVcql4

Video course: https://bit.ly/3WwqzyI

Written course: https://bit.ly/3Oz6nKH

Foundations are the what of your design system. The building blocks you'll use to create product experiences, like visual styles, colors, typography, and components. As well as patterns, like structures, behaviors, and conventions.

____________________________________________________

Resources:

Accessibility:

The Book on Accessibility: https://bit.ly/3WC50gb
Web Accessibility Checklist: Magenta a11y.com: https://bit.ly/3Ow00ru
Color Blind Accessibility Manifesto.com: https://bit.ly/43oIuJO
Adhoc Accessibility Playbook: https://bit.ly/3BP9eHR
Universal Music: Creative Differences Handbook: https://bit.ly/424EM7g
Stark's Public Library: https://bit.ly/3MuiUwf
Book: Accessibility for Everyone: https://bit.ly/3q5KZm6
Fable: Accessible Usability Scale: https://bit.ly/45rZQHB

Color:

WCAG 1.4.1 Use Of Color: https://bit.ly/3OxeqaT
WCAG 1.4.4 Color Contrast: https://bit.ly/3ODYyDp
Figma Community: Plugins For Color Contrast: https://bit.ly/3MS5Kuo
Nielsen Norman Group: Using Color To Enhance Your Designs: https://bit.ly/42TCARb
Color From DesignSystems.com: https://bit.ly/42XuMhg
Figma Community: Resources For Color Palettes: https://bit.ly/43hxP4h
Hubspot’s Color Theory 101: https://bit.ly/3OxkDDx

Type:

Typescale by Sam Smith: https://bit.ly/3WsNmLM
Scaaale by Nicolas Massi: https://bit.ly/3BXDXlP
Kick Start Your Typographic System by Tom Lowry: https://bit.ly/45oGfYW
Typescale.com: https://bit.ly/45upBr0

Other:

A Complete Guide To Iconography: https://bit.ly/432HH1A
Spacing. Grids, and Layouts: https://bit.ly/3ozKTCF

____________________________________________________

00:00 - Introduction
00:08 - Foundations
00:35 - Accessibility
01:39 - Color
02:50 - Try it out
03:08 - 60 / 30 / 10 Rule
03:36 - Accessibility considerations for color
03:58 - Web Content Accessibility Guidelines
04:42 - Typography
05:01 - Choosing a font
05:42 - Type scale
06:32 - Typography grid tip
06:46 - Type scale hierarchy
07:43 - Limits to a type scale
08:19 - Try out an audit
8:43 - Elevation
9:12 - Elevation Tip
9:32 - Bonus elevation tip
9:45 - Iconography
10:01 - Icon system styles
10:37 - Testing an icon
11:12 Try out search terms for icons
11:36 - Icon size, container and padding
11:58 - Icon styles needs
12:15 - Icon grid
12:22 - Grids, layouts and spacing
12:51 - Layouts and breakpoints
14:13 - Responsive or fluid breakpoints
14:28 - Grids
14:39 - Column grids
15:20 - Baseline grids
16:05 - Modular grids
16:36 - Spacing
17:33 - Inconsistency
17:56 - Systematic thinking
18:10 - Patterns
19:14 - Wrap up

____________________________________________________

Find us on ⬇️
Twitter: https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
Figma forum: https://forum.figma.com/

____________________________________________________


#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

AriRaNg

brunch.co.kr

피그마 32가지 기능업데이트

어떤 것들이 업데이트되었을까? | 이번 피그마 업데이트는 상당히 놀라운 것 같다. 어도비가 28조를 들여 인수한 피그마에게 자사 기술을 전면적으로 지원하여 업데이트한 것 같다. 피그마에서 이루어진 32가지 업데이트를 자세히 알아보도록 하자. 업데이트 내용 다음 링크로 이동하면 어떤 것들이 업데이트되었는지 재미있게 확인해 볼 수 있다. 1. On-can

AriRaNg

youtube.com

[피그마강좌] #25. 캐러셀 카드(Carousel Card) 제작하기

이번에는 캐러셀 디자인을 해보도록 하겠습니다.
캐러셀(Carousel)은 원래 수하물 컨베이어 벨트 같은 것을 의미하는데
웹앱 UI/UX 디자인에서는 회전되며 돌아가는 슬라이드들을
캐러셀이라고 부릅니다.



#피그마강좌 #prototype #CarouselCard
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam


============================================================
◈ 구글 시트 주소
https://docs.google.com/spreadsheets/d/1YOJ3UMcF-b7wW49Y76MCCIAJ-s-5ht3-Yur7ZhWY9Lw/edit?usp=sharing



============================================================
◈ 영상 목차
1. 카드 원본컴포넌트 만들기 - 01:02
2. 카드 인스턴스 복제 후 다시 컴포넌트 제작 - 10:00
3. Variants를 하기 위한 각각의 장면 만들기 - 14:24
4. 프로토타입 처리 후 화면 구현 제작하기 - 21:16


============================================================
◈ 블로그 강의 주소 - 25강 캐러셀 카드(Carousel Card)
https://ossam5.tistory.com/335


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #24. 코드 Inspect패널과 Zeplin

이번에는 코딩관련 Inspect패널과
Zeplin플러그인을 볼게요.



#피그마강좌 #Inspect #Zeplin
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam


============================================================
◈ 제플린 사이트
https://zeplin.io/



============================================================
◈ 영상 목차
1. 코드변환 전 체크요소 - 00:58
2. Clean Document 플러그인 - 05:28
3. Inspect 패널 - 8:45
4. Figma + Zeplin - 12:48


============================================================
◈ 블로그 강의 주소 - 24강 코드 Inspect패널과 Zeplin
https://ossam5.tistory.com/323


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[Figma NEWS] 헐! 어도비가 피그마 인수했다고?(피그마가치는 28조원!!)

어도비가 피그마를 인수했다고 합니다.
피그마를 잘 쓰던 사용자들에게는
아닌 밤중에 홍두깨가 아닐 듯 싶은데요.
그래도 더 좋아지길 빌면서 영상을 만들었습니다.

#오쌤의니가스터디 #피그마강좌 #어도비피그마인수

============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.



============================================================
◈ 음악 가져온 곳
https://www.mewpot.com/
현재 추천인 이벤트를 하고 있어요.
#오쌤
▲ 위는 제 추천인 코드인데 입력하면
여러분도 저도 2개월 구독이 추가됩니다.
음악이 필요하면 뮤팟을 사용해보세요.

vikieminor

youtube.com

[피그마강좌] #23. Variants를 이용한 탭바컨텐츠 만들기

이번에는 Variants와 Prototype기능을
이용해 탭바컨텐츠를 제작해보겠습니다~



#피그마강좌 #탭바 #tabbar
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 탭버튼 Variants로 제작하기 - 01:38
2. 탭 Contents 컴포넌트로 제작하기 - 11:42
3. Prototype을 이용한 탭인터랙션하기 - 26:10

============================================================
◈ 블로그 강의 주소 - 23강 Variants를 이용한 탭바컨텐츠
https://ossam5.tistory.com/320


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #22. 피그마파일공유와 코멘트툴

이번에는 피그마 파일 공유하는 법과
코멘트툴 사용법을 배워보겠습니다.
이 기능들을 통해 협업을 잘 해봅시다!


#피그마강좌 #피그마파일공유 #코멘트툴
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 피그마파일공유 - Share - 00:56
2. 피그마 파일(*.fig) 내보내기 - 05:56
3. 코멘트툴 - 07:30

============================================================
◈ 블로그 강의 주소 - 22강 피그마파일공유 및 코멘트툴
https://ossam5.tistory.com/307


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #21. 이미지(디자인에셋) 내보내기 - Export

이번에는 이미지나 소스를 내보내기를 해보겠습니다.
이미지 내보낼때 해상도에 대한 개념을 알아야 해서
이미지 해상도까지 수업에 넣었습니다.



#피그마강좌 #이미지내보내기 #디자인해상도
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 해상도개념이해하기 - 01:00
2. 내보낼 이미지 컨텐츠 제작하기 - 08:05
3. 각각 내보내기(Export) - 13:31
4. 한번에 내보내기 - 16:39

============================================================
◈ 블로그 강의 주소 - 21강 이미지(소스)내보내기(feat. 디자인에셋내보내기)
https://ossam5.tistory.com/306


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #20. Rename It - 피그마플러그인 사용법

지난번에 오쌤이 선택한 피그마 플러그인
TOP10에 나왔던 Rename It 플러그인 사용법입니다.
이건 기능이 많아서 한강좌로 빼봤습니다.
한번 사용해보면 좋을 것 같아요!



#피그마강좌 #RenameIt #피그마플러그인
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 숫자 혹은 알파벳으로 정리 변경 - 01:12
2. 현재 레이어명참조 변경 - 09:40
3. 크기참조 변경 - 17:42
4. 특정 텍스트를 검색 후 변경 - 19:12
5. Quick Rename 기능 - 20:38

============================================================
◈ 블로그 강의 주소 - 20강 Rename It 플러그인
https://ossam5.tistory.com/305


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #19. 오쌤 Pick! 피그마 플러그인 Top 10

오쌤이 선택한 피그마 플러그인
TOP10입니다.
정말 사용하면 좋을 것들만 엄선해봤어요.



#피그마강좌 #plugins #피그마플러그인
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. Content Reel - 01:04
2. Unsplash - 03:19
3. Lorem Ipsum - 05:00
4. Material Design Icons + Iconify - 06:11
5. Rename It - 08:38
6. Color Palettes + Brandfetch - 10:12
7. Handy Components - 12:20
8. Wireframe - 13:29
9. Autoflow - 15:33
10. Google Sheets Sync - 15:55


============================================================
◈ 블로그 강의 주소 - 19강 오쌤 Pick! 피그마 플러그인 Top 10
https://ossam5.tistory.com/304


============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #18. Prototype05 - Dropdown menu

프로토타입을 이용해 드롭다운메뉴를
만드는 것을 배워보도록 하겠습니다!
드롭다운메뉴는 마우스 올렸을때
하위메뉴가 떨어지는 것을 의미합니다.



#피그마강좌 #Prototype #dropdownmenu
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 서브메뉴 원본컴포넌트 제작 - 01:00
2. 메인메뉴 원본컴포넌트 제작 - 05:21
3. 실행프레임제작 - 15:39
4. 홈페이지 메인메뉴 제작 - 21:58


============================================================
◈ 블로그 강의 주소 - 18강 Prototype - Dropdown Menu
https://ossam5.tistory.com/302



============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #17. Prototype04 - hover이미지

프로토타입을 이용해 hover이미지를
만드는 것을 배워보도록 하겠습니다!
hover이미지는 마우스 올렸을때
바뀌는 이미지를 의미합니다.



#피그마강좌 #Prototype #hover이미지
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. hover이미지 유의사항 확인 - 01:00
2. 원본컴포넌트 제작 - 03:45
3. variants와 prototype 제작 - 07:58
4. hover이미지 프레임 제작 - 11:15


============================================================
◈ 블로그 강의 주소 - 17강 prototype - HOVER이미지
https://ossam5.tistory.com/301



============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #16. Prototype03 - 모바일패널 오버레이

프로토타입을 이용해 모바일 패널 오버레이를
만드는 것을 배워보도록 하겠습니다!



#피그마강좌 #Prototype #패널오버레이
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 메인페이지 프레임만들기 - 01:00
2. 패널 프레임만들기 - 10:34
3. 사용될 프로토타입 기능정리 - 13:26
4. 모바일패널 프로토타입 만들기 - 14:57


============================================================
◈ 블로그 강의 주소 - 16강 prototype - 모바일패널
https://ossam5.tistory.com/300



============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #15. Prototype02 - Slide Image

프로토타입을 이용해 슬라이드 이미지를
만드는 것을 배워보도록 하겠습니다!



#피그마강좌 #Prototype #피그마프로토타입
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. 사용될 프로토타입 기능정리 - 01:00
2. fade image 인터랙션만들기 - 02:19
3. slide image 인터랙션만들기 - 07:34


============================================================
◈ 블로그 강의 주소 - 15강 Prototype - Slide Images
https://ossam5.tistory.com/299



============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor

youtube.com

[피그마강좌] #14. Prototype01 - 토글버튼, hover효과, 네이버로그인창 만들기

피그마의 컴포넌트를 조합하는
Variants기능을 사용해서 Prototype을 만들어보겠습니다.
프로토타입을 이용해서 토글버튼, hover효과가 실제로
구현되는 것 같은 느낌을 배워보겠습니다.



#피그마강좌 #Prototype #피그마프로토타입
============================================================
◈ OSSAM 피그마 커뮤니티
https://figma.com/@ossam



============================================================
◈ 영상 목차
1. Prototype과 Interaction 기능정리 - 01:00
2. Toggle Switch Button 설정 - 04:40
3. Check Box 설정 - 07:27
4. Login Button 설정 - 08:49
5. Input Field 설정 -11:43


============================================================
◈ 블로그 강의 주소 - 14강 Prototype - 네이버 로그인창
https://ossam5.tistory.com/289




============================================================
◈ 일부 컨텐츠들은 네이버의 미리캔버스/프리아이콘(https://icon-icons.com/)에서 가져온 무료 컨텐츠입니다.

vikieminor