반응형 디자인/피그마 반응형 33 [피그마] 테두리 한쪽 면만 할 수 있는 피그마 플러그인 : Border *피그마 2022년 5월 업데이트를 통해 플러그인 없이도 구현할 수 있도록 개선되었습니다. 오토레이아웃 등 사용성 면에서 훨씬 뛰어나니까 먼저 이 포스팅을 참고해보세요. https://nicecarrot2.tistory.com/218 [figma] 피그마 2022년 5월 업데이트! 테두리 한쪽만 하기 [figma] 피그마 2022년 5월 업데이트! 테두리 한쪽만 하기 안녕하세요! 당근입니다. 피그마가 최근 22년 5월에 대규모 업데이트를 했어요. 유튜브로 간단히 업데이트 내용을 설명하는 프리젠테이션 nicecarrot2.tistory.com [피그마] 테두리 한쪽 면만 할 수 있는 피그마 플러그인 : Border 안녕하세요. 당근입니다. 오늘은 피그마에서 테두리를 설정할 때 border-top borde.. 2020. 4. 21. [figma] 피그마 미러mirror 앱으로 디자인 모바일 환경에서 보기 안녕하세요. 당근입니다. 피그마에서 디자인을 한 다음에 재생버튼을 눌러 프로토타입을 볼 때 PC버전은 잘 나오지만 모바일 환경을 PC에서 미리보기 할 때 불편하잖아요. 브라우저 세팅으로 모바일 환경으로 맞출 수 있긴 하지만 한계가 있고요. 그래서 피그마에서는 피그마 미러(figma mirror)라는 앱을 통해 모바일에서도 모바일 환경에 최적화된 디자인 프로토타이핑을 볼 수 있는 환경을 제공하고 있는데요. 오늘은 피그마 미러 사용법에 대해 간단히 알아볼까요? 앱스토어나 구글스토어에서 피그마를 검색하세요. 이렇게 생긴 앱을 다운받으시면 됩니다. 앱을 실행하시면 로그인창이 떠요. 현재 작업중인 피그마에 로그인 되어 있는 아이디와 동일한 걸로 로그인해야겠죠? 저는 구글 계정으로 로그인했기 때문에 Log in w.. 2020. 4. 13. 피그마figma 데스크탑 앱으로 설치하기 및 작업파일(*.fig)로 공유하기 피그마figma 데스크탑 앱으로 설치하기 및 작업파일(*.fig)로 공유하기 안녕하세요. 당근입니다. 오늘은 평화로운 웹서핑을 하던 도중 어부지리로 알게된 피그마 사용법을 한번 공유해보려고 합니다. 아시다시피 피그마figma는 스케치, 어도비XD등과 같은 UI 디자인 프로토타입 툴이죠. 피그마의 기본적인 세팅과 사용법을 알고싶으신 분들은 아래 포스팅을 확인해보세요. UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기 UI 프로토타이핑 툴 피그마(Figma) - 2. 프로토타이핑 및 개발 도구 0. fig파일이 무엇인고? 디자인 관련 자료들을 보다가 피그마로 제작된 디자인 에셋 파일을 무료로 받을 수 있더라구요. 그래서 오 피그마 연습해볼겸 한번 받아볼까? 하고 받았더니 fig파일로 다.. 2020. 3. 18. [피그마figma] 텍스트 길이에 따라 변하는 플렉서블flexible 버튼 만들기 [피그마figma] 텍스트 길이에 따라 크기가 변하는 플렉서블flexible 버튼 만들기 안녕하세요. 당근입니다. 오늘은 간단하지만 되게되게 유용한 피그마 튜토리얼입니다. 저도 요즘 피그마에 적응중이라 차근차근 해보면서 가끔은 삽질도 하면서? ... 공부해나가는 중입니다. 오늘은 버튼을 만들어볼건데 텍스트를 기준으로 여백을 유지하면서 자동으로 크기가 늘어나는 버튼을 만들 것입니다. 이렇게 말이죠. 먼저 버튼을 만들고 Create Component 해줍니다. 버튼 안에 있는 텍스트의 위치가 박스의 중앙에 위치하도록 Constraints를 설정합니다. Paragraph도 가운데 정렬해주셔야 텍스트 수정할 때 용이하겠죠. 텍스트의 가로크기를 확인하신 다음 박스를 다시 선택하시고 텍스트 크기+양옆 여백(패딩)을.. 2020. 3. 3. UI 프로토타이핑 툴 피그마(Figma) - 2. 프로토타이핑 및 개발 도구 UI 프로토타이핑 툴 피그마(Figma) - 2. 프로토타이핑 및 개발 도구 안녕하세요. 당근입니다. 오늘은 지난 포스팅에 이어서 UI 디자인 프로토타이핑 툴 피그마(Figma)에 관한 포스팅을 계속해보겠습니다. 지난번에 아래처럼 간단한 오브제들을 만들고 배치해봤는데요. 오늘은 프로토타이핑까지 연결해서 동작시켜보겠습니다. 지난 포스팅 설치 및 간단한 화면구성에 대한 포스팅은 아래 링크를 클릭해주세요. https://nicecarrot2.tistory.com/24 UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기 UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 안녕하세요. 당근입니다. 오늘은 UI 프로토타이핑 툴 피그마(Figma)를 설치하고 사용해보려고해요. UI 프로토타이핑.. 2020. 2. 26. UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기 UI 프로토타이핑 툴 피그마(Figma) - 1. 설치 및 버튼 만들기안녕하세요. 당근입니다. 오늘은 UI 프로토타이핑 툴 피그마(Figma)를 설치하고 사용해보려고해요. UI 프로토타이핑 툴은 Adobe XD와 스케치(+제플린)이 또 유명한데.저는 스케치는 써본적이 없고 XD만 한 프로젝트 하는 김에 끄적끄적 사용해 본 경험이 있습니다.스케치는 맥용 툴이라 윈도우 사용자분들은 포토샵+제플린 플러그인 설치해서 사용하시더라고요. 조만간 스케치도 맥북에 깔아서 이것 저것 테스트 해보려고합니다.일단 오늘은 브라우저 기반으로 어떤 운영체제에서도 사용이 가능한 피그마(Figma)를 테스트해볼겁니다.설치 이외에 어느 정도까지 해보고 테스트를 할 지도 잘 모르겠어요. 일단 써봅니다. https://www.figma... 2020. 2. 25. 이전 1 2 3 4 다음
