반응형 피그마 프로토타이핑 반응형 4 [피그마] 알아두면 좋은 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. [figma] 피그마 미러mirror 앱으로 디자인 모바일 환경에서 보기 안녕하세요. 당근입니다. 피그마에서 디자인을 한 다음에 재생버튼을 눌러 프로토타입을 볼 때 PC버전은 잘 나오지만 모바일 환경을 PC에서 미리보기 할 때 불편하잖아요. 브라우저 세팅으로 모바일 환경으로 맞출 수 있긴 하지만 한계가 있고요. 그래서 피그마에서는 피그마 미러(figma mirror)라는 앱을 통해 모바일에서도 모바일 환경에 최적화된 디자인 프로토타이핑을 볼 수 있는 환경을 제공하고 있는데요. 오늘은 피그마 미러 사용법에 대해 간단히 알아볼까요? 앱스토어나 구글스토어에서 피그마를 검색하세요. 이렇게 생긴 앱을 다운받으시면 됩니다. 앱을 실행하시면 로그인창이 떠요. 현재 작업중인 피그마에 로그인 되어 있는 아이디와 동일한 걸로 로그인해야겠죠? 저는 구글 계정으로 로그인했기 때문에 Log in w.. 2020. 4. 13. [피그마figma] 텍스트 길이에 따라 변하는 플렉서블flexible 버튼 만들기 [피그마figma] 텍스트 길이에 따라 크기가 변하는 플렉서블flexible 버튼 만들기 안녕하세요. 당근입니다. 오늘은 간단하지만 되게되게 유용한 피그마 튜토리얼입니다. 저도 요즘 피그마에 적응중이라 차근차근 해보면서 가끔은 삽질도 하면서? ... 공부해나가는 중입니다. 오늘은 버튼을 만들어볼건데 텍스트를 기준으로 여백을 유지하면서 자동으로 크기가 늘어나는 버튼을 만들 것입니다. 이렇게 말이죠. 먼저 버튼을 만들고 Create Component 해줍니다. 버튼 안에 있는 텍스트의 위치가 박스의 중앙에 위치하도록 Constraints를 설정합니다. Paragraph도 가운데 정렬해주셔야 텍스트 수정할 때 용이하겠죠. 텍스트의 가로크기를 확인하신 다음 박스를 다시 선택하시고 텍스트 크기+양옆 여백(패딩)을.. 2020. 3. 3. 이전 1 다음
