메인 콘텐츠로 건너뛰기

Figma Design

큰 그림을 위한 설계.
픽셀 하나까지 완벽하게.

디자인 시스템을 구축하든, AI로 편집하든, 세부 사항을 정교하게 다듬든 원하는 방식으로 작업하세요.

무한한 표현을 위한 무한한 캔버스입니다.

그려 보고, 움직이게 만들고, 상상한 그대로 구현하세요.

  • 모션 추가

    정교한 애니메이션을 제작하고, 재사용 가능한 모션 시스템을 구축하며, 개발 준비가 완료된 애니메이션을 전달하세요.

  • 파란색, 녹색, 연한 파란색 배경의 빨간 사과 일러스트.파란색, 녹색, 연한 파란색 배경의 빨간 사과 일러스트.

    풍부한 일러스트 그리기

    벡터 편집으로 픽셀 단위까지 정교한 디자인을 제작하세요. 벡터 브러시, 고급 외곽선 설정, 채우기 기능 등 다양한 도구를 활용할 수 있습니다.

  • 선택한 화면에 대한 다른 디자인 시안을 보여 달라고 Figma 에이전트에 요청하는 프롬프트선택한 화면에 대한 다른 디자인 시안을 보여 달라고 Figma 에이전트에 요청하는 프롬프트

    Figma와 대화하세요

    Figma AI 에이전트에 프롬프트를 입력해 새로운 디자인 방향을 생성하고, 텍스트와 이미지를 대량으로 편집하며, 디자인 시스템을 적용하세요. 이 모든 기능이 캔버스에 기본으로 통합되어 있습니다.

개발에 들어가기 전에 사용자가 어떤 경험을 하게 될지 확인하세요.

프롬프트만으로 디자인을 현실로 구현하세요. 그런 다음 다듬고 개선해 팀이 직접 보고, 사용해 보고, 피드백할 수 있는 코드 기반 프로토타입으로 완성하세요.

  • 프롬프트, 디자인, 또는 코드로 편집

    Figma Make에서 프롬프트만으로 고충실도 프로토타입을 만든 다음, 디자인, 코드, 프롬프트 등 원하는 방식으로 세부 사항을 다듬어 완성하세요.

  • 남동쪽을 가리키는 디지털 나침반의 Make 프로토타입이 임베드된 화면남동쪽을 가리키는 디지털 나침반의 Make 프로토타입이 임베드된 화면

    Make 프로토타입을 어디든지 임베드하세요

    프로토타입을 Figma Design, FigJam, Figma Slides에 추가하여 팀이 직접 클릭하고, 상호작용하며, 더 나은 피드백을 제공할 수 있도록 하세요.

많은 사랑을 받는 제품들이 Figma로 디자인됩니다

여러 도구를 오가는 대신 하나의 공간에서 모든 작업을 진행하고 있습니다. 덕분에 컨텍스트 전환에 드는 부담과 비용을 줄일 수 있지만, 무엇보다도 속도와 사용 편의성이 크게 향상됩니다. Figma에는 우리에게 필요한 모든 것이 있습니다.

Adam Morris

The Economist 제품 디자인 책임자

  • 95%

    Fortune 500 기업의 95%가 Figma를 사용합니다

2025년 3월 데이터 기준.

  • airbnb 로고
  • atlassian 로고
  • dropbox 로고
  • duolingo 로고
  • github 로고
  • microsoft 로고
  • netflix 로고
  • pentagram 로고
  • slack 로고
  • stripe 로고
  • the new york times 로고
  • zoom 로고

업계 최고의 디자인 시스템을 구축하세요.

조직 전체가 일관되게 고품질 제품을 구축할 수 있도록 단일 정보 출처를 만드세요.

  • 의도적인 디자인을 기본 설정으로 만드세요

    스타일, 컴포넌트, 변수 및 모드를 표준화하여 색상부터 패딩, 모션에 이르기까지 모든 요소가 제품과 브랜드 전반에서 일관되게 확장될 수 있도록 하세요.

  • 선택할 수 있는 디자인 시스템 서체, 색상 및 컴포넌트선택할 수 있는 디자인 시스템 서체, 색상 및 컴포넌트

    전체 팀이 사용할 수 있는 시스템

    라이브러리, 컴포넌트, 글꼴 등을 조직 전체에 공유하여 하나의 브랜드든 여러 브랜드든 모두가 동일한 기반 위에서 작업할 수 있도록 하세요.

코드와 디자인이 함께 작동합니다.

모든 디자인이 실제 프로덕션 환경에 사용되는 코드와 연결됩니다. 디자인한 그대로 구현되고 출시됩니다.

  • 디자인에서 코드로, 그리고 다시 디자인으로

    Figma MCP 서버는 변수와 컴포넌트 같은 디자인 컨텍스트를 에이전틱 코딩 도구에 제공해, 프롬프트 입력부터 코드 작성, 직접 디자인까지 원하는 방식으로 제작할 수 있도록 합니다.

  • 세부 사항에 개발자를 포함하세요

    Code Connect를 사용해 디자인 시스템을 코드베이스와 직접 연결하여 개발자가 실제로 동작하는 코드를 사용할 수 있도록 하세요.

디자이너들이 사랑하는 강력한 기능들로 가득합니다

  • Figma Motion

    신규
    아이콘에서 모션 키프레임과 곡선을 조정 중인 모습아이콘에서 모션 키프레임과 곡선을 조정 중인 모습

    타임라인 제어 또는 AI 에이전트의 도움으로 애니메이션을 제작하고, 디자인 시스템에 모션을 포함하며, 개발에 바로 활용할 수 있는 형식으로 내보내세요.

  • Figma Weave 도구(베타)

    신규
    사막 모래언덕 사진에 Moonlight 조명이 적용된 모습사막 모래언덕 사진에 Moonlight 조명이 적용된 모습

    미리 구축된 AI 업무 흐름 목록에서 선택해 Figma에서 바로 이미지와 벡터를 생성하세요.

  • 에이전트 생성 플러그인(베타)

    신규
    라이트 모드 및 다크 모드, 상호작용 기능, 핀, 색상 옵션을 제공하는 지도 제작 플러그인 UI라이트 모드 및 다크 모드, 상호작용 기능, 핀, 색상 옵션을 제공하는 지도 제작 플러그인 UI

    Figma 에이전트로 프롬프트 기반 도구와 효과를 만들어 누구나 활용하고 공유할 수 있도록 하세요.

  • 셰이더(베타)

    신규
    색상 및 블렌드 옵션이 있는 그레이디언트 맵 셰이더색상 및 블렌드 옵션이 있는 그레이디언트 맵 셰이더

    Vibe 코딩으로 사용자 지정 셰이더 채우기 및 효과를 제작하고, Figma MCP를 통해 Figma Make 및 기타 플랫폼으로 내보내세요.

  • Figma 에이전트(베타)

    에이전트와 협업해 디자인을 생성하고 변형하며, 반복적인 작업을 자동화하고, 디자인 피드백을 받아보세요.

  • MCP 서버

    Figma를 외부 도구와 연결해 AI 에이전트가 업무 흐름의 일부로 디자인을 읽고, 참조하고, 디자인에 대해 작업을 수행할 수 있도록 하세요.

  • 브러시

    강아지 일러스트를 완성하기 위해 다양한 브러시 효과 중에서 선택하는 모습강아지 일러스트를 완성하기 위해 다양한 브러시 효과 중에서 선택하는 모습

    유기적인 질감의 효과를 구현하는 브러시 도구로 디자인 파일에서 직접 그리며 손그림 디테일을 추가하세요.

  • 텍스처

    그림자, 흐림, 노이즈, 텍스처, 유리 효과 등을 활용해 어떤 디자인에도 깊이감과 디테일을 더하세요.

  • 벡터 도구

    강력한 벡터 드로잉 및 편집 도구를 활용해 사용자 지정 아이콘, 일러스트레이션, 도형을 제작하세요.

  • 벡터화

    평면의 정적 이미지를 몇 초 만에 편집 가능하고 확장 가능한 벡터로 변환하세요.

  • 컴포넌트

    재사용 가능한 UI 요소를 한 번만 만들어 파일 전체에서 활용하고, 디자인의 일관성을 유지하면서 손쉽게 업데이트하세요.

  • 변수

    글꼴, 간격, 색상 등 다양한 변수가 실행 중인 앱과 함께 표시된 화면글꼴, 간격, 색상 등 다양한 변수가 실행 중인 앱과 함께 표시된 화면

    색상, 간격, 텍스트 등의 재사용 가능한 값을 적용해 모든 디자인 전반에서 변경 사항을 한 번에 반영하세요.

  • 슬롯

    메뉴 드롭다운, 모달, 카드와 같은 컴포넌트를 분리하지 않고도 맞춤 설정하세요. 콘텐츠가 유연하게 바뀌어도 구조는 그대로 유지됩니다.

  • 디자인 확인

    신규
    디자인 시스템에 맞추기 위해 업데이트가 필요한 세 가지 색상을 나란히 비교하는 모습디자인 시스템에 맞추기 위해 업데이트가 필요한 세 가지 색상을 나란히 비교하는 모습

    디자인을 디자인 시스템과 비교해 일치하지 않는 부분을 확인하고, 한 번의 클릭으로 올바르게 수정하세요.

  • 오토레이아웃

    오토레이아웃으로 크기를 조정한 동일한 디자인의 두 가지 변형오토레이아웃으로 크기를 조정한 동일한 디자인의 두 가지 변형

    콘텐츠가 변경되면 크기와 레이아웃이 자동으로 조정되는 프레임을 만들어, 수동으로 수정하지 않아도 디자인이 자연스럽게 적응하도록 하세요.

  • 그리드

    사진 그리드의 패딩이 조정되는 모습사진 그리드의 패딩이 조정되는 모습

    간격, 크기, 구조를 정밀하게 제어해 벤토 레이아웃, 카드, 갤러리 등 유연한 레이아웃을 구축하세요.

  • 다중 편집

    프레임과 컴포넌트 세트 전반에 걸쳐 여러 개체를 한 번에 선택하고 편집하세요.

  • 브랜치 및 병합

    메인 파일에 영향을 주지 않고 별도의 브랜치에서 디자인 변경 작업을 진행한 뒤, 준비가 되면 다시 병합하세요.