피그마9 피그마에서 타이포 다루기 피그마 기초 스터디로그 · 03 피그마에서 타이포 다루기BX 3일차에서 폰트의 역할을 개념으로 배웠다면,오늘은 그걸 피그마 화면 안에서 실제로 구현하는 법을 배웠어요.TODAY'S BASICS오늘 배운 네 가지1위계크기·굵기로 읽는 순서 만들기2글자 스타일자주 쓰는 설정을 저장해두기3글자 규칙줄간격·자간을 통일하는 기준4섹션여러 프레임을 묶어 정리하기01 · HIERARCHY위계크기·굵기로 읽는 순서 만들기BX 3일차에서 배운 "위계" 개념을, 피그마에서는 실제 숫자 값으로 구현해요.제목·부제목·본문마다 크기와 굵기를 다르게 줘서 읽는 순서를 만들어요.위계 예시제목 · 24px Bold부제목 · 16px Semibold본문 · 14px Regular. 이렇게 세 단계만 나눠도 화면에 순서가 생겨요.왜 중.. 2026. 10. 1. 레이아웃 규칙, 오토 레이아웃과 허그 · 필 · 픽스 피그마 기초 스터디로그 · 02 레이아웃 규칙오토 레이아웃과 허그 · 필 · 픽스1일차에서 프레임과 레이어를 배웠는데,오늘은 그 안의 요소들을 자동으로 정리해주는 기능을 배웠어요.이름부터 낯선 "허그·필·픽스"까지 정리해볼게요.TODAY'S BASICS오늘 배운 네 가지1오토 레이아웃요소를 자동으로 정리해주는 기능2크기와 정렬요소들의 기준선과 간격 맞추기3UI 요소버튼처럼 재사용하는 조합 만들기4허그 · 필 · 픽스크기가 반응하는 세 가지 방식01 · AUTO LAYOUT오토 레이아웃요소를 자동으로 정리해주는 기능오토 레이아웃을 켜면 요소들 사이 간격과 정렬을 자동으로 맞춰줘요.하나씩 손으로 옮기지 않아도 알아서 줄이 맞아요.적용 전 vs 후BEFOREABC→AFTER (오토 레이아웃)ABC왜 중요한가요.. 2026. 10. 1. 프레임, 레이어, 그리고 그리드 피그마 기초 스터디로그 · 01 프레임, 레이어, 그리고 그리드오늘부터 피그마를 완전 기초부터 배우기 시작했어요.BX디자인이 "왜, 무엇을"을 다뤘다면, 이제부턴 그걸 손으로 어떻게 만드는지도 같이 기록해보려고요.TODAY'S BASICS오늘 배운 네 가지1프레임작업을 담는 캔버스2레이어 · 눈 아이콘쌓인 요소를 정리하고 숨기기3레이아웃 그리드정렬 기준을 잡아주는 격자4이름 바꾸기 · 단축키작업 속도를 빠르게 만드는 습관01 · FRAME프레임작업을 담는 캔버스프레임은 디자인이 들어갈 화면 하나의 틀이에요.웹페이지 화면 하나, 모바일 화면 하나가 각각 프레임이라고 보면 돼요.프레임 예시FRAME왜 중요한가프레임 안에 넣어야 그 화면 크기(모바일, 데스크탑 등) 기준으로 작업할 수 있어요.프레임 밖에 그냥.. 2026. 9. 30. 이전 1 2 다음
