profile
#정리 #기록

figma, 플러그인 Google Sheets Sync, 데이터를 활용한 이미지 자동 세팅

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

2일 전
·
0개의 댓글
·

figma, 플러그인 sorter, 레이어 정렬

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

3일 전
·
0개의 댓글
·

figma, 플러그인, Blobs, Shaper

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

3일 전
·
0개의 댓글
·

홈페이지 SEO 세팅, og 태그 설정, 구글 네이버 소유권 인증, 넥스트티

홈페이지 링크를 공유할 때 뜨는 썸네일 화면을 오픈그래프라고 부르는 것은 알고 있었는데, 그 설정이 SEO 에 영향을 준다는 것이 이번에 새롭게 알게 되었다. 방법은 꽤 간단한데 아무튼 og 용으로 쓸 이미지 작업과 코드추가가 필요하니 내가 혼자서 하기에 딱 맞는 작업

5일 전
·
0개의 댓글
·

figma, 텍스트 수정 플러그인, text edit / Content Buddy

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

6일 전
·
0개의 댓글
·

figma, 플러그인 Better Font Picker 폰트 확인하기

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

7일 전
·
0개의 댓글
·

figma, 플러그인 Lorem ipsum, Faker 글자 자동생성

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

7일 전
·
0개의 댓글
·

figma, 스타일 한번에 지정하기, Styler 플러그인

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

2023년 1월 29일
·
0개의 댓글
·

figma, 자주 사용하는 단축키 모음

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

2023년 1월 25일
·
0개의 댓글
·

figma, 프로토타입 속성

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

2023년 1월 24일
·
0개의 댓글
·

figma, Components & varients 버튼 컴포넌트 그룹 만들기

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

2023년 1월 24일
·
0개의 댓글
·

figma, Varients Property 배리언츠 프로퍼티

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

2023년 1월 24일
·
0개의 댓글
·

figma, Component Property 컴포넌트 프로퍼티 설정

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

2023년 1월 23일
·
0개의 댓글
·

figma, TurnCate text 글자 반응형 만들기

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

2023년 1월 23일
·
0개의 댓글
·

figma, Resizing 반응형 만들기

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

2023년 1월 22일
·
0개의 댓글
·

figma, Autolayout 기초 구성요소

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

2023년 1월 22일
·
0개의 댓글
·

figma, View 단축키

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

2023년 1월 20일
·
0개의 댓글
·

figma, Use as mask

피그마에서 마스크 기능을 사용하는 방법, 알고는 있었지난 또 새롭게 알게 된 것이 있어서 기록. 기본적으로 피그마에서 어떤 요소를 선택하면 중앙 상단에 Contextual tool 이 생긴다. 요소마다 뜨는게 조금씩 다른데, 두가지 요소를 같이 선택하면 아래처럼 툴이

2023년 1월 19일
·
0개의 댓글
·

figma, 폰트조절 단축키

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

2023년 1월 18일
·
0개의 댓글
·

figma, Nudge amount

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

2023년 1월 18일
·
0개의 댓글
·