피그마 설치 및 간단 사용법

디자인 파일을 보고 구현하는 법

디자인 시안을 보고 구현하려면 먼저 피그마(Figma)를 설치하고 기본적인 사용법을 익히는 것이 중요합니다. 이번 글에서는 Figma 설치 방법과 기본 조작법을 쉽게 설명해드릴게요.

1. Figma 설치 방법

Figma는 웹 브라우저에서도 사용할 수 있지만, 더 원활한 작업을 위해 앱 설치를 추천드립니다. 앱을 사용하면 속도 저하 없이 디자인 작업에 집중할 수 있고, 단축키 사용도 더 직관적입니다.

Figma 다운로드 바로가기

위 링크에서 운영체제에 맞는 버전을 다운로드하여 설치해 주세요.

2. Figma 디자인 파일 불러오기

Figma에서 디자인 시안을 불러오려면 아래 단계를 따라 주세요.

    Figma 앱을 실행합니다.  

    우측 상단의 Create new → Import를 클릭합니다.  

    불러올 Figma 파일(Figma 디자인 시안)을 선택하면 자동으로 추가됩니다.  

피그마 파일 불러오기

3. Figma 화면 조정 방법

작업할 때 화면을 조정하는 방법을 알아두면 더 효율적으로 디자인을 살펴볼 수 있습니다.  

    확대/축소: Ctrl + + / Ctrl + -  

    화면 이동: 스페이스 + 드래그  

4. Figma 요소 선택 방법

Figma에서는 원하는 요소를 선택하는 방법이 다양합니다.  

    클릭: 해당 위치에 있는 최상위 요소 선택  

    Ctrl + 클릭: 클릭한 위치에 있는 요소 중 가장 근접한 요소 선택  

    Ctrl + 우클릭: 해당 위치의 모든 요소 목록 표시 (원하는 요소 선택 가능)

피그마 요소 선택

5. Figma 요소 간격 확인 방법

요소 간 거리 확인은 디자인 작업에서 매우 중요합니다.  

    요소를 선택한 상태에서 Alt 키를 누른 채 다른 요소에 커서를 가져가면 두 요소 간의 거리(간격)가 표시됩니다.

피그마 간격 확인

6. Figma 요소 스타일 확인 방법

디자인 요소의 스타일(크기, 글꼴, 색상 등)을 확인하려면

    요소 선택 후 좌측 패널의 Design 탭에서 크기, 색상, 글꼴 등의 정보를 확인할 수 있습니다.

피그마 요소 스타일 확인 방법

7. Figma 요소 파일 추출 방법 (Export)

Bubble.io에서 기본 아이콘을 제공하지만, 추가 아이콘이 필요할 경우 Figma에서 직접 추출하여 사용할 수 있습니다.

    추출할 요소를 선택합니다.  

    좌측 Design 탭 하단의 Export 버튼을 클릭합니다.  

    원하는 파일 형식(PNG, JPG, SVG 등)을 선택합니다.  

    Export 버튼을 눌러 이미지로 저장합니다.

피그마 요소 추출 방법

마무리하며

이제 Figma 설치부터 기본적인 사용법까지 익혔습니다! 이 정도만 알아도 Figma 디자인 시안을 보고 구현하는 것이 훨씬 쉬워질 거예요 :D

하지만 디자인만으로는 끝이 아니죠! 이제 Figma 디자인을 실제 웹사이트로 구현해보세요.
코딩 없이, 디자인 그대로 웹사이트를 만들 수 있는 방법을 알려드릴게요.

무료 강의 보기: 코드 없이 Figma 디자인 그대로! Bubble.io로 웹사이트 만들기

Bubble.io에 대해 궁금한 점이 있다면?

댓글로 남겨주세요! 여러분의 프로젝트가 돋보일 수 있도록 도와드릴게요.