반응형 figma 반응형 17 [피그마] 포토샵(*.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. [피그마] 피그마 파일(*fig)을 PSD로 저장해보자(대체 왜...) [피그마] 피그마 파일(*fig)을 PSD로 저장해보자(대체 왜...) 안녕하세요. 당근입니다. 오늘은 실무 관련해서 생긴 불쌍사지만 그래도 저처럼 모처럼 만든 figma파일을 다시 포토샵 PSD파일로 만들어야 하는 일이 생긴 여러분을 위해 제가 사용한 방법을 공유해보려고 해요. 먼저 피그마에서 프로젝트 파일을 피그마 파일(*.fig)로 저장합니다. file-save as.fig...(단축키 ctrl + shift + S) 그럼 여러분 폴더에 fig파일이 저장되었죠. 여기까지가 준비입니다. 1. Photopea 사이트를 이용해 피그마 파일을 불러 온 다음 psd로 저장하는 방법 아래 사이트에 접속합니다. https://www.photopea.com/ Photopea | Online Photo Editor.. 2020. 8. 19. [피그마] 구글 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. [피그마] 테두리 한쪽 면만 할 수 있는 피그마 플러그인 : 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. 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 다음
