반응형 디자인/피그마 반응형 33 [figma]피그마에서 백그라운드 블러(background blur) 만들기 [figma]피그마에서 백그라운드 블러(background blur) 만들기 안녕하세요. 당근입니다. 오늘도 피그마 사용법을 가지고 왔어요. 오브젝트를 기준으로 뒤에 위치한 요소를 흐리게 만들어주는 백그라운드 블러 (background blur) 효과! 피그마로 적용하는 법을 알아볼건데요. 이번에도 엄청 쉽답니다. 처음부터 차근차근 알아볼까요? 먼저 뒤에 배경이 있어야 블러가 들어간 걸 확인할 수 있겠죠? 저는 언스플래시에서 예쁜 배경 하나를 삽입해봤어요. 플러그인으로 피그마에서 쉽게 삽입할 수 있습니다. 아래 글을 참조하세요. 2020.04.23 - [디자인/피그마] - [피그마] 고퀄리티 무료 이미지를 바로 불러올 수 있는 플러그인 : Unsplash [피그마] 고퀄리티 무료 이미지를 바로 불러올 수.. 2021. 11. 9. [figma] 피그마 작업 전에 해야할 필수 과정! 레이아웃 그리드 세팅하는 방법! [figma] 피그마 작업 전에 해야할 필수 과정! 레이아웃 그리드 세팅하는 방법! 안녕하세요. 당근입니다. 오늘은 이제서야?... 싶게도 피그마로 웹이나 모바일 화면을 설계하실 때 필요한 필수 세팅! 레이아웃 그리드를 설정하는 법을 알려드릴게요. 작업전 그리드를 잘 세팅해놔야 작업하기도 빠르고, 정렬이 깔끔하게 되겠죠. 빨리 알아볼까요? 왼쪽 상단에 프레임 버튼을 눌러 새로운 프레임을 만드세요. 드래그하셔서 그리신 다음 사이즈 세팅을 하셔도 되고, 오른쪽 디자인 탭에서 제공하는 사이즈를 선택하셔도 됩니다. 데스크탑 사이즈나 태블릿 모바일 등등 원하시는 크기로 설정하세요. 저는 1920x1080으로 세팅했습니다. 하셨나요? 오른편 디자인탭에서 Layout grid가 보이실거예요. +버튼을 눌러 그리드를 .. 2021. 11. 1. [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 업데이트된 Variants 기능을 알아보자(+기존 컴포넌트 레이어 정리하기) figma 업데이트된 Variants 기능을 알아보자(+기존 컴포넌트 레이어 정리하기) 안녕하세요. 당근입니다. 새해도 됐고, 피그마 업데이트 후 달라진 가장 중요한 이슈중에 하나로 속할 컴포넌트 레이어 - Variants 에 대해 드디어! 알아보겠습니다. 그동안 포스팅해야지~ 하다가 요즘에 웹 이슈를 다루고 있지 않기도 했고, 이런 저런 핑계로 미뤄뒀었는데요. 이번 포스팅에서는 제가 만들어둔 예전 Asset에 일부를 떼와서 최근 업데이트 된 기능을 어떤식으로 적용하는지 실제로 사용해보면서 테스트해보겠습니다. 복잡한 UI키트는 전체적인 구조를 파악하는 데는 좋지만 실습에는 방해가 돼요. 그래서 일부만 더미로 떼오고 이래저래 뭔가 만들어가면서 Variants를 적용해볼게요. 그럼 시작할까요?! 여기에 여러.. 2021. 1. 8. [피그마] Google Sheet Sync : 이미지와 데이터를 스프레드 시트로 한번에 업데이트 해보자. [피그마] Google Sheet Sync : 이미지와 데이터를 스프레드 시트로 한번에 업데이트 해보자. 안녕하세요. 당근입니다. 오늘은 다른 플러그인들과 달리 사용법이 조금... 아주 조금 복잡해서 미뤄두었던 꿀 플러그인 Google Sheet Sync를 소개해보겠습니다. 같은 포맷인 컴포넌트에 데이터가 다르게 많이 들어갈 때, 어떻게 하시나요? 예를 들어 쇼핑몰에 상품이 100개 있다고 해볼게요. 그럼 100개의 상품 이미지와 이름과 설명과 별점과 등등의 요소들이 있겠죠? 시안을 만드는 단계에서도 생각보다 같은 레이아웃에 다른 데이터를 넣어야 할 일들이 많이 생깁니다. 일일이 텍스트 수정하고~ 이미지 수정하고~ 컬러 바꾸고~ 이런 생고생을 덜어줄 구글 시트 싱크! 빨리 소개해볼게요. 먼저 플러그인을 .. 2020. 8. 25. [피그마] 포토샵(*.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. 이전 1 2 3 4 다음
