Y양의 성장 Story

피그마는 신기하게 다른 툴과 달리 저장하는 기능의 단축키가 없고,명칭도 달라서 처음 공부할 때 약간 헤맸던 기능이다. 'save local copy...'피그마를 조금만 손 놔버리면 잊어버릴 것 같은 기능... 그러므로 블로그에 기능저장!

플러그인기능Unsplash무료 이미지 사용Material Design Icons무료 아이콘 사용Mesh gradient그라데이션 생성JitterJitter Plugin을 활용하여 인터랙션 걸고 싶은 프레임을 선택 >Copy > Open in jitter 클릭 > Jitter 사이트에서 애니메이트 설정(포트폴리오 만들 때 유용)Protopie프로토파이Material Theme Builder적용 컬러 한번에 랜덤으로 바꾸는 기능Material Symbal무료 아이콘 사용Measure가이드 정의 내리고 싶은 오브젝트를 잡고말풍선이나 간격측정 라인 클릭

기능기능 쓰는 방법 / 기능 안 부가 기능비고Cover 만드는 법오른쪽 버튼 > Setas thumbnail 아이콘 사이즈 다양화를 위한 Scale처리Constraints에서 Scale처리프레임 안 마스크 기능Clip content 체크 그래프 그릴 때 유용한 기능Ellipse(원툴) 활용 Child component 수정 후 되돌릴 때오른쪽 클릭 > Reset all changes 오토 레이아웃(Auto layout) 기능Vertical layout ⬇️아래로 정렬Horizontal layout ➡️옆으로 정렬Wrap ↩️프레임 사이즈 조절에 따라 위 두개의 정렬이 자동으로 조절 됨(반응형으로 생각하면 됨)Margin & Padding마진, 패딩 설정Canvas stackingAlign 옆에 설정 아..

Ctrl = CmdAlt = Option 기능단축키비고원하는 곳 줌인Z누르고 원하는 곳 드래그 레이어가 복잡할 때 원하는 레이어 찾는 방법오른쪽 마우스 버튼 > Select layer MoveV ScaleK FrameF 나 A SectionShift + SSection 엣지를 더블클릭하면 크기 자동맞춤SliceS PenP CommentC RectangleR LineL ArrowShift + L EllipseO Image/VideoShift + cmd + K PencilShift + P TextT 복제Cmd + D 룰러 보이기 기능(Show Ruler)Shift + R 면과 선 바꾸기(Swap fill and stroke)Shift + X 선 아웃라인(Outline stroke)Option + Cmd + ..

하이어라키(Hierarchy)란? 상하위 개념 / 계층이나 위계  피그마 요소의 하이어라키 Team > Project > File  작업환경 하이어라키 File > Page > Canvas > Section > Frame > Elements(오브젝트, 이미지, 에셋 같은 구성요소들)  피그마의 인터페이스  왼쪽 바 : 레이어오른쪽 바 : 속성 패널하단 : 툴바가운데 : 캔버스프레임(Frame) : 디자인 할 수 있는 화면엘리먼트 : 프레임 안에 들어가는 여러가지 요소들 (ex: 도형, 프레임 등)섹션(Section) : 프레임이 여러개 있을 때 묶어줄 수 있는 요소 / Section을 Section으로도 묶어줄 수 있음

Team > Project >File 어느 단위에서 초대할지 정할 수 있음  피그마 구성원 권한 owner : 이 팀의 소유자admin : 소유자와 같은 권한이지만 admin이 owner의 권한을 수정할 수는 없음Editor : Team과 project 안의 파일들을 편집할 수 있는 권한 (인당 얼마의 과금이 필요할 수 있음)Viewer : 편집없이 보기만 하는 권한 초대하는 방법 1) 오른쪽 상단에 share 클릭2) ' 링크를 복사하기 or 피그마에 가입한 계정 초대 ' 이렇게 두가지 방법이 있음     (팀 협업을 할 때는 링크를 복사하는 것보다 이메일로 초대하는 경우가 많음)3) 'can edit '나 'can view'로 권한 설정

애플의 디자인 가이드 https://developer.apple.com/kr/design/human-interface-guidelines/typography 타이포그래피 | Apple Developer Documentation타이포그래피 선택지는 가독성 있는 텍스트를 표시하고, 정보 계층을 명시하고, 중요한 콘텐츠를 전달하며, 브랜드 또는 스타일을 선보일 수 있습니다.developer.apple.com 구글 디자인 가이드 https://m3.material.io/styles/typography/type-scale-tokens Typography – Material Design 3The Material Design type scale includes a range of contrasting styles t..

01. 무료 고화질 이미지 사이트_Unsplash   고화질 이미지들을 무료로 활용할 수 있다.특히 Presets에서 여러개의 오브젝트들에 랜덤으로 이미지를 넣거나카테고리에 해당하는 이미지들을 한 번에 랜덤으로 넣을 수 있다.  02. 여러 아이콘을 활용할 수 있는 플러그인_Material Design Icons   여러개의 무료 아이콘들을 활용할 수 있고(유료도 있음)아이콘 타입이나 크기, 컬러도 선택하여 활용 가능. 크기가 달라도 지정 오브젝트 클릭 후 아이콘을 클릭하면지정한 오브젝트 안에 아이콘 생성.  03. 디자인한 화면 순서와 연결 보여주는 플러그인_Autoflow   예를 들어 그리드 버튼을 누르면 그리드 뷰 화면으로 넘어가게 하고 싶다면그리드 버튼 클릭 후, Shift를 누른 상태에서 Fr..

피그마에서 디자인 하면서 벡터나 비트맵으로설정을 바꾸고 싶을 때,   오른쪽 패널 상단 화면 퍼센트지 조절하는 부분 선택 >Pixewl preview > Disabled(벡터) / 1x, 2x(비트맵) 단축키 : shift+cmd+P

레이어명 정리 방법 '/'를 활용해 인스턴스 폴더 구분(ex: Icon/Heart, Icon/Star) 레이어명 앞에 .(점)과 _(언더바)를 붙이면 숨김처리  마스터 컴포넌트 생성 단축키option + cmd + K (Create Component)  인스턴스 생성마스터 컴포넌트 복사  마스터 컴포넌트 생성(다중)  마스터 컴포넌트 만들 요소 드래그로 선택 후왼쪽 속성 패널에서 Create multiple components 클릭  인스턴스 디테치(Detach)  option + cmd + B(Detach instance)  마스터 컴포넌트 디테치(Detach)  마스터 컴포넌트 디테치는 플러그를 깔아야함.Plugins > Manage plugins...로 가서   Detach Component 검색..