AMoon - 개발자의 각종 개발 정보 공유

이번에 만들 것둥근 사각형과 원을 겹친 다음 Union으로 합쳐 작은 구름 아이콘을 만듭니다. 여러 도형을 겹쳐 놓으면 하나의 모양처럼 보여도 각각 다른 레이어로 남아 있어요. 선을 추가할 때도 각 도형의 테두리가 따로 나타날 수 있습니다.Union은 선택한 도형들의 바깥 윤곽을 합쳐 하나의 Boolean 그룹으로 만들어 줍니다. 편집 권한이 있는 Figma Design 파일을 준비해 주세요. Figma 공식 Boolean 도움말1. 둥근 사각형 준비하기빈 캔버스에서 R을 눌러 사각형을 그립니다. 선택한 사각형의 크기는 W 240, H 80, 모서리 반경은 40, Fill은 #7C3AED로 설정해 주세요. 구름 아래쪽 바탕이 됩니다. 2. 원을 겹쳐 구름 모양 만들기O를 눌러 원을 그린 뒤 크기를 W 1..

이번에 만들 것하나의 직선 양 끝에 화살표를 붙여 양방향 흐름 표시를 만듭니다. 핵심은 Stroke의 시작점과 끝점 설정이에요. 두 단계가 서로 영향을 주고받는 모습을 표시하고 싶을 때가 있죠. 피그마에서는 선을 그리고 양쪽 끝의 모양을 바꿔 간단하게 표현할 수 있어요.편집 권한이 있는 Figma Design 파일을 준비해 주세요. 이 기능은 모든 플랜에서 사용할 수 있습니다. Figma 공식 Stroke 도움말1. 직선 그리기빈 캔버스에서 L을 눌러 Line 도구를 선택합니다. 왼쪽에서 오른쪽으로 드래그해 선을 그려 주세요. 드래그할 때 Shift를 누르면 수평 방향을 맞추기 쉬워요. 화살표는 이 선의 시작점과 끝점에 각각 추가할 거예요.2. 선의 색상과 두께 바꾸기방금 그린 선을 선택한 상태에서 오른..

이번에 만들 것흰색 카드 위쪽에 보라색 반원 장식을 넣습니다. 피그마의 원 도형에서 Arc Sweep 50%를 설정해 반원을 만들어 볼게요. 밋밋한 카드 위쪽에 곡선을 더하면 화면 분위기를 쉽게 바꿀 수 있어요. 한 개의 원을 반원으로 바꾸고 카드 안에 배치해 보겠습니다.1. 카드 프레임 준비하기편집 권한이 있는 Figma Design 파일의 빈 캔버스에서 F를 누르고 프레임을 그립니다. 프레임을 선택해 오른쪽에서 W 320, H 320, Fill #FFFFFF를 입력합니다. 예시 화면에서는 기본 이름인 Frame 1을 사용합니다.2. 반원 도형 만들기카드 프레임 안에서 O를 눌러 원을 만들고 W 320, H 320, Fill #7C3AED로 설정합니다. 원 위에 포인터를 올리면 오른쪽에 Arc 핸들이 ..

이번에 만들 것동그란 원에서 전체의 25%를 차지하는 부채꼴 조각을 만들어 볼게요. 원의 Arc Sweep 값을 바꾸면 됩니다. 통계 카드나 간단한 비율 설명에 파이 조각을 넣고 싶을 때가 있죠. 피그마의 원 도형 하나로 조각을 만들어 보겠습니다.이전에 만든 원형 진행률이 가운데가 빈 링이었다면, 이번에는 가운데까지 채워진 부채꼴을 만듭니다.1. 원 그리기편집 권한이 있는 Figma Design 파일에서 O를 눌러 Ellipse 도구를 선택하고 캔버스를 드래그합니다. 도형을 선택한 뒤 오른쪽 패널에서 W 240, H 240으로 설정하고 Fill은 #7C3AED로 바꿔 주세요. 2. Arc로 부채꼴 만들기원을 선택하고 도형 위에 포인터를 올리면 나타나는 Arc 핸들을 드래그해 원의 일부를 조절합니다. 오른..

이번에 만들 것이미지 위에 반투명 패널을 놓고 패널 뒤의 배경을 부드럽게 흐립니다.배경 블러 패널을 표현한 AI 생성 설명 이미지입니다.사진 위에 안내 문구를 올리면 배경의 무늬와 글자가 겹쳐 읽기 어려울 때가 있죠. 반투명 패널을 더하고 패널 뒤쪽만 흐리게 만들면 문구가 돋보입니다.이번에는 Background blur로 작은 안내 패널을 만들어 볼게요. 편집 권한이 있는 Figma Design 파일과 사용할 사진 한 장을 준비해 주세요. Figma 공식 효과 도움말도 참고해 주세요.1. 이미지와 패널 준비하기Rectangle 도구로 640×360 사각형을 만들고 Fill에 사진을 넣습니다. 예제 사진에는 보라색 #7C3AED, 불투명도 35% 채우기를 사진 위에 추가했어요. 그 위에 사각형을 하나 더 ..

이번에 만들 것메뉴 옆에 붙일 수 있는 오른쪽 방향 삼각형을 만들어 볼게요. Polygon 도구와 회전값만 있으면 됩니다.접힌 메뉴나 다음 화면을 가리킬 때 작은 삼각형을 본 적 있으시죠? 이번에는 도형을 직접 그린 뒤 방향을 바꾸는 연습을 해 볼게요.1. 다각형 도구로 삼각형 그리기편집 권한이 있는 Figma Design 파일에서 도구 모음의 Shape tools 화살표를 누르고 Polygon을 선택하세요. 빈 캔버스를 드래그하면 기본 삼각형이 생깁니다. 삼각형을 선택한 상태에서 오른쪽 패널의 W 160, H 160으로 입력하고 채우기는 #7C3AED로 지정해 주세요. 크기는 실습에서 보기에 편하도록 크게 잡았습니다. 2. 꼭짓점 수 확인하기삼각형이 선택된 상태로 오른쪽 Appearance → Coun..

이번에 만들 것 상품 카드에 붙이기 좋은 반짝이는 별 배지예요. 피그마 Star 도구로 별을 그리고 꼭짓점 수와 안쪽 비율을 바꿔 볼게요. 신상품이나 이벤트를 눈에 띄게 표시할 때 별 배지를 쓰곤 하죠. 직접 선을 하나씩 그리지 않아도 별 도형 하나로 빠르게 만들 수 있어요. 1. 별 도구로 기본 모양 그리기 편집 권한이 있는 Figma Design 파일의 빈 캔버스를 엽니다. 도구 모음의 Shape tools 화살표를 누르고 Star를 선택하세요. 캔버스를 드래그해 별을 그립니다. 실제 피그마의 도형 도구 메뉴입니다. 별을 선택한 상태에서 오른쪽 패널의 너비와 높이를 각각 240으로 맞춥니다. 기본 별은 다섯 개의 뾰족한 끝을 갖고 있어요. 실제 피그마에서 기본 별을..

이번에 만들 것쿠폰 양옆이 반원 모양으로 쏙 들어간 티켓을 만들어 볼게요. 사각형에서 원 두 개를 빼는 Subtract selection(선택 영역 빼기)만 사용합니다. 지난번에 만든 쿠폰 절취선에 오늘 배울 홈을 더하면 더 그럴듯한 쿠폰을 꾸밀 수 있어요. 먼저 모양부터 차근차근 만들어 볼까요?1. 쿠폰 바탕 만들기편집 권한이 있는 Figma Design 파일의 빈 캔버스를 준비합니다. 사각형 도구(R)로 사각형을 그린 뒤 오른쪽 패널에서 W 400, H 200으로 바꿔 주세요. 모서리 반경은 16, 채우기는 #7C3AED로 설정합니다.정확히 배치하기 쉽도록 사각형의 X와 Y를 각각 100으로 입력하고 레이어 이름을 coupon-base로 바꿉니다. 단위는 모두 px입니다.설정값에 따른 쿠폰 바탕 결과..

채팅 화면의 받은 메시지와 보낸 메시지를 구분하고 싶나요?사각형의 모서리를 각각 조절해 좌우 말풍선을 만들어 보겠습니다.1. 좌우 방향이 다른 말풍선을 만듭니다채팅 화면에서는 받은 메시지는 왼쪽, 보낸 메시지는 오른쪽으로 배치하곤 합니다. 사각형의 네 모서리를 따로 조절하면 꼬리 모양을 그리지 않고도 방향감을 줄 수 있습니다.이번에는 360 × 300px 채팅 화면에 흰색 받은 말풍선과 파란색 보낸 말풍선을 만듭니다. 완료 상태의 실습 파일을 참고할 수 있습니다. 파일에서 두 메시지 텍스트는 화면 프레임 바깥의 별도 레이어이므로 프레임을 내보내기 전에 안으로 옮겨 주세요. 예상 시간은 약 15분이며 편집 권한이 필요합니다. Independent corners는 모든 플랜에서 사용할 수 있습니다. Figm..

긴 제목 때문에 카드 아래쪽 정보가 밀리나요?제목의 너비와 최대 줄 수를 설정해 강의 카드를 깔끔하게 정리해 보겠습니다.1. 긴 강의 제목을 두 줄로 정리합니다강의 목록의 제목이 길면 아래 안내 문구를 밀거나 카드마다 높이가 달라 보일 수 있습니다. Truncate text와 Max lines를 이용하면 긴 텍스트를 정해진 줄 수에서 줄이고 말줄임표를 표시할 수 있습니다.320 × 280px 강의 카드 하나를 만들고 제목을 최대 두 줄로 제한합니다. 예상 시간은 약 20분입니다. 완료 상태의 피그마 실습 파일을 참고할 수 있습니다. 실습 파일의 제목과 보조 정보는 카드 바깥의 별도 레이어라 카드 프레임만 내보내면 빠집니다. 복사해 사용할 때에는 두 텍스트를 프레임 안으로 옮겨 주세요. 편집 권한이 필요하..