cropped-DALL·E-2023-11-03-15.02.35-Vector-illustration-of-a-simple-geometric-style-gray-rabbit-with-glasses-doing-a-yawn-inside-a-neat-square-border.-The-design-is-clean-and-modern-w-1.png

Chat GPT한테 Figma 디자인 배워보기

오늘은 Chat GPT를 통해서 Figma 디자인 하는 법을 배워보겠습니다.

정말 간단하게 내가 원하는 ASSET를 만들어보는 것이 목적인데요.

이게 과연 잠깐 배우는 걸로 가능할지 직접 해보겠습니다. 

어떤 단계를 거쳐야 할까?

Figma 에 로그인 하면 위와 같은 화면을 볼 수 있습니다.

이 화면을 Chat GPT 에게 보여주고 내가 원하는 Asset 을 만들기 위해서는 어떤 단계를 거치면 좋을지 물었습니다.

아래가 그 단계입니다. 

  1. 새 디자인 파일 생성: 우측 상단에 있는 + Design File 버튼을 클릭하여 새 디자인 파일을 생성합니다.

  2. 컴포넌트 만들기: 새로운 파일에서 원하는 형태의 UI 요소(예: 버튼, 입력 필드 등)를 디자인합니다.

  3. 컴포넌트로 변환: 디자인한 UI 요소를 선택하고, 상단의 메뉴 바에서 ‘Assets’ 탭을 찾아 Create Component (컴포넌트 만들기) 기능을 사용합니다. 이는 키보드 단축키 Command + Option + K (Mac) 또는 Ctrl + Alt + K (Windows)를 통해서도 수행할 수 있습니다.

  4. 라이브러리에 추가: 만든 컴포넌트를 팀 라이브러리에 추가하여 다른 파일에서도 사용할 수 있도록 합니다.

  5. 컴포넌트 사용: 다른 디자인 파일에서 해당 컴포넌트를 사용하려면, ‘Assets’ 패널에서 필요한 컴포넌트를 드래그하여 캔버스로 가져옵니다.

Design File 버튼을 누르면 위와 같은 화면으로 이동이 가능합니다.

이 상황에서 어떤 조작을 할 수 있을지 다시금 Chat GPT에게 물었습니다.

  1. 컴포넌트 제작:

    • 도형 추가: 왼쪽 상단의 툴바에서 도형 아이콘(예: 사각형, 원, 라인 등)을 선택하여 캔버스에 추가합니다.
    • 텍스트 추가: 텍스트 아이콘(T)을 클릭하여 캔버스에 텍스트 박스를 추가하고 입력합니다.
    • 아이콘 또는 이미지: 에셋 패널에서 이미 저장된 아이콘을 드래그하거나, ‘File’ 메뉴에서 ‘Place Image…’를 선택하여 이미지를 캔버스에 추가합니다.

  2. 스타일 및 디테일 조정:

    • 선택한 요소의 스타일을 변경하기 위해 오른쪽의 ‘Design’ 패널을 사용하여 색상, 테두리, 그림자 등을 조정합니다.
    • ‘Local styles’에서 정의된 스타일을 적용하거나 새 스타일을 만들 수 있습니다.

  3. 컴포넌트화:

    • 디자인한 요소를 선택하고 오른쪽 클릭 후 ‘Create Component’를 선택하거나, 키보드 단축키 Command + Option + K (Mac) 또는 Ctrl + Alt + K (Windows)를 사용하여 컴포넌트로 만듭니다.

  4. 에셋으로 사용:

    • 만들어진 컴포넌트는 ‘Assets’ 탭에서 바로 볼 수 있으며, 다른 프레임으로 드래그하여 재사용할 수 있습니다.

  5. 변수 및 특성 설정:

    • 컴포넌트를 선택한 상태에서 ‘Design’ 패널의 ‘Local variables’를 사용하여 컴포넌트의 속성을 변수로 설정할 수 있습니다. 이를 통해 컴포넌트의 인스턴스마다 다른 값을 쉽게 적용할 수 있습니다.

  6. 에셋 정리 및 관리:

    • ‘Assets’ 패널에서 컴포넌트를 폴더로 정리하여 관리할 수 있습니다.

저는 오른쪽과 같은 특정한 상품의 요금제에 대한

가격 명시와, 해당 요금제에 대한 여러 설명들을 나열할 수 있는 에셋을 원합니다.

오른쪽과 같은 에셋을 만들기 위한 단계를 Chat GPT에게 물었습니다. 

  1. 레이아웃 구성:

    • 사각형 도구를 사용하여 카드의 기본 형태를 만듭니다.
    • 카드 상단에는 또 다른 사각형을 만들어 ‘RECOMMENDED’ 라벨을 표시할 수 있는 공간을 만듭니다.

  2. 텍스트 요소 추가:

    • 텍스트 도구(T)를 사용하여 ‘Business’, 가격 정보(‘$32/month’), 그리고 각 특성(‘100 GB storage space’, ‘Standard marketing suite’ 등)에 대한 텍스트 박스를 만듭니다.

  3. 스타일링:

    • 각 텍스트에 적절한 폰트 크기와 굵기를 설정합니다.
    • 색상 팔레트를 사용하여 텍스트 색상을 조정하고, 필요한 곳에 그림자나 기타 스타일링 효과를 적용합니다.
    • ‘Select’ 버튼을 위해 라운드된 사각형을 만들고, 대비가 되는 색상을 적용한 후, 중앙에 ‘Select’라는 텍스트를 배치합니다.

  4. 아이콘 및 장식 요소 추가:

    • ‘Free domain for 1 year’ 텍스트 옆에 도메인 아이콘을 추가합니다. Figma의 내장 아이콘 라이브러리를 사용하거나 외부에서 가져온 SVG 파일을 사용할 수 있습니다.

  5. 컴포넌트화:

    • 모든 요소를 선택하고, ‘Create Component’를 통해 이를 하나의 재사용 가능한 컴포넌트로 만듭니다. 이렇게 함으로써 같은 스타일의 다른 요금제 카드를 손쉽게 만들 수 있습니다.

  6. 반응형 디자인 설정:

    • Auto Layout 기능을 사용하여 텍스트 길이가 변경되거나 다른 요소가 추가될 때 카드 디자인이 유연하게 반응하도록 설정합니다.

  7. 에셋 정리:

    • 만든 컴포넌트를 ‘Assets’ 패널에 저장하여 프로젝트의 다른 부분에서 쉽게 접근하고 사용할 수 있도록 합니다.

꽤나 자세하게 설명을 해주는군요..

한 번 이 설명에 따라서 대략적으로 UI를 조작하겠습니다.

우선 오른쪽 동영상처럼, 

해당 UI에서 상단의 조작 버튼을 통해 간단히 사각형을 생성 가능했습니다.

확실히 UI가 유저 친화적으로 구성이 되어 있어서 각 버튼들이 어떤 기능을 하는지 어렵지 않게 찾을 수 있었습니다.

저는 이렇게 하나의 사각형을 만들고,

이 사각형을 어떻게 꾸미면 좋을지 Chat GPT에 묻고 적용하는 방식을 지속했습니다.

대충 만져보니,

오른쪽과 같이 사각형 위에 글씨를 넣는 것도 가능해졌습니다.

먼저 Frame1 을 만들고,

Frame1 바깥에 사각형을 만들었습니다.

Frame1 요소 내부에 Text 를 넣은 후, 사각형 위쪽으로 올려주면  우측과 같은 모양이 나오더군요.

이런 식으로, 버튼이나 설명도 넣으면 될 것 같습니다.

이런저런 조작을 해본 결과.

오른쪽과 같이 최종적으로 사용하고 싶은 에셋을 완성했습니다.

이 정도 디자인 정도만 되어도 만족스럽기 때문에,

해당 에셋을 사용해보겠습니다.

에셋 추출하기

이렇게 작업을 하는 게 맞는지 모르겠지만..

저는 이런저런 도형과, Frame 등을 활용해서 일단 

전체 디자인이 내 눈에 보이도록 했습니다.

그리고 이때 사용한 여러 요소들을 클릭한 후,

이것을 그룹으로 묶어서 다운로드 했습니다.

이런식으로 추출한 에셋을 이용해서 웹사이트에 디자인을 추가 가능할 겁니다.