awspspgh 님의 블로그

목차1.도형과 텍스트로 UI 스타일링 1. 도형과 텍스트로 UI 스타일링Fill & Stroke -Tile의 경우 패턴을 넣을 때 유용함 Effects- Background blur는 Fill이 조금이라도 투명도가 있어야 적용할 수 있음 Typography 예제- Ctrl + Alt + C : 요소의 사진 복사- Ctrl + Alt + V : 요소의 사진 붙여놓기- 클립 처리 : Frame의 Clip content를 체크

목차1.레이아웃 그리드 1. 레이아웃 그리드개념 - Rows는 비교적 어렵기에 잘 활용되지는 않음 단축키- 레이아웃 그리드 Hidden On/Off: Shift + G 활용 - Layout guide styles를 생성하여 적용함

목차1.레이어2.프레임3.섹션4.페이지 1. 레이어개념 단축키 - 레이어 한 칸 위로 이동: Ctrl + ] - 레이어 한 칸 아래로 이동: Ctrl + [ - 레이어 맨 앞 또 맨 뒤로 이동: Ctrl + Alt + [ 또는 ]- 도형(사각형) 생성: R- 텍스트 생성: T - 그룹 생성: Ctrl + G - 그룹(섹션) 해제: Ctrl + Shift + G- 복제: Alt + 클릭 2. 프레임개념- UI 디자인을 위한 기본적인 틀. - 하나의 화면을 구성하는 요소들을 포함하는 개념임. - 반응형 디자인을 고려할 때도 중요함. 단축키- 프레임 생성: F 3. 섹션개념- 여러 화면의 프레임들을 그룹화할 수 있는 기능. 단축키- 섹션 생성: Shift + S- 섹션 안 쪽의 폭 정리(100px):- 주변..

목차1.도형 편집2.텍스트 편집3.요소 선택 단축키 1. 도형 편집(1) Layout- 비율을 고정하여 크기를 변경할 수 있음 (2) Appearance- 도형을 직접 radius를 변경할 수 있으면 shift를 누르면서 변경하면 10씩 변경이 되기도 함- 여러 방향에 각각 radius의 값을 바꿀 수 있음 (3)Fill- 배경색 변경 (4)Stroke- 외곽선 색상 변경- 여러 방향에 각각 외곽선의 크기를 바꿀 수 있음 2. 텍스트 편집 (1) Typography- Font 크기 변경을 할 수 있음- 자간과 행간의 값을 변경할 수 있음 3. 요소 선택 단축키(ctrl + 클릭) - 위 단축키를 통해 바깥쪽에 있는 요소를 통해서 연결지어 들어가는 것이 아닌 맨 안 쪽에 있는 요소를 바로 선택할 수 있음

목차1.커리큘럼2.피그마란?3.단축키4.출처 1. 커리큘럼 2. 피그마란?: 벡터 기반의 협업 디자인 툴로, 인터페이스 디자인, 웹 사이트 및 모바일 앱 디자인 등 다양한 디자인 작업에 사용됩니다.-> UXUI 디자인을 한다?! => 피그마 필수 - 피그마를 사용해야 하는 이유 3. 단축키 4. 출처https://youtu.be/OHZC19qtqUo?si=x04Xn7FaITccKl8c ※ 앞으로 나올 피그마와 관련된 기초 내용은 위 출처의 시리즈들로 구성되어있습니다.