반응형 피그마 프로토타입 반응형 4 [figma] 피그마에서 스크롤 할 때 요소 고정하기(내비게이션, 하단 탭, 플로팅 UI 등) [figma] 피그마에서 스크롤 할 때 요소 고정하기(내비게이션, 하단 탭, 플로팅 UI 등) 안녕하세요. 당근입니다. 오늘은 제가 피그마 관련 포스팅 유입 키워드들을 살펴보다가 프로토타이핑에서 특정 UI를 고정하는 방법을 찾으시는 분들이 꽤 있는 걸 발견했어요. 그래서 준비한 포스팅입니다. 먼저 준비물입니다. 스크롤이 길~게 내려가는 디자인 화면이 있어야겠죠. 전 귀찮으니까 피그마에서 제공한 와이어프레임 UI를 열여봤어요. 이 상단의 내비게이션을 스크롤을 해도 항상 최상단에 떠있도록 위치를 고정해보겠습니다. 내비게이션 바를 선택하고 디자인 탭에서 Constraints 항목을 보세요. 기준점을 설정하고 Fix postion when scrolling을 체크합니다. 만약 여러분이 하단 탭을 고정한다고 하면.. 2021. 8. 27. [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등) [figma] 피그마 프로토타입에서 오버레이로 창 띄우기(팝업, 드롭다운, 다이얼로그 등) 안녕하세요. 당근입니다. 오늘은 피그마 프로토타이핑에 대한 포스팅입니다. 프로토타이핑 할 때, 어떤 버튼을 누르면 어떤 페이지로 이동하게 하는 액션도 많지만, 버튼을 눌렀을 때 창을 띄우거나 드롭다운 리스트를 보여줘야한다거나 하는, 그래서 오버레이(overay)를 활용해야하는 액션도 적지않습니다. 오늘은 가운데에 팝업창이나 달력 등의 UI를 띄우는 것 뿐 아니라 원하는 위치에 디자인 요소가 오버레이 되도록 프로토타이핑하는 방법을 알려드릴게요. 이렇게 말이죠. 1. 화면 가운데에 오버레이하여 팝업창 띄우기 먼저 화면 가운데에 띄우는 방법입니다. 이렇게 결제 정보를 입력해야하는 UI를 그렸다고 가정을 해볼게요. 여기서.. 2021. 8. 26. [피그마] fimga에서 패스파인더Pathfinder 사용하기(Shape tool) [피그마] fimga에서 패스파인더Pathfinder 사용하기(Shape tool) 안녕하세요. 당근입니다. 오늘은 저처럼 피그마에 적응중인 여러분을 위해 피그마에서 도형을 그리고 편집할 때 어도비 일러스트에 있는 패스파인더 기능을 어떻게 사용할 수 있는 지 알아보겠습니다. 튜토리얼에 앞서 이 글은 먼저 일러스트에서 패스파인더가 어떤 작용을 하는 툴인지 알고 계신 분을 대상으로 합니다. 하지만 아래에 각 옵션을 선택하면 일어나는 일들을 그림으로 보여드릴거예요. 사용법 자체는 엄청나게 간단하기 때문에 훑어보시면 패스파인더를 모르시는 분이라도 무리없이 이해하실 수 있을거라고 생각해요. 먼저 사각형 도형이 그려져있는 아이콘을 클릭하셔서 원하시는 도형을 그립니다. 패스파인더를 원하시는 분이라면 두개 이상의 도형.. 2020. 5. 16. 피그마figma 데스크탑 앱으로 설치하기 및 작업파일(*.fig)로 공유하기 피그마figma 데스크탑 앱으로 설치하기 및 작업파일(*.fig)로 공유하기 안녕하세요. 당근입니다. 오늘은 평화로운 웹서핑을 하던 도중 어부지리로 알게된 피그마 사용법을 한번 공유해보려고 합니다. 아시다시피 피그마figma는 스케치, 어도비XD등과 같은 UI 디자인 프로토타입 툴이죠. 피그마의 기본적인 세팅과 사용법을 알고싶으신 분들은 아래 포스팅을 확인해보세요. UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기 UI 프로토타이핑 툴 피그마(Figma) - 2. 프로토타이핑 및 개발 도구 0. fig파일이 무엇인고? 디자인 관련 자료들을 보다가 피그마로 제작된 디자인 에셋 파일을 무료로 받을 수 있더라구요. 그래서 오 피그마 연습해볼겸 한번 받아볼까? 하고 받았더니 fig파일로 다.. 2020. 3. 18. 이전 1 다음
