컬러 시스템을 만들어주는 플러그인. 이런 게 있을 법한테 지금까지 몰랐다. 다른 사이트에서 컬러 베리에이션을 하고 가져와서 하나씩 입력을 했다. Tailwind Color Generator 는 선택한 색상을 500으로 두고 100 ~ 900 까지 색상을 베리에이션해서

오토레이아웃이 다른 요소를 추가하고 싶다면, 해당 요소를 클릭 드래그 해서 넣을 수 있다. 다만 오토레이아웃의 중첩이 많을 때는 불편할 때가 있다.이렇게 아이콘 우측에 빨간 점을 넣고 싶을 때, 화면을 확대해서 넣으면 괜찮지만, 그냥 넣으려고 하면 해당 영역이 잘 잡히

Google sheets Sync 플러그인을 사용하면, 구글 시트에 정리한 데이터를 피그마 디자인에 적용할 수 있다. 오토레이아웃을 잘 활용하면 카드뉴스 템플릿을 같은 것을 만들고, 데이터를 구글 시트로 한번에 관리하는 식으로 사용할 수도 있을 것 같은데, 아직 거기까

레이어정렬 플러그인이 있다니.. 중간중간 레이어를 복사해서 쓰면 레이어 순서가 뒤섰여서, 네이밍을 다시 해서 번호가 뒤죽박죽이 된다. 그럴 때 마다 레이어를 하나씩 잡으면서 위로 아래로 재정렬을 해주곤 했었는데.. 이 플러그인을 쓰면 한방에 해결 된다. 프레임을 순서대

특정 형태를 자동으로 만들어주는 플러그인이다. Blobs 는 Complexity 와 Uniqueness 를 조절해 불규칙한 원형 셰이프를 만들 수 있다.Shaper 는 블롭과 다르데 조금 더 다듬어진 형태들을 선택해서 쓸 수 있고, 내가 만든 형태를 추가할 수도 있다.

디자인 요소의 텍스트만 따로 리스터업해서 수정할 수 있는 플러그인이다. 검색을 통해 해당 글씨를 선택하고 일괄 수정할 수 있다. text edit 플러그인 을 검색해서 실행하고리스트에 뜬 글자를 누르면 해당 하면으로 이동하며, 수정할 수 있고검색을 통해 해당 글자를 일

기존 피그마의 폰트 선택 창에서는 폰트 디자인이 보이지 않는다. 그래서 대부분 검색해서 쓰긴 하는데, 가끔 폰트를 보며 디자인 셀렉을 해야 할때 Better Font Picker 를 사용하면 편리하다. 기존 폰트의 드롭박스 창은 폰트 이름만 나열되지만, 해당 플로그인은

글자를 자동 생성하는 피그마 플러그인, 대표적으로 로렘입숨과 페이커가 있는데, 로렘입숨은 의미없는 알파벳의 나열로 전체적인 길이나 덩어리감을 보기 좋다면, 페이커는 조금 더 구체적인 워딩을 넣을 수 있다. 플러그인 에서 Lorem ipsum 검색하고, 해당 텍스트 박스

아래처럼 100 부터 900 까지 컬러 팔레트를 만들고 스타일을 지정할 때 Styler 플러그인을 사용하면 하나하나 스타일 등록을 하지 않고 한번에 할 수 있다. 자신의 컬러로 위에 처럼 팔레트를 만들 고 싶다면 이 Eva Design System 을 사용해도 좋다.우

mac 기준control + shift + ? - 단축키 보기control + / - 퀵액션 (기능검색)cmd + shift + <> - 폰트 크기cmd + option + <> - 폰트 굵기option + shift + <> - 행간option + &

프로토타입 속성 정리On tap (Click) - 탭이나 클릭On drag - 드래그 (스와이프)While hovering - 커서가 올라가 있는 동안While pressing - 누르고 있는 동안Key/Gamepad - 키 설정Mouse enter - 마우스가 오브젝

버튼 컴포넌트 그룹을 만들어보면, 컴포넌트와 배리언트를 어떻게 같이 쓰는지 감이 온다. 크게 보았을 때 컴포넌트 프로퍼티가 더 작은 개념으로 버튼 안의 아이콘 유무나 교체, 텍스트 수정 등이라면, 배리언트 프로퍼티는 그런 버튼의 묶음을 행과 열로 다시 그룹핑해서 구분하

요소를 모두 선택하고 상단 컴포넌트 아이콘의 create component set 을 눌러서 한번에 설정할 수 있다. (하나하나 컴포넌트 만들고 모두 선택해서 우측 패널에서 하는 방식보다 단순)배리언트로 묶은 것은 점선으로 감싸지고(해제할 때는 이 점선 밖으로 클릭 드

피그마의 컴포넌트는 프로퍼티를 설정해서 관리할 수 있다. 기본적으로 3가지, Boolean, Instance Swap, Text 다. 불린은 true, false 를 통해 해당 요소가 보이거나 안 보이게 설정하는 기능이다. 컴포넌트로 요소의 아이템 요소를 누르고 우측

fixed 사이즈로 만든 긴 본문형 글을 제목과 묶고, 컨테이너 사이즈에 맞게 ... 으로 표시되게 하는 방법입니다. 우선 제목과 본문을 묶으면 이렇게 컨테이너 사이즈에 맞게 움직이지 않습니다. 이때 안의 본문 텍스트의 가로, 세로 리사이징을 fixde 에서 fill

다양한 디바이스 크기에 맞춰 개별적으로 사이즈를 맞추기는 어렵다. 그래도 피그마는 크기에 따라 사이즈가 유연하게 늘어나는 리사이징 기능을 제공한다. Autolayout 을 적용하고 우측 패널의 Frame 설정을 보면 리사이징 이 생긴 것을 볼 수 있다.현재는 Hug 인

디자인을 정리라고 생각했던 이유는 요소의 크기, 유무에 따라 레이아웃을 계속 조절해주어야 했기 때문인데, 피그마는 이런 작업을 어느정도 자동화해준다. 완벽한 자동화라기 보다는 레이아웃에 대한 규칙을 만들면 그것이 지켜진다고 해야 할까. 아무튼 수작업과 자동화의 중간지점

피그마 보기 설정 관련 유용한 단축키들cmd + \\UI 숨기기, 피그마 좌우 패널을 숨길 수 있다. 작은 화면으로 디자인을 확인할 때 사용하면 좋다.\|shift + 1캔버스 한눈에 보기, 아주 가끔 피그마의 광활한 작업영역 안에서 길을 잃을 때 사용하면 좋다.\|s

피그마 폰트 조절 단축키, 익숙해지면 아주 유용할 것 같다. 크기, 굵기, 행간, 자간.. 순으로 손으로 외워두자. (cmd = ctrl, option = alt)Font size : 크기 - cmd + shift + < >Font weight : 굵기 - cmd

프로덕트 디자인에서는 픽셀단위로 크기를 조절하고, 8배수 처럼 특정 배수로 세팅을 하기도 한다. 이런 길이 값을 미리 고정해서 사용할 때 Nudge amount 를 세팅해두면 좋다. 피그마 Preferences - Nudge-amount 누르면 Small nudge 와