반응형 figma 반응형 17 [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] 피그마 2022년 5월 업데이트! 테두리 한쪽만 하기 [figma] 피그마 2022년 5월 업데이트! 테두리 한쪽만 하기 안녕하세요! 당근입니다. 피그마가 최근 22년 5월에 대규모 업데이트를 했어요. 유튜브로 간단히 업데이트 내용을 설명하는 프리젠테이션을 보니까 그동안 불편했던 것이 드디어 개선된 것, 생각지 않았는데 기대 이상으로 편의를 개선해준 것 등 여러 항목이 있었는데요. 이번에 저를 흥분의 도가니로 밀어넣은 것은 바로바로 Individual Stroke 항목!!!!!!! 이렇게 한쪽 면만 테두리를 남겨 일정한 여백을 가지고 선을 가진 도형, 은근히 쓸모가 많잖아요. 탭의 형태라던가 게시판 형태의 테이블이라던가 말이죠... 그동안 피그마에서는 기존에 Borde라는 플러그인으로 어찌저찌 구현은 할 수 있었는데 오토레이아웃을 쓸 수가 없어서 엄청나게 .. 2022. 5. 24. [figma]피그마에서 백그라운드 블러(background blur) 만들기 [figma]피그마에서 백그라운드 블러(background blur) 만들기 안녕하세요. 당근입니다. 오늘도 피그마 사용법을 가지고 왔어요. 오브젝트를 기준으로 뒤에 위치한 요소를 흐리게 만들어주는 백그라운드 블러 (background blur) 효과! 피그마로 적용하는 법을 알아볼건데요. 이번에도 엄청 쉽답니다. 처음부터 차근차근 알아볼까요? 먼저 뒤에 배경이 있어야 블러가 들어간 걸 확인할 수 있겠죠? 저는 언스플래시에서 예쁜 배경 하나를 삽입해봤어요. 플러그인으로 피그마에서 쉽게 삽입할 수 있습니다. 아래 글을 참조하세요. 2020.04.23 - [디자인/피그마] - [피그마] 고퀄리티 무료 이미지를 바로 불러올 수 있는 플러그인 : Unsplash [피그마] 고퀄리티 무료 이미지를 바로 불러올 수.. 2021. 11. 9. [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등) [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등) 안녕하세요. 당근입니다. 오늘은 피그마 프로토타이핑에 대한 포스팅입니다. 프로토타이핑 할 때, 어떤 버튼을 누르면 어떤 페이지로 이동하게 하는 액션도 많지만, 버튼을 눌렀을 때 창을 띄우거나 드롭다운 리스트를 보여줘야한다거나 하는, 그래서 오버레이(overay)를 활용해야하는 액션도 적지않습니다. 오늘은 가운데에 팝업창이나 달력 등의 UI를 띄우는 것 뿐 아니라 원하는 위치에 디자인 요소가 오버레이 되도록 프로토타이핑하는 방법을 알려드릴게요. 이렇게 말이죠. 1. 화면 가운데에 오버레이하여 팝업창 띄우기 먼저 화면 가운데에 띄우는 방법입니다. 이렇게 결제 정보를 입력해야하는 UI를 그렸다고 가정을 해볼게요. 여기서.. 2021. 8. 26. [figma] 피그마에서 텍스트 스타일 만들고 적용하기 [figma] 피그마에서 텍스트 스타일 만들고 적용하기 안녕하세요. 당근입니다. 오늘은 피그마에서 텍스트 스타일을 지정하고 작업하면서 텍스트를 통일감있게 적용할 수 있는 기능을 알려드릴게요. 먼저 필요한 크기와 폰트, 굵기, 행간 등을 지정해서 스타일을 만드세요. 저는 이렇게 7가지를 만들어볼게요. 만든 텍스트 하나를 선택하시고 오른쪽 디자인탭에서 Text 항목을 보세요. 텍스트 옆에 점 4개가 있습니다. (2번) 그 버튼을 클릭하세요. 그럼 Text Style을 지정할 수 있는 창이 생겨요. 플러스 버튼을 누릅니다. 여기에서 텍스트 스타일을 적용해요. 이름을 입력해주시고요. Create style 버튼을 누릅니다. 이렇게 제가 원하는 Headline 1에 해당하는 텍스트 스타일이 잘 저장되었어요. 나머.. 2021. 8. 9. [피그마] 업데이트된 오토레이아웃 기능! 더 쉬워진 반응형 버튼 만들기 [피그마] 업데이트된 오토레이아웃 기능! 더 쉬워진 자동으로 반응형 버튼 만들기 안녕하세요. 당근입니다. 지난번에 figma에서 텍스트 길이에 반응하는 버튼을 만드는 방법을 포스팅한적이 있죠. 그때는 저도 피그마가 익숙치않던 시절이었는데요. 바로 이 포스팅입니다. 2020/03/03 - [디자인/피그마] - [피그마figma] 텍스트 길이에 따라 변하는 플렉서블flexible 버튼 만들기 [피그마figma] 텍스트 길이에 따라 변하는 플렉서블flexible 버튼 만들기 [피그마figma] 텍스트 길이에 따라 크기가 변하는 플렉서블flexible 버튼 만들기 안녕하세요. 당근입니다. 오늘은 간단하지만 되게되게 유용한 피그마 튜토리얼입니다. 저도 요즘 피그마에 적응중 nicecarrot2.tistory.co.. 2020. 12. 31. [피그마] Google Sheet Sync : 이미지와 데이터를 스프레드 시트로 한번에 업데이트 해보자. [피그마] Google Sheet Sync : 이미지와 데이터를 스프레드 시트로 한번에 업데이트 해보자. 안녕하세요. 당근입니다. 오늘은 다른 플러그인들과 달리 사용법이 조금... 아주 조금 복잡해서 미뤄두었던 꿀 플러그인 Google Sheet Sync를 소개해보겠습니다. 같은 포맷인 컴포넌트에 데이터가 다르게 많이 들어갈 때, 어떻게 하시나요? 예를 들어 쇼핑몰에 상품이 100개 있다고 해볼게요. 그럼 100개의 상품 이미지와 이름과 설명과 별점과 등등의 요소들이 있겠죠? 시안을 만드는 단계에서도 생각보다 같은 레이아웃에 다른 데이터를 넣어야 할 일들이 많이 생깁니다. 일일이 텍스트 수정하고~ 이미지 수정하고~ 컬러 바꾸고~ 이런 생고생을 덜어줄 구글 시트 싱크! 빨리 소개해볼게요. 먼저 플러그인을 .. 2020. 8. 25. 이전 1 2 다음
