Figma

개요 / Overview

Figma는 브라우저 기반 디자인 도구로 UI/UX 디자인의 업계 표준이 되었으며, 데이터 시각화 -- 특히 인포그래픽, 프레젠테이션 품질의 차트, 브랜드 일관성을 갖춘 데이터 그래픽 -- 를 만드는 데도 점점 더 많이 사용되고 있습니다. Figma가 본질적으로 차트 도구는 아니지만, 벡터 편집 기능, 컴포넌트 시스템, 실시간 협업 덕분에 정확히 원하는 모습으로 시각화를 다듬어야 할 때 강력한 환경이 됩니다.

Figma is a browser-based design tool that has become the industry standard for UI/UX design, and it is increasingly used for creating data visualizations — particularly infographics, presentation-quality charts, and brand-consistent data graphics. While Figma is not a charting tool per se, its vector editing capabilities, component system, and real-time collaboration make it a powerful environment for crafting visualizations that need to look exactly right.

일반적인 워크플로우는 코드 기반 도구나 RAWGraphs에서 기본 차트를 생성하고, SVG로 내보낸 뒤, Figma로 가져와서 타이포그래피, 색상, 레이아웃, 주석을 브랜드 가이드라인에 맞게 다듬는 방식입니다. 또는 디자이너가 도형 도구와 오토 레이아웃 기능을 사용해 Figma 안에서 직접 차트를 만들기도 하며, 이때 데이터로부터 차트 요소를 생성해주는 커뮤니티 플러그인의 도움을 받는 경우가 많습니다.

The typical workflow involves generating a base chart in a code-based tool or RAWGraphs, exporting it as SVG, importing into Figma, and then refining typography, color, layout, and annotations to match brand guidelines. Alternatively, designers build charts directly in Figma using its shape tools and auto-layout features, often aided by community plugins that generate chart elements from data.

Figma의 플러그인 생태계에는 여러 데이터 시각화 도구가 포함되어 있습니다 -- Craft의 "Chart", "Datavizer", "Google Sheets Sync" 같은 플러그인은 데이터를 Figma로 직접 가져와 차트 요소를 생성할 수 있습니다. FigJam 화이트보드 도구 역시 간단한 다이어그램과 플로우차트를 지원합니다. 디자인 품질과 브랜드 일관성이 무엇보다 중요한 팀에게, Figma는 데이터 시각화가 최종적으로 다듬어지는 곳입니다.

Figma's plugin ecosystem includes several data visualization tools — plugins like "Chart" by Craft, "Datavizer", and "Google Sheets Sync" can pull data directly into Figma and generate chart elements. The FigJam whiteboarding tool also supports simple diagrams and flowcharts. For teams where design quality and brand consistency are paramount, Figma is where data visualizations get their final polish.

강점 / Strengths

• 모든 시각 요소에 대한 픽셀 단위의 완벽한 제어 -- 못 하는 것이 없습니다
• Pixel-perfect control over every visual element — nothing is off-limits
• 실시간 협업으로 디자이너와 데이터 분석가가 함께 작업할 수 있습니다
• Real-time collaboration allows designers and data analysts to work together
• 컴포넌트와 스타일 시스템이 모든 차트에서 브랜드 일관성을 보장합니다
• Component and style systems ensure brand consistency across all charts
• 벡터 편집으로 해상도에 구애받지 않는 결과물(SVG, PDF)을 생성합니다
• Vector editing produces resolution-independent output (SVG, PDF)
• 플러그인 생태계에는 차트 생성기, 데이터 커넥터, 아이콘이 포함되어 있습니다
• Plugin ecosystem includes chart generators, data connectors, and icons
• 오토 레이아웃으로 콘텐츠에 맞게 적응하는 반응형 차트 레이아웃이 가능합니다
• Auto Layout enables responsive chart layouts that adapt to content
• 프로토타이핑 기능으로 대시보드 디자인의 인터랙티브 목업을 만들 수 있습니다
• Prototyping features allow interactive mockups of dashboard designs
• 버전 기록이 모든 변경 사항을 추적하며 손쉽게 롤백할 수 있습니다
• Version history tracks every change with easy rollback
• 개인 사용자에게는 무료 티어가 넉넉합니다(Figma 파일 최대 3개)
• Free tier is generous for individuals (up to 3 Figma files)
• SVG, PNG, PDF로 내보낼 수 있으며 개발 핸드오프로 바로 넘길 수 있습니다
• Exports to SVG, PNG, PDF, and directly to development handoff

한계 / Limitations

• 데이터 기반이 아님 -- 데이터가 바뀌어도 차트가 자동으로 업데이트되지 않습니다
• Not data-driven — charts do not automatically update when data changes
• 계산 기능이 없음; 데이터를 집계, 필터링, 변환할 수 없습니다
• No computational capabilities; cannot aggregate, filter, or transform data
• 차트를 수작업으로 만드는 것은 코드 기반 도구에 비해 시간이 많이 걸립니다
• Building charts manually is time-consuming compared to code-based tools
• 차트 생성용 플러그인은 지원하는 차트 유형과 품질이 제한적입니다
• Plugins for chart generation are limited in chart type coverage and quality
• 인터랙티브 시각화에는 적합하지 않음(결과물이 정적이거나 프로토타입 수준에 그칩니다)
• Not suitable for interactive visualizations (output is static or prototype-only)
• 대규모 데이터셋으로 확장하는 것은 비현실적임 -- 각 데이터 포인트가 수작업 요소입니다
• Scaling to large datasets is impractical — each data point is a manual element
• 통계 계산 기능 없음(회귀선, 신뢰구간 등)
• No statistical computations (regression lines, confidence intervals, etc.)
• 디자인 도구 기능(제약 조건, 오토 레이아웃, 컴포넌트)에 대한 학습 곡선이 있습니다
• Learning curve for design tool features (constraints, auto layout, components)

이런 용도에 최적 / Best For

Figma는 시각화 디자인의 마지막 단계에 적합한 도구입니다 -- 기조연설 프레젠테이션, 연간 보고서, 인포그래픽, 마케팅 자료를 위해 차트가 아름답고, 브랜드에 일관되고, 픽셀 단위로 완벽해야 할 때입니다. 청중이 정확성만큼 심미성도 중시하고, 차트가 다른 디자인된 콘텐츠와 나란히 등장할 때 이상적입니다. 데이터 저널리스트, 그래픽 디자이너, 마케팅 팀은 Figma를 사용해 평범한 차트를 설득력 있는 시각적 스토리로 끌어올립니다.

Figma is the right tool for the last mile of visualization design — when a chart needs to be beautiful, brand-consistent, and pixel-perfect for a keynote presentation, annual report, infographic, or marketing material. It is ideal when the audience cares as much about aesthetics as accuracy, and when the chart will appear alongside other designed content. Data journalists, graphic designers, and marketing teams use Figma to elevate standard charts into compelling visual stories.

시작하기 / Getting Started

1. figma.com에 접속하여 가입합니다(무료 티어 이용 가능)
2. Go to figma.com and sign up (free tier available)
3. 새 디자인 파일을 생성합니다
4. Create a new Design File
5. 데이터 기반 차트를 만들려면 차트 플러그인을 설치합니다:
6. For data-driven charts, install a chart plugin:
   • Resources → Plugins를 열고 "Chart"를 검색합니다
   • Open Resources → Plugins → search "Chart"
   • 인기 있는 옵션: Chart(Craft 제작), Datavizer, Charts to Figma
   • Popular options: Chart (by Craft), Datavizer, Charts to Figma
7. 플러그인을 실행하고, 데이터를 붙여넣은 뒤(CSV 또는 수동 입력), 차트 유형을 선택합니다
8. Run the plugin, paste your data (CSV or manual entry), and select a chart type
9. 플러그인이 캔버스에 벡터 차트 요소를 생성합니다
10. The plugin generates vector chart elements on your canvas
11. Figma의 디자인 도구를 사용해 색상, 타이포그래피, 간격, 주석을 맞춤 설정합니다
12. Customize colors, typography, spacing, and annotations using Figma's design tools
13. 텍스트 레이어로 레이블, 범례, 출처를 추가합니다
14. Add labels, legends, and source citations as text layers
15. SVG(웹용), PDF(인쇄용), 또는 PNG(프레젠테이션용)로 내보냅니다
16. Export as SVG (for web), PDF (for print), or PNG (for presentations)

SVG 가져오기 워크플로우(복잡한 차트에 권장):

For SVG import workflow (recommended for complex charts):

1. Observable Plot, ggplot2, 또는 RAWGraphs에서 차트를 만듭니다
2. Create your chart in Observable Plot, ggplot2, or RAWGraphs
3. SVG로 내보냅니다
4. Export as SVG
5. Figma에서 File → Place Image를 사용하거나 SVG를 캔버스로 드래그합니다
6. In Figma, use File → Place Image or drag the SVG onto the canvas
7. SVG 요소의 그룹을 해제합니다(우클릭 → Flatten)
8. Ungroup the SVG elements (right-click → Flatten)
9. 디자인 시스템에 맞게 색상, 글꼴, 레이아웃을 다시 스타일링합니다
10. Restyle colors, fonts, and layout to match your design system
11. 주석, 콜아웃, 브랜딩 요소를 추가합니다
12. Add annotations, callouts, and branding elements

지원 차트 유형 / Supported Chart Types

Figma에서는 어떤 차트 유형이든 수작업으로 그리거나 SVG로 가져올 수 있습니다 -- 기술적인 한계는 없습니다. 다만 실용적인 차트 제작(플러그인이나 합리적인 수작업을 통한)은 막대 차트, 누적 막대 차트, 선 그래프, 영역 그래프, 파이 차트, 도넛 차트, 버블 차트, 단순한 트리맵을 아우릅니다. 샌키 다이어그램, 네트워크 다이어그램, 코로플레스 맵, 평행 좌표 플롯 같은 더 복잡한 유형은 코드 기반 도구에서 만든 뒤 다듬기 위해 SVG로 가져오는 것이 가장 좋습니다. Figma의 강점은 데이터로부터 차트를 생성하는 데 있는 것이 아니라, 어떤 차트든 뛰어나 보이게 만드는 데 있습니다.

In Figma, any chart type can be drawn manually or imported as SVG — there are no technical limits. However, practical chart creation (via plugins or reasonable manual effort) covers bar charts, stacked bar charts, line graphs, area graphs, pie charts, donut charts, bubble charts, and simple treemaps. More complex types like Sankey diagrams, network diagrams, choropleth maps, or parallel coordinates are best created in a code-based tool and imported as SVG for refinement. Figma's strength is not in generating charts from data, but in making any chart look exceptional.