[Figma] space-between 변경 팁
피그마에서 auto-layout Spacing 기능을 사용하면 요소별 간격을 편하게 설정할 수 있습니다. spacing은 packed와 space between 2가지 모드가 있는데 packed를 사용하면 지정한 간격으로 차례대로 쌓이고 space between을 사용하면 너비에 맞춰 균등한 간격으로 배치됩니다. 이런 Spacing mode의 모드를 변경하는데 2가지 방법을 사용할 수 있습니다. 1. 직접 설정 피그마의 오른쪽 메뉴에서 Auto layout의 [...] 더 보기 메뉴를 눌러 Spacing mode를 찾아 직접 변경할 수 있습니다. 2. 값 입력으로 변경 간격을 입력하는 창에 숫자를 넣으면 paced 모드로 입력한 값만큼 간격이 띄워집니다. auto를 넣어주면 space between 모드..
[Figma] 오브젝트 복사하기 (PNG, SVG, CSS)
피그마에서는 오브젝트를 CSS, SVG, PNG 형태로 복사하는 기능을 지원합니다. PPT나 포토샵 등에 피그마에서 만든 오브젝트를 사용하고 싶다면 파일로 저장해 다른 프로그램에서 열어 사용하는 것이 아니라 이 기능을 사용해 복사해 붙여넣어 편하게 사용할 수 있습니다. 1. 오브젝트 복사하기 방법은 간단합니다. 복사하려는 오브젝트를 선택한다. 마우스 오른쪽 버튼을 누른다. Copy/Paste as 메뉴에서 원하는 방식을 선택한다. 포토샵, 일러스트, PPT 등에 피그마에서 작업한 것을 그대로 사용하려할 때 SVG나 PNG로 복사하는 기능을 사용하면 편합니다.
[Figma] 효과(Effect) 복사하기
디자인 작업을 하다 보면 같은 효과를 다른 곳에도 쓸 일이 생깁니다. 이럴 때 해당 레이어를 복사한 뒤 일부 수정해서 쓸 수도 있지만 이미 디자인이 거의 완성된 경우에 쓰기 번거로운 방법입니다. 효과만 복사해서 쓰고 싶을 때 사용하는 방법입니다. 특히 그림자와 같이 수치 값을 여러 개 지정해 줘야 하는 효과를 쓸 경우 편합니다. 1. 효과(Effect) 선택 복사하고자 하는 효과가 있는 요소를 준비합니다. 복사할 효과의 레이어 앞 부분(붉은색 원으로 표시한 부분)이나 맨 뒷부분을 누르면 해당 효과 레이어가 선택됩니다. 이때 Ctrl+C 를 해주면 효과가 복사됩니다. 효과를 붙여넣을 요소를 선택한 뒤 Ctrl+V 를 해주면 효과가 적용됩니다.
[Figma] 프레임 내부 선택
피그마에서 프레임 안에 프레임을 넣는 경우가 종종 있습니다. 이때 내부 프레임의 요소를 수정하려면 해당 요소를 선택해야 하는데요. 선택할 수 있는 방법은 여러 가지가 있습니다. 그중에서 손가락을 좀 더 편하게 할 수 있는 방법을 소개합니다. 1. ⌘ Command + 클릭 ⌘ Command + 클릭 혹은 ⌘Command + Shift + 클릭 을 해서 선택할 수 있습니다. 2. ⌘ Command + 드래그 ⌘ Command + 드래그 를 사용하면 여러 개의 요소를 한 번에 쉽게 선택할 수 있습니다.
2021 디자인 트렌드 - 글래스모피즘(Glassmorphism)
글래스모피즘(Glassmorphism)이 점점 인기를 얻고 있습니다. dribble에서 글래스모피즘을 검색하면 많은 디자인 시도를 확인해 볼 수 있습니다. 2020년에는 뉴모피즘(Neumorphism)이 트렌드였으나 내년에는 글래스모피즘이 새롭게 떠오르지 않을까 예상해봅니다. 글래스모피즘은 배경에 블러(Blur) 효과를 준 것을 기반으로 하는 디자인입니다. 글래스모피즘 디자인을 보면 불투명한 유리를 댄 것 같은 느낌을 받을 수 있습니다. Mac에서는 전부터 배경 블러 효과를 이용한 글래스모피즘 스타일의 디자인을 사용해왔습니다. 그리고 이번 빅서(Big sur) OS에서 더욱 이런 스타일이 강화된 것을 볼 수 있습니다. 글래스모피즘의 특징은 아래와 같습니다. - 투명도 (Background blur를 사용..
디자인 작업을 할 때 이미지는 빠질 수 없습니다. 디자인에 필요한 이미지를 모두 직접 찍거나 만드는 것은 불가능하고 시간도 많이 드는 만큼 콘셉트에 맞는 이미지를 잘 찾는 것도 능력입니다. 무료로 사용할 수 있으면 더욱 좋겠지요. 상업용으로 이용 가능한 무료 이미지를 제공하는 사이트들을 소개합니다. 1. Pexels 한글 검색 가능합니다. 사진과 동영상 자료를 받을 수 있습니다. https://www.pexels.com/ 2. Pxhere 한글 검색 가능합니다. 웹/Android/iOS 규격에 맞는 다양한 사이즈로 이미지를 다운받을 수 있습니다. 로그인이 필요합니다. https://pxhere.com/ 이미지 검색 & 무료 이미지 - PxHere pxhere.com 3. Pixabay 사진이 많고 한글로..
디자인에서 폰트 사용(Fonts in use)
디자인할 때 가장 어려운 것이 텍스트가 아닌가 합니다. 텍스트의 배치나 폰트, 굵기, 사이즈 등 미묘한 차이에서 디자인의 퀄리티가 달라지니까요. 수많은 폰트들 중에서 디자인에 어울리는 폰트를 고르는 것도 일인데 고른 폰트가 막상 디자인에 사용했을 때 어울리지 않는 경우가 많습니다. 미리 해당 폰트를 어떤 식으로 사용하는 것이 좋은지 알 수 있다면 정말 좋겠죠. Fonts in use가 바로 그런 곳입니다. 영문 폰트만 지원한다는 게 아쉽지만.. 폰트의 다양한 활용법을 알 수 있어 구경하는 재미가 있습니다. 1. Fonts in use https://fontsinuse.com/typefaces/4869/arial Arial in use Type Designers: Patricia Saunders, Robi..