반응형 피그마 반응형 16 [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] 인터페이스가 죄다 사라졌어요. 사라진 피그마 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]피그마에서 백그라운드 블러(background blur) 만들기 [figma]피그마에서 백그라운드 블러(background blur) 만들기 안녕하세요. 당근입니다. 오늘도 피그마 사용법을 가지고 왔어요. 오브젝트를 기준으로 뒤에 위치한 요소를 흐리게 만들어주는 백그라운드 블러 (background blur) 효과! 피그마로 적용하는 법을 알아볼건데요. 이번에도 엄청 쉽답니다. 처음부터 차근차근 알아볼까요? 먼저 뒤에 배경이 있어야 블러가 들어간 걸 확인할 수 있겠죠? 저는 언스플래시에서 예쁜 배경 하나를 삽입해봤어요. 플러그인으로 피그마에서 쉽게 삽입할 수 있습니다. 아래 글을 참조하세요. 2020.04.23 - [디자인/피그마] - [피그마] 고퀄리티 무료 이미지를 바로 불러올 수 있는 플러그인 : Unsplash [피그마] 고퀄리티 무료 이미지를 바로 불러올 수.. 2021. 11. 9. [figma] 피그마에서 스크롤 할 때 요소 고정하기(내비게이션, 하단 탭, 플로팅 UI 등) [figma] 피그마에서 스크롤 할 때 요소 고정하기(내비게이션, 하단 탭, 플로팅 UI 등) 안녕하세요. 당근입니다. 오늘은 제가 피그마 관련 포스팅 유입 키워드들을 살펴보다가 프로토타이핑에서 특정 UI를 고정하는 방법을 찾으시는 분들이 꽤 있는 걸 발견했어요. 그래서 준비한 포스팅입니다. 먼저 준비물입니다. 스크롤이 길~게 내려가는 디자인 화면이 있어야겠죠. 전 귀찮으니까 피그마에서 제공한 와이어프레임 UI를 열여봤어요. 이 상단의 내비게이션을 스크롤을 해도 항상 최상단에 떠있도록 위치를 고정해보겠습니다. 내비게이션 바를 선택하고 디자인 탭에서 Constraints 항목을 보세요. 기준점을 설정하고 Fix postion when scrolling을 체크합니다. 만약 여러분이 하단 탭을 고정한다고 하면.. 2021. 8. 27. [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. [피그마] 포토샵(*.psd) 파일 피그마에 불러오기 [피그마] 포토샵(*.psd) 파일 피그마에 불러오기 안녕하세요. 당근입니다. 오늘은 포토샵으로 제작된 모바일이나 웹 화면을 피그마에 불러오려면 어떻게 해야하는지 알아볼거예요. 실습을 위해 간단하게 포토샵에서 모바일 화면처럼 보이는 예제를 만들었습니다. 먼저 PSD파일을 만들어야겠죠. ctrl + s를 누르시거나 file-save/save as를 눌러 포토샵 파일을 저장하세요. 그리고 아래 사이트에 접속합니다. https://avocode.com/convert-psd-to-sketch Design Converter - Convert PSD designs to Sketch | Avocode Switching from Photoshop to Sketch, but don’t have the time to ma.. 2020. 8. 20. 이전 1 2 다음
