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

이번에 만들 것사진 레이어 하나에 이미지 Fill과 반투명 보라색 Fill을 쌓아 브랜드 컬러를 입힙니다. 사진마다 색이 달라 디자인이 제각각 보일 때가 있어요. 사진 위에 같은 브랜드 컬러를 살짝 입히면 분위기를 맞추는 데 도움이 됩니다.이번에는 사진을 덮는 사각형을 따로 만들지 않고 하나의 레이어에 Fill을 두 개 쌓습니다. 편집 권한이 있는 Figma Design 파일과 연습용 사진을 준비해 주세요. Figma 공식 Fill 도움말1. 사진 레이어 준비하기사진을 캔버스에 넣고 선택합니다. 연습 예제는 W 600, H 300이며 Fill에 이미지가 들어 있습니다. 원본을 남기고 싶다면 사진 레이어를 복제한 후 복제본을 선택하세요. 2. 색상 Fill 추가하기사진 레이어가 선택된 상태에서 오른쪽 ..

이번에 만들 것사진 위에 검은 사각형을 올리고 Fill 불투명도를 조절해 흰 글자가 읽히는 반투명 자막 바를 만듭니다.실습에 사용할 AI 생성 풍경 이미지입니다. 사진 위에 글자를 바로 올리면 밝은 부분과 겹쳐 읽기 어려울 때가 있어요. 검은색 자막 바의 불투명도를 낮추면 사진을 비치게 하면서 글자 뒤를 어둡게 만들 수 있습니다.편집 권한이 있는 Figma Design 파일을 준비해 주세요. Figma 공식 Fill 도움말에 따르면 색상 옆 퍼센트에서 채우기 불투명도를 바꿀 수 있습니다.1. 사진 준비하기Figma 파일에서 Ctrl+Shift+K(Windows) 또는 Command+Shift+K(Mac)로 연습용 사진을 선택하고 캔버스를 클릭해 배치한 뒤 W 600, H 300으로 맞춥니다. 이 글의 풍..

이번에 만들 것가운데에서 바깥쪽으로 색이 퍼지는 원형 그라데이션을 적용해 프로모션 배경을 만들어 봅니다. 중앙에 시선을 모으고 싶은 배경에는 원형 그라데이션이 잘 어울려요. 선형 그라데이션이 직선 방향으로 색을 바꾼다면, Radial gradient는 중심에서 바깥쪽으로 색을 바꿉니다.편집 권한이 있는 Figma Design 파일을 준비해 주세요. 모든 플랜에서 사용할 수 있습니다. Figma 공식 그라데이션 도움말1. 배경 사각형 만들기빈 캔버스에서 Rectangle 도구를 선택해 사각형을 만들고 오른쪽 Layout에서 W 600, H 300으로 입력합니다. 이 사각형을 선택한 채 다음 단계로 넘어갑니다. 2. 원형 그라데이션 적용하기사각형을 선택하고 오른쪽 Fill 색상 칸을 클릭합니다. 색상 선택 ..

이번에 만들 것사각형에 보라색과 파란색이 자연스럽게 이어지는 선형 그라데이션을 적용해 이벤트 배너를 만듭니다.단색 배경이 조금 밋밋하다면 두 색이 서서히 바뀌는 그라데이션을 적용해 보세요. Linear gradient는 색이 직선 방향으로 부드럽게 이어지는 채우기입니다.편집 권한이 있는 Figma Design 파일을 준비해 주세요. 이 기능은 모든 플랜에서 사용할 수 있습니다. Figma 공식 그라데이션 도움말1. 배너 바탕 만들기빈 캔버스에서 Rectangle 도구를 선택해 사각형을 그린 뒤 오른쪽 Layout에서 W 600, H 300으로 입력합니다. 사각형을 선택한 상태를 유지해 주세요. 2. 선형 그라데이션 적용하기사각형이 선택된 상태에서 오른쪽 Fill 색상 칸을 클릭해 색상 선택 창을 엽니다...

이번에 만들 것직선 세 개로 만든 반쪽 잎을 복제하고 Flip horizontal로 뒤집어 좌우 대칭 아이콘을 만듭니다.양쪽이 같은 아이콘을 만들 때 반쪽을 그린 뒤 복제하면 모양을 따로 다시 그릴 필요가 없어요. 피그마의 좌우 반전은 선택한 레이어를 거울처럼 뒤집는 기능입니다.편집 권한이 있는 Figma Design 파일을 준비해 주세요. Figma 공식 반전 도움말1. 반쪽 잎 만들기빈 캔버스에서 P를 눌러 Pen 도구를 선택합니다. 위쪽 점을 찍고, 그 점을 기준으로 왼쪽 80px·아래 80px 지점에 두 번째 점을 찍습니다. 세 번째 점은 첫 점의 바로 아래 160px 지점에 찍고, 처음 점을 다시 클릭해 닫습니다. 오른쪽 변이 수직인 삼각형 형태가 반쪽 잎이에요. 좌표가 정확하지 않다면 크기를 ..

이번에 만들 것원 두 개를 겹친 뒤 Exclude로 가운데 공통 영역을 제외해 양쪽에 초승달 모양을 남깁니다.겹쳐 놓은 도형에서 공통 부분을 빼고 바깥쪽만 장식으로 쓰고 싶을 때가 있죠. Exclude는 두 도형의 겹친 부분을 제외해 겹치지 않은 양쪽 영역을 남깁니다.편집 권한이 있는 Figma Design 파일을 준비해 주세요. 이 기능은 모든 플랜에서 사용할 수 있습니다. Figma 공식 Boolean 도움말1. 첫 번째 원 그리기빈 캔버스에서 O를 눌러 원을 그립니다. 오른쪽 패널에서 W 160, H 160, Fill #7C3AED를 설정해 주세요. 2. 원을 복제하고 겹치기첫 번째 원을 선택하고 Ctrl+D(Windows) 또는 Command+D(Mac)로 복제합니다. 복제한 원을 원본보다 오른쪽..

이번에 만들 것크기가 같은 원 두 개를 대각선으로 겹치고 Intersect를 적용해 잎 모양을 만듭니다.잎 모양 결과를 표현한 AI 생성 설명 이미지입니다.두 도형이 만나는 부분만 도형으로 쓰고 싶을 때가 있죠. Intersect는 선택한 도형들이 모두 겹치는 영역만 남기는 Boolean 기능이에요.편집 권한이 있는 Figma Design 파일을 준비해 주세요. 이 기능은 모든 플랜에서 사용할 수 있습니다. Figma 공식 Boolean 도움말1. 첫 번째 원 만들기빈 캔버스에서 O를 눌러 원을 그립니다. 원을 선택하고 오른쪽에서 W 160, H 160, Fill #7C3AED를 입력해 주세요. 이 원이 잎 모양의 첫 번째 재료가 됩니다.실제 피그마에서 첫 번째 원을 준비한 화면입니다. 2. 두 번째 원..

이번에 만들 것둥근 사각형과 원을 겹친 다음 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 핸들이 ..