디자인 TIP20 피그마(Figma) 꿀팁 : 피그마에서 Themer 플러그인으로 라이브러리 변환하기 보통 스타일 가이드는 1개만 있을 것이라고 생각하지만, 작업을 하다 보면 프로젝트의 성격에 따라 스타일 가이드가 1개 이상이 되기도 한다. 특히 라이트 모드와 다크 모드를 모두 고려해 프로젝트를 진행한다면 스타일 가이드는 자연스럽게 라이트 모드와 다크 모드로 2개가 생성된다. 보통 라이트 모드 스타일 가이드를 활용해 먼저 디자인을 하고 다크 모드로 변환하는 작업을 진행하게 되는데 이때 컬러부터, 폰트 스타일 등을 일일이 변경해야 한다면 사실상 또 다른 하나의 프로젝트를 진행하는 것과 다를 바가 없을 것이다. 이를 위해서 피그마에는 라이브러리 스와이프 기능이 있지만, 이 기능은 한 번에 모든 프레임의 컬러를 다 변환해 버리기 때문에 한 프레임씩 감도를 맞추며 작업하기에는 적합하지 않다. 이럴 때를 위해서 .. 2022. 12. 11. 피그마(Figma) 꿀팁 : 그리드 생성 방법 및 라이브러리 스타일로 지정하는 방법 디자인의 기본이자 가장 중요한 뼈대인 그리드, 이러한 그리드를 Figma로 쉽게 설정하고 라이브러리에 저장해서 언제든 꺼내서 사용할 수 있다는 것을 알고 계신가요? 특히나 그리드는 매번 변경하기보다는 특정 양식을 정해놓고 사용하는 경우가 많기 때문에 피그마를 통해서 그리드 레이아웃을 설정하고 라이브러리로 관리하면 정말 작업 시에 정말 편리합니다. 이번 포스팅에서는 피그마에서 그리드를 설정하고 변경하는 방법과 평소 실무에서 자주 사용하는 PC의 기본 그리드 스타일인 Container형과 Fullscreen형과 모바일의 기본 옵션 값을 공유하려고 합니다. 또 한 번 설정한 그리드의 옵션 값을 매번 다시 지정하지 않아도 되도록 개인 라이브러리로 지정해서 사용하는 방법도 함께 소대 해 드리려고 합니다. 아래에 .. 2022. 11. 20. 피그마(Figma) 꿀팁 : 도형에 그라데이션 넣는 방법 피그마로 디자인을 하다보면 일러스트나 포토샵과는 조금 달라서 당황할 때가 있는데 그 중에 하나가 바로 그라데이션을 넣는 방법이였다. 일러스트나 포토샵은 그라데이션 기능이 별도로 나와 있어서 직관적으로 찾을 수 있었는데, 이미 어도비 프로그램에 익숙해진 후라 조금 해맸던 기억이 있다. 알고나니 굉장히 쉽게 그라데이션을 설정할 수 있었다. 1. 먼저 프레임안에 도형을 하나 그려주고 Fill값을 채워준다. 2. Fill값으로 들어 있는 컬러(네모 사각형 모양)을 클릭해 상세 컬러 지정 옵션을 열고 상단 Solid라는 옵션을 클릭한다. 3. Solid를 선택해보면 다양한 옵션들이 있는데 그 중에서 가장기본 그라데이션인 Linear을 선택한다. (Linear - 일반적인 선형 그라데이션, Radial - 동그란 .. 2022. 11. 11. 브랜드 네임 제작시 주의할 점 서비스의 시작은 무엇일까요? 어쩌면 네이밍 즉 이름을 짓는 것이 서비스의 첫 시작이 아닐까 합니다. 어떤 서비스던 이름을 통해서 가장 먼저 소비자에게 각인이 됩니다. 즉, 브랜드의 정체성을 대표하는 가장 중요한 요소 중 하나라고 할 수 있습니다. 그만큼 중요한 네이밍 제작 작업 전 체크리스트를 미리 확인하고 이에 맞춰 네이밍을 선정한다면, 단순히 개인의 취향에 의해서 네이밍이 결정되지는 않을 것입니다. 브랜드 아이덴티티에 영향을 미치는 만큼 명확한 가이드를 가지고 선정하는 것이 중요하기 때문에 저는 크게 비즈니스적인 측면과 디자인적 측면, 이렇게 2가지 체크리스트를 점검하며 네이밍을 진행하고 있습니다. 비즈니스적 체크리스트 브랜드 전체의 컨셉과 이미지를 포함하는가 동일한 네이밍으로 등록된 다른 앱은 없는.. 2022. 8. 8. 상업용 무료 폰트 사용하기 - 눈누 디자인 작업을 하다보면 필연적으로 폰트를 많이 사용하게 됩니다. 이 때 주의해햐할게 폰트라이센트인데요. 폰트는 잘 못 사용하면 법적인 문제로 커질 수 있기 때문에 회사에서 일하던, 프리랜서로 일하던 꼭!! 폰트가 상업적으로 사용 가능한지 확인하고 사용하는 습관을 들여야합니다! 대표적으로 많이 쓰시는 폰트가 구글의 noto 산스와 네이버의 나눔고딕입니다. 이 외에도 다양한 상업용 폰트를 확인하고 싶다면 아래 눈누 사이트에서 확인하시면 모든 상업용 폰트를 확인해보고 다운받을 수 있습니다. https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 이렇게 타이핑 해서 각 폰트가 어떻게 보이는지도 확인 할 수 있습니다. 상업 프로젝트를 진행하는 디자이너이거나 개인 프로젝트를 진행.. 2022. 8. 7. [무료 이미지 사이트] 저작권 걱정없는 사이트 PEXELS 디자인 작업을 하다보면, 항상 저작권 문제가 신경쓰이죠?? 저작권이 안걸리는 사진을 쓰면 화질과 퀄리티가 떨어지고, 고화질 이미지는 저작권땜에 사용을 못하죠.. 오늘은 상업용, 개인용 모두 저작권이 무료인 사이트를 소개해 드리고자 합니다. http://www.pexels.com 무료이미지, 저작권 없는 이미지, 무료 이미지 사이트 | Pexels www.pexels.com PEXELS는 고화질 이미지를 무료로 상업적 목적과 개인 모두 사용할 수 있어 디자이너들에게는 너무너무 고마운 사이트입니다. 인물, 자연, 풍경 등 다양한 종류의 고화질 이미지들이 많이 있습니다 검색창에 원하는 종류의 이미지를 영문으로 타이핑하시면 됩니다. 저는 Mountain을 쳐보았는데요 산 관련 고화질 이미지가 엄청 많이 뜨네요 .. 2022. 8. 7. 웹 디자인 그리드 생성 사이트 - Grid.Guid 웹 디자인을 할 때 제일 먼저 해야 하는 것은 그리드 설정입니다. 그러나 이 그리드를 포토샵이나 피그마에서 일일이 계산하고 그리는 것은 프로젝트 경험이 없는 신입 디자이너에게는 쉽지 않을 것입니다. 이럴 때를 위해 각각의 그리드 별로 칼럼 값과 마진 값을 자동으로 계산해서 보여주는 사이트를 소개하려고 합니다. http://grid.guide/ Grid.Guide — Pixel Perfect Grids Welcome to GridGuide! A tool to help you create pixel perfect grids within your designs. Enter your requirements above and we’ll will show you all of the whole pixel combin.. 2022. 8. 7. 피그마(Figma) 꿀팁 : 유용한 단축키 및 설정 모음 자꾸 까먹지만 유용한 피그마 단축키와 피그마 설정 TIP모음 피그마 전체 단축키 보는 법 레이어 레이어 전체 닫기 : Alt + L 화면 확대 : Ctrl + 축소 : Ctrl - 10px 이동 : Shift + 방향키 객체 생성 활성화 R - 사각형 생성 활성화 L - 라인 생성 활성화 F - 프레임 생성 활성화 T - 텍스트 생성 활성화 p - 펜툴 활성화 기타탄축키 타이핑 완료 : Ctrl + 우측 Enter ( 텍스트 타이핑 완료) 모양&변형 가로 뒤집기 : Shift + v 세로 뒤집기 : Shift + h 아웃라인깨기 : Ctrl + Shift + o 그리드 그리드 보기 : Ctrl + Shift + 4 컴포넌트 컴포넌트 만들기 : Ctrl + Alt + K 컴포넌트 찾기/삽입.. 2022. 8. 7. 피그마(Figma) 꿀팁 : 8배수(8px)로 이동 간격 조정하기_Nudge amount 피그마 이용 꿀팁 중에 하나인 이동 간격을 조정하는 법을 공유해 드리겠습니다~! 피그마 화면에서 아래 경로로 들어가서 이동 간격을 조정해 주시면 됩니다! F > Preferences > Nudge amount 기본 설정은 10으로 되어있는데 8로 바꿔주세요~! 그 이유는 보통 모바일 UI는 2, 4, 8배 수로 디자인 작업이 됩니다. 그렇기 때문에 Shift + 방향키로 크게 이동할때 기본 2의 배수인 8배 수로 설정을 해놓으면 계산하기 훨씬 수월하기 때문입니다. 이상, 유용하게 쓰이는 피그마 꿀팁이었습니다. 2022. 8. 7. 이전 1 2 3 다음
