반응형 디자인/피그마 반응형 33 [피그마] figma에서 이미지 누끼 따기(배경 제거 하기) [피그마] figma에서 이미지 누끼 따기(배경 제거 하기) 안녕하세요. 당근입니다. 오늘은 피그마에서 이미지 누끼따는 두 가지 방법을 소개해드리려고 해요. 사실 피그마에서는 디테일하게 얇은 선으로 이루어진 부분을 포토샵과 같은 그래픽 툴만큼 세세하게 따기는 어렵습니다. (머리카락이라던가.. 머리카락이라던가... 머리카락이라던가!) 좋은 이미지 퀄리티를 유지하기 위해서는 별도의 배경이 제거된 이미지를 불러와서 쓰시는 것을 권장합니다. 하지만 그럼에도 불구하고! 정말로 간단한 용도라던가, 아니면 정말로 간단한 이미지라던가 하는 경우에는 피그마에서 직접 따는 편이 편할 때도 있겠죠. 그런 분들을 위한 포스팅입니다. 1. figma 펜툴로 누끼 따기 포토샵이나 기타 어도비 그래픽 툴을 사용해보신 분들이라면 익.. 2020. 7. 29. [피그마] figma 테이블 삽입하는 플러그인 : Table Generator [피그마] figma 테이블 삽입하는 플러그인 : Table Generator 안녕하세요. 당근입니다. 피그마에서 화면 설계하실 때 테이블을 삽입해야하는 일이 있으시잖아요. 오늘은 테이블 생성을 도와주는 플러그인 Table Generator를 소개해보려고 해요. https://www.figma.com/community/plugin/735922920471082658/Table-Generator Figma - Table Generator | It's really crucial for us as designers to use as much real data in our designs as possible. But ... It's really crucial for us as designers to use as .. 2020. 6. 15. [피그마] figma에서 로컬폰트 사용하기 [피그마] figma에서 로컬폰트 사용하기 피그마에서는 기본적으로 구글 웹폰트들을 제공합니다. 그러나 별도로 다운로드 또는 결제하여 컴퓨터에 설치된 로컬폰트를 쓰려면 세팅이 필요해요. 지금부터 알아보겠습니다. 1. 데스크탑 앱 사용 먼저 로컬폰트를 쓰는 가장 간단한 방법은 피그마 데스크탑용 앱을 쓰는거예요. 별도의 세팅이 없어도 로컬 폰트가 알아서 사용할 수 있도록 활성화 됩니다. 이렇게 구름다리로 결제하여 사용하고 있는 폰트 목록들이 나오게 됩니다. 피그마 데스크탑 앱 설치에 관련한 포스팅은 아래를 참고하세요. https://nicecarrot2.tistory.com/38?category=862528 피그마figma 데스크탑 앱으로 설치하기 및 작업파일(*.fig)로 공유하기 피그마figma 데스크탑 .. 2020. 6. 5. [피그마] figma에서 히스토리 저장으로 파일 버전 관리하기 [피그마] figma에서 히스토리 저장으로 파일 버전 관리하기 안녕하세요. 당근입니다. 오늘은 피그마에서 히스토리 저장으로 파일 버전을 손쉽게 관리할 수 있는 팁을 공유해드릴게요. 피그마에서는 저장이 자동으로 되다보니 한 파일에 계속 덮어쓰듯이 자동저장이 되는데요. 현재 시안을 기록하고 싶을 땐 버전 히스토리를 저장하여 남겨두실 수 있습니다. 피그마에서 메뉴버튼을 눌러 file - save to version history에 들어가세요. 잘 알아보실 수 있게 이름과 간단한 설명을 추가해주시고 save 버튼을 누릅니다. 그런다음에 file - Show version history에서 저장된 버전을 보실 수 있어요. 이렇게 오른쪽 프로퍼티 탭에 버전히스토리가 보이게됩니다. 여러가지 자동 저장 시안들도 남아있.. 2020. 6. 1. [피그마] 알아두면 좋은 figma 단축키 모음 [피그마] 알아두면 좋은 figma 단축키 모음 안녕하세요. 당근입니다. 오늘은 피그마figma에서 쓸 수 있는 단축키 모음을 정리해봤어요. 무작정 figma shortcut이라고 검색해서 나오는 것을 한글로 나름 해석해보고 평소에 제가 음? 이렇게 해도 되던데? 하는 것들을 추가했어요. 또 필요하다 싶어서 평소에 궁금했던 단축키도 구글링해서 추가했어요. (예를들면 전체 잠금 해제라던지...) 들어가기에 앞서, figma에서 Ctrl(cmd)+Shift+/를 누르시면 여러 단축키들을 쉽게 둘러보실 수 있습니다. 그리고 저는 figma를 윈도우 환경에서 주로 사용하기 때문에 Ctrl로 표시했어요. 맥 유저시라면 Cmd로 대체해서 쓰시면 됩니다. 1. File & Properties Ctrl+Shift+E .. 2020. 5. 22. [피그마] fimga에서 패스파인더Pathfinder 사용하기(Shape tool) [피그마] fimga에서 패스파인더Pathfinder 사용하기(Shape tool) 안녕하세요. 당근입니다. 오늘은 저처럼 피그마에 적응중인 여러분을 위해 피그마에서 도형을 그리고 편집할 때 어도비 일러스트에 있는 패스파인더 기능을 어떻게 사용할 수 있는 지 알아보겠습니다. 튜토리얼에 앞서 이 글은 먼저 일러스트에서 패스파인더가 어떤 작용을 하는 툴인지 알고 계신 분을 대상으로 합니다. 하지만 아래에 각 옵션을 선택하면 일어나는 일들을 그림으로 보여드릴거예요. 사용법 자체는 엄청나게 간단하기 때문에 훑어보시면 패스파인더를 모르시는 분이라도 무리없이 이해하실 수 있을거라고 생각해요. 먼저 사각형 도형이 그려져있는 아이콘을 클릭하셔서 원하시는 도형을 그립니다. 패스파인더를 원하시는 분이라면 두개 이상의 도형.. 2020. 5. 16. [피그마] 구글 Material Design Icons 플러그인으로 기본 아이콘 쉽게 삽입하기 [피그마] 구글 Material Design Icons 플러그인으로 기본 아이콘 쉽게 삽입하기 안녕하세요. 당근입니다. 오늘은 피그마figma에서 기본적인 아이콘이 필요할 때 쉽게 삽입하는 플러그인을 소개해드릴거예요. 안드로이드 Material Design icon은 정리도 잘 되어있고 아이콘 종류도 다양해서 널리 쓰이는 무료 아이콘입니다. 피그마에서 플러그인을 이용해서 별도로 svg이미지를 복사하거나 불러오지 않아도 손쉽게 삽입하고 편집하실 수 있어요. 먼저 플러그인 설치를 위해 피그마에서 햄버거버튼(왼쪽 상단) Plugins - Manage plugins...에 들어가셔서 Plugins-Browse all plugins을 누르시거나 아래 주소로 직접 플러그인 페이지에 접속하셔서 플러그인을 설치해주세요.. 2020. 5. 9. [피그마] 고퀄리티 무료 이미지를 바로 불러올 수 있는 플러그인 : Unsplash [피그마] 고퀄리티 무료 이미지를 바로 불러올 수 있는 플러그인 : Unsplash 안녕하세요. 당근입니다. 요즘 피그마를 활용하여 조금씩 업무도 보고 이것저것 만져보면서 적응중인데요. 오늘도 편하고 퀄리티도 좋은 플러그인을 소개해드리려고 합니다. 바로 Unsplash 라는 무료 이미지를 삽입할 수 있는 플러그인입니다. Unsplash 디자인 무료 리스소 사이트에 대해 정리한 페이지에서 한 번 정리한 적이 있는 사이트 인데요. 무료이면서도 느낌있는 고퀄리티 이미지가 많은 사이트입니다. 정말 좋아요. 혹시 무료 리소스에 대한 포스팅이 궁금하시면 여기를 클릭하세요. 언스플래쉬를 설치하고 실행하세요. Plugins - Unsplash를 클릭하면 실행됩니다. 플러그인 사용해보려고 임의의 레이아웃을 만들어봤습니다.. 2020. 4. 23. [피그마] 플러그인 추가하기 [피그마] 플러그인 추가하기 안녕하세요. 당근입니다. 오늘은 디자인 UI프로토타입 툴인 피그마에서 플러그인들을 설치하는 방법에 대해 알아볼 건데요. 데스크탑 앱이나 브라우저 환경 모두 설치방법이 동일합니다. 플러그인 설치는 두가지 방법이 있어요. 먼저 피그마 내부에서 검색하여 설치하는 방법, 또는 검색이나 여러가지 추천 링크를 통해 플러그인 페이지로 바로 접근했을 경우에 해당 페이지에서 설치하는 방법이 있습니다. 1. 피그마 내부에서 플러그인 설치 먼저 피그마 내부에서 플러그인을 검색하여 설치하는 방법에 대해 알아볼게요. 좌측 상단에 햄버거 버튼을 누르셔서 Plugins - Manage Plugins 메뉴에 들어갑니다. 그럼 플러그인 목록이 쭉 뜨는 걸 보실 수 있어요. 이것 저것 둘러보는 것도 도움이 .. 2020. 4. 22. 이전 1 2 3 4 다음
