반응형 디자인/피그마 반응형 33 [figma] 피그마 커버 또는 썸네일 지정하기 안녕하세요. 당근입니다. 오늘은 피그마 디자인 작업 공유하실 때 필요한 커버 또는 썸네일 지정에 대해서 알아볼게요. 별도로 썸네일을 지정해주지 않으면 작업 링크 공유시에 피그마는 작업된 프레임들이 나열되어있는 페이지 이미지를 대표 이미지로 사용합니다. 간단히 보여드리기 위해 색깔로 채워진 샘플 파일을 만들었어요. 이렇게 말이죠. 요렇게 생긴 작업파일들이 그대로 공유되는게 싫으시면 별도로 커버를 만들어서 지정해줘야해요. 썸네일 커버를 만들어주겠습니다. 피그마에서 알려주는대로 1920*1080 사이즈로 만들어봤어요. 프레임을 선택하고 우클릭해서 Set as thumbnail 을 선택합니다. 이렇게 프레임 옆에 해당 프레임이 썸네일임을 나타내는 아이콘이 생겼어요. 확인해볼까요? 이렇게 지정한 이미지가 썸네일로.. 2024. 2. 15. [figma] 레이어 이름 쉽게 쓰는 플러그인 Figma Autoname! 안녕하세요. 당근입니다. 피그마가 대중화되면서 디자인 파일을 공유하는 일이 잦아지고 있습니다. 그럴 때 레이어 정리와 이름 쓰는 거 정말 귀찮잖아요. 오늘은 레이어 이름 지정에 매우 유용한 플러그인을 소개해보려고 합니다. 바로 Figma Autoname! 얼른 설치부터 해볼까요? 피그마 메인 메뉴 - Plugin - Manage Plug in 선택하셔서 플러그인 창을 열어줍니다. figma autoname 을 검색하시고요. Run을 클릭해서 플러그인을 실행시킵니다. https://www.figma.com/community/plugin/1160642826057169962 Figma Autoname | Figma Community Free & Open Source. Sponsor the plugin www... 2023. 12. 13. [figma] 커서 챗(Cursor Chat)으로 간단한 채팅 주고 받기 [figma] 커서 챗(Cursor Chat)으로 간단한 채팅 주고 받기 안녕하세요. 당근입니다. 피그마에서 간단한 커뮤니케이션을 할 때 주로 어떻게 하시나요? 물론 댓글(코멘트)를 달수도 있지만 더 간단하게 지나가는 마우스 커서에 말을 걸거나 장난을 쳐보세요. 피그마에서 기본으로 제공하는 커서 챗(cursor chat)을 사용해서 말이죠. 커서 챗은 커서에 간단한 말풍선을 달아서 채팅을 할 수 있도록 만들어졌습니다. 여기서 주고 받는 메세지들은 기본적으로 저장되지 않고 일정 시간이 지나면 사라져요. 단축키 / 를 누르시거나 마우스 우클릭 - cuorsor chat 을 선택해서 활성화해보세요. 마우스 바로 아래에 말풍선이 생기고 키보드 입력이 가능해집니다. 마우스 커서를 따라다니는 말풍선에 텍스트를 입력.. 2023. 9. 27. [figma] 피그마에서 마우스 오버(hover) 인터랙션 만들기 안녕하세요! 당근입니다. 오늘은 피그마에서 배리언트를 통해 마우스 오버 인터랙션 하는 법을 알아보겠습니다. 본격적으로 Hover 액션을 만들기 전에 마우스가 올라갔을 때 바뀔 버튼같은 요소가 있어야겠죠. 요런 블럭을 하나 만들어봤어요. 이 버튼을 누르거나 단축키 Ctrl + Alt + K 를 눌러 컴포넌트로 만들어줍니다. 만드신 요소들을 선택한 채로 우클릭하여 Create component 하셔도 동일하게 컴포넌트로 만드실 수 있어요. Hover 용 버튼도 만들어야하기 때문에 배리언트를 추가해줍니다. 오른쪽처럼 동일한 컴포넌트가 복사되셨죠? 둘중 하나를 호버용 디자인으로 바꿔주세요. 이렇게 말이죠. 그리고 ①Prototype 탭으로 갑니다. ②버튼을 서로 연결해주고 ③ Interaction details.. 2023. 4. 25. [figma] 피그마에서 선을 면으로 만들기(Outline stroke) [figma] 피그마에서 선을 면으로 만들기(Outline stroke) 안녕하세요. 당근입니다. 피그마에서 선으로 된 도형이나 Shape을 다루시는 경우, 선을 면으로 처리해줘야하는 일이 있을거예요. 오늘은 크기에 비례해서 선 굵기가 유지되도록 하는 Outline stroke를 Figma에서는 어떻게 구현하는지 알아볼 건데요. 아마 일러스트레이터 등 그래픽 툴을 사용하시던 분이라면 이 작업이 필요한 이유를 이미 납득하고 계실 거라는 생각이 듭니다. 문제는 Figma로 넘어왔을때 이 메뉴가 어디에 숨어있는건지 모른다는 것이죠... 일단 이 Outline stroke를 왜 해야 하는지 간단히 설명해보겠습니다. 만약 이렇게 생긴 도형을 만들었다고 해볼게요. Stroke 속성을 그대로 살려둔 왼쪽 도형은 크기.. 2022. 10. 8. [figma] 피그마에서 여러 페이지를 한 PDF로 뽑는 방법 [figma] 피그마에서 여러 페이지를 한 PDF로 뽑는 방법 안녕하세요. 당근입니다. 오늘은 피그마에서 작업한 파일을 PDF로 출력할 때, 한 PDF에 순서대로 나오게 저장해보겠습니다. 이렇게 샘플 파일을 만들어봤어요. 모두 프레임으로 만드셔야합니다. 이걸 복수선택해서 그대로 export탭에서 출력하시면 이렇게 하나씩 담긴 여러개의 PDF가 출력된답니다. 그럼 제출용 시안이나 포트폴리오를 만들기위해서 페이지가 나열된 하나의 PDF 파일을 만드려면 어떻게 해야할까요? 이렇게 'file-export frames to PDF'로 하셔야합니다. export pdf 하시면 바로 파일이 받아지면서 원하는대로 잘 출력이 된 것을 볼 수 있어요. 페이지 순서는 프레임 이름의 넘버로 매겨지는 것은 아니고 배치상으로 왼.. 2022. 9. 14. [figma] 인터페이스가 죄다 사라졌어요. 사라진 피그마 UI 1초 해결 [figma] 인터페이스가 죄다 사라졌어요. 사라진 피그마 UI 1초 해결 안녕하세요. 당근입니다. 있나요...? 피그마로 협업해본적?... 피그마 작업하시다가 UI가 모두 사라졌거나 해결법을 질문받은적...? 사실 이 기능 단축키로 1초만에 해결이 가능하지만 여러분이나 여러분과 협업하시는 분이 피그마에 아직 익숙하지 않다면 맞닥드렸을 때 식겁하는 기능이죠. 바로 Show/Hide UI 기능인데요. 단축키 Ctrl(cmd)+\ 로 간단하게 해결하실 수 있습니다. 단축키 말고도 메뉴-View-Show/Hide UI로 UI를 감출 수 있지만, Hide가 된 상태에서는 이 메뉴바 마저 사라져버리기때문에 여러분이 준비되지 않은 상태에서 UI가 사라져버렸다면 단축키로 해결하시는 수 밖에 없습니다. 그러니까 대략적.. 2022. 7. 8. [figma] 피그마 2022년 5월 업데이트! 테두리 한쪽만 하기 [figma] 피그마 2022년 5월 업데이트! 테두리 한쪽만 하기 안녕하세요! 당근입니다. 피그마가 최근 22년 5월에 대규모 업데이트를 했어요. 유튜브로 간단히 업데이트 내용을 설명하는 프리젠테이션을 보니까 그동안 불편했던 것이 드디어 개선된 것, 생각지 않았는데 기대 이상으로 편의를 개선해준 것 등 여러 항목이 있었는데요. 이번에 저를 흥분의 도가니로 밀어넣은 것은 바로바로 Individual Stroke 항목!!!!!!! 이렇게 한쪽 면만 테두리를 남겨 일정한 여백을 가지고 선을 가진 도형, 은근히 쓸모가 많잖아요. 탭의 형태라던가 게시판 형태의 테이블이라던가 말이죠... 그동안 피그마에서는 기존에 Borde라는 플러그인으로 어찌저찌 구현은 할 수 있었는데 오토레이아웃을 쓸 수가 없어서 엄청나게 .. 2022. 5. 24. [figma] 물결 디자인이 이렇게 쉽다고...? 웨이브 만드는 꿀 플러그인 : Get Waves [figma] 물결 디자인이 이렇게 쉽다고...? 웨이브 만드는 꿀 플러그인 : Get Waves 안녕하세요. 당근입니다. 오늘은 피그마 커뮤니티를 돌아보던 중 발견한 꿀 플러그인! Get Waves를 소개해드릴게요. 먼저 플러그인을 설치해볼까요? 피그마에서 파일을 열고 Plugins - Browse plugins in Community로 가셔서 Get Waves를 검색하고 설치하세요. Plugins - Get Waves를 선택해서 플러그인 실행! 주사위를 굴려서 슬라이더 위치에 따라 어떤 느낌의 물결이 생기는 지 감을 잡아보세요. 원하시는 모양이 나올 때 까지 굴려 보셔도 되고요. 슬라이더가 오른쪽으로 갈 수록 마루와 골의 양이 많아집니다. 슬라이드를 원하는 곳에 위치시킨 후 주사위를 굴려 알맞은 모양.. 2022. 4. 16. 이전 1 2 3 4 다음
