원본 : [Figma] 10. 이미지와 마스크 📌이미지 가져오기 Figma 에서 이미지 가져오는 방법 3가지 툴에서 가져오기 단축키 : [ Ctrl ] + [ Shift ] + [ K ] 메뉴에서 가져오기 [ File ] - [ Place Image… ] 탐색기에서 드래그 PixaBay (이미지 사이트) 바로 가기 📌이미지 마스크 마스크 : 특정 영역 안에 보이는 부분을 쏙 하고 넣는 기능 도형 안에 이미지 넣는 방법 도형 생성 후 오브젝트 클릭 [ Place Image ] 선택 후 첨부파일 클릭 마우스 커서 옆에 이미지 뜬 것 확인 후 도형 오브젝트 면 클릭 여러 개의 이미지를 한꺼번에 넣고 싶은 경우 이미지를 넣을 만큼의 도형 오브젝트 생성 생성한 도형 오브젝트들 전체 드래그 후 [ Place Ima..

원본 : [Figma] 09. 스타일 등록 및 복사 - color, text, effect 등록 📌그라디언트 피그마에서 등록할 수 있는 스타일은 크게 4가지 그라디언트 종류 📌Color Style 등록 많이 사용하는 컬러 형태 → 헥스(Hex) 코드 주로 쓰는 컬러는 매번 코드 찾아서 입력하는 것보다 등록해서 사용하는 게 편리 컬러 어도비 홈페이지 바로 가기 [Fill] - [::] 클릭 [ + ] 버튼 클릭 - 색상 코드 및 컬러명 입력 후 등록 등록한 컬러 확인 & 사용하기 도형 생성 후 Fill 에서 색상 클릭 하단에 Document Color (프레임에 제공되는 색상) 있음 Document Color 를 Local Color 로 변경 색상 그룹화 마우스 우클릭 - Add new folder 순서대..

원본 : [Figma] 08. 그라디언트 📌그라디언트 그라디언트 : 2가지 이상의 색을 사용해 입체적인 느낌을 주는 기능 모든 디자인 SW에 있는 기능 단색에 비해서 훨씬 입체적인 느낌을 줌 디자인 패널 - 색상 파트 에서 선택 가능 그라디언트의 종류 출처 : 오쌤의 니가스터디 #08. 그라디언트

원본 : [Figma] 07. 도형 패스파인더 📌Figma 패스파인더 타이틀 영역에 존재 도형 합치기 (union) 여러 도형을 하나로 합침 ⇒ 겹치는 부분 및 통과되는 선의 범위는 제거 됨 도형 빼기 (subtract) 여러 도형 중 맨 아래 도형만 남기고 겹친 부분 뺌 수정 작업 후 최종 마무리 할 때 Flatten Selection 버튼 눌러주면 더이상 수정할 수 없음 도형 교집합 (intersect) 겹치는 부분만 남기고 삭제 도형 제외 (exclude) 제외는 2개면 교집합 반대로 처리됨 실제론 겹쳐진 면의 갯수가 홀수면 남고, 짝수면 빠지는 효과 출처 : 오쌤의 니가스터디 #07. 도형 패스파인더

원본 : [Figma] 06. Figma Pen Tool 📌펜 Tool 펜 tool 사용 시 활용하는 키 및 팁 직선 넣을 때 : shift 펜툴 끊어주기 : ESC 펜툴 작업 시 수정 파트에서 나가기 : Done 버튼 or Enter 여러 지점을 선으로 연결할 때 스마트 가이드가 나와서 같은 선상에 위치할 수 있도록 잡아줌 📌 선 그리기 직선 그리기 그냥 꼭짓점을 할 위치에 클릭클릭 곡선 그리기 꾹 눌러서 드래그 방향점과 방향선 처리 방향선 뺄 때 - 위치를 잡고 점을 눌러준 뒤 다음 지점 점까지 잡아당기듯이 해야 됨 📌 수정/삭제 점 추가 더블 클릭 후 선택 툴로 점 추가 가능 펜 툴로도 가능 그러나 점 추가 후 ESC 로 끊어줄 것 점 삭제 펜 툴에서 Alt 키 누른 후 점 선택 방향선 추가/삭제 ..

원본 : [Figma] 05. 텍스트 Tool, 스마트 셀렉션 📌텍스트 Tool text tool 패널 세부 설정 […] 아이콘 클릭 문단 작성 [ Plugin ] 메뉴 - [ Browser Plugin Community ] 해당 페이지에서 [ Lorem ipsum ] 설치 ⇒ 무의미한 텍스트를 생성해주는 플러그인 [ Try it out ] 누르면 설치됨 다시 디자인 파일로 넘어와서 [ Plugin ] 메뉴 가보면 설치돼있음 피그마 줄 간격 HTML 코딩에 맞춰져 있음 그래서 정확히 박스 가운데 오게 함 text → vector 변경 텍스트에서 마우스 우클릭 - [ Outline stroke ] 📌스마트 셀렉션 figma 선택 툴이 일정 간격을 유지하는 오브젝트를 효과적으로 관리하는 것 출처 : 오쌤의 ..

원본 : [Figma] 04. 다각형과 별, 선 Tool 📌다각형 Tool 다각형 형태의 도형을 그리는 툴 단축키 (3강 참조 ⇒ #03. 사각형과 원형 도형 Tool ) shift 키 : 정비율로 그릴 때 alt 키 : 중심에서 그릴 때 다각형 위젯 모서리 둥글게 처리 각형 변경 디자인 패널에서 변경 📌별 Tool 별 도형 위젯 뾰족 처리 모서리 갯수 디자인 패널에서도 조절 가능 📌선 Tool cap과 arrowhead 디자인 패널에서 선택 가능 round : 모서리 둥글게 처리 square : 사각형으로 처리 none 과 차이점 None : 패스선 끝까지 돼있는 것 square : 사각형으로 한 번 더 처리됨 arrow : 좌우 각자 다르게 적용됨 좌측꺼 선택하면 좌측만, 우측꺼 선택하면 우측만 적용..

원본 : [Figma] 03. 사각형과 원형 도형 Tool 📌사각형 Tools 사각형 형태의 도형을 그리는 툴 단축키 alt 키 : 중심 기준으로 그리는 단축키 shift 키 : 정비율로 그리는 단축키 alt + shift : 중심에서 시작하는 정사각형 그리기 ctrl + D : 방금 했던 작업 복제 (이동, 도형 포함) shift : 떨어져 있는 다른 도형들 동시 선택 ctrl + G : 여러 도형들 하나로 그룹화 도형 속성 색상 변경 : 도형 선택 후 우측에서 Fill선택 테두리 : 도형 선택 후 우측에서 Stroke 선택 모서리 둥근 사각형 그리기 우측 [ Design ] 탭에서 H 아래 모서리 수치 조절 또는 사각형 그린 후 각 모서리에 있는 o 버튼 눌러 조절 모서리 조절 한쪽 모서리만 할 경우..

원본 : [Figma] 02. Frame/Guide/Grid 📌Frame 포토샵/스케치/XD 등의 아트보드와 같음 디자인적 작업을 할 틀이라고 생각하면 됨 Frame 종류 📌Guide 오브젝트를 더 섬세하게 작업할 수 있게 도와주는 안내선 눈금자(ruler)에서 드래그해서 꺼내 사용 단축키 : [ shift ] + [ R ] 📌Grid 오브젝트를 더 섬세하게 작업할 수 있게 도와주는 격자선 웹에서는 컬럼 그리드 방식으로 디자인을 많이 하면서 중요해짐 Figma에서의 Grid 장점 여러 컬럼 Grid를 레이어처럼 사용 margin : 프레임과 전체 컬럼 간의 좌우 여백 gutter : 컬럼과 컬럼 사이의 여백 Grid Calculator http://gridcalculator.dk/ 웹 그리드 시스템 계산..

원본 : [Figma] 01. 웹, 앱 사용 및 필수 단축키 📌Figma 웹, 앱 크롬, 사파리, 파이어폭스 등을 지원해서 웹에서도 작업이 가능 그러나 작업 시 폰트 공유 등의 문제를 고려했을 때 웹보다는 데스크탑 앱을 설치해서 사용하길 권장 출처 : 오쌤의 니가스터디 #01. 설치 및 인터페이스