피그마

 

 

 

 

 

 

 

 

 

- frame : html에서의 div

 

- k : 스케일 단축키. 비율이 깨지지 않게 비율 조정이 가능하다

 

- 도형 누르고 클립 아이콘 누르면 비율이 유지된다

 

- 0px(x축) 50px(y축) 100px(블러) -20px(스프레드 정도)

 

- create componante? 마름모 모음 누르면 도형들을 객체로 만들수 있어서 한번에 색깔을 바꾼다던가..한번에 제어가 가능

 

- 시프트+r = 격자무늬 키기 끄기

 

 

 

 

 

 

 

 

 

🎨 Figma 🎨

 

📝 Pages

• Pages : 사용자 화면을 두는 곳
• Component : 화면에 필요한 요소를 모아두는 곳
• Drafts : 레퍼런스, 초안, 아이디어 등을 두는 곳

🔤 Font

1. 종류

• 언어당 최대 개수는 2개를 권장하며, 여기서 언어란 한글, 영어/숫자를 말한다.
• 실습에서 사용한 폰트

1. 두께

• 레귤러, 세미볼드 or 레귤러, 볼드 이처럼 정해진 두 개의 두께만 사용하는 것을 권장
• 실습에서는 레귤러,볼드를 사용

1. 사이즈

	모바일	데스크탑
대제목	20px	22px
중제목	18px	20px
소제목	16px	18px
본문	14px	16px
설명	12px	14px
주석	10px	12px

🖥️ Display Size

• 안드로이드는 width 360px, 아이폰은 width 375px로 각 프로젝트에 맞게 지정하여 사용하면 된다. 

 

💡TIP

❗️Inspect에서 제공되는 CSS를 사용해도 되나요? ❌ 제공되는 CSS만 믿고 사용한다면 문제가 생길 수 있으므로 색상, 그림자 등만 참고하여 사용할 것.

❗️Color, Shadow 등을 Style로 등록하여 사용하면 다른 곳에서도 편리하게 사용 가능하니 꼭 활용하기!

❗️Export를 활용하여 jpg, png, svg 등으로 내보내기 가능! 이를 활용하여 포트폴리오에 파일 넣기, 아이콘 내보내기 등 다양하게 활용 가능함.

❗패딩, 마진 등 수치를 정하기 어렵다면 모든 수치는 4배수로 한다. 만약 디테일이 필요할 땐 2배수로 한다.

❗재생 버튼으로 화면을 확인 시 기기별로 확인하고 싶을 때, Prototype - Show prototype settings에서 설정 가능!

 

🔌 유용한 플러그인

• Color contrast : 배경색상 대비 텍스트가 잘 보이는지 체크해주는 플러그인

 

📎 다양한 레퍼런스

• Shadow CSS : https://getcssscan.com/css-box-shadow-examples
• 디자이너들 포트폴리오 사이트. 웹 디자인, 컴포넌트 참고 : https://dribbble.com
• Dribble에 있는 디자인들은 UX가 전혀 고려되지 않았다며 대신 추천하는 여러사이트를 모은 아티클 : https://uxplanet.org/stop-using-dribbble-behance-to-find-design-inspiration-use-these-15-websites-instead-b3a200c82776

 

 

 

---