# Bolt x Figma : 디자인에서 앱까지 한번에 자동 생성

> Clean Markdown view of GeekNews topic #19750. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19750](https://news.hada.io/topic?id=19750)
- GeekNews Markdown: [https://news.hada.io/topic/19750.md](https://news.hada.io/topic/19750.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-03-14T13:18:01+09:00
- Updated: 2025-03-14T13:18:01+09:00
- Original source: [x.com/boltdotnew](https://x.com/boltdotnew/status/1900197121829331158)
- Points: 12
- Comments: 1

## Summary

Bolt는 Figma 디자인을 픽셀-퍼펙트 풀스택 앱으로 즉시 변환할 수 있는 기능을 제공합니다. Figma Frame URL 앞에 `bolt.new/`를 붙이면 디자인이 자동으로 임포트되어 앱으로 생성되며, 이는 Bolt가 @AnimaApp과 연동하여 가능해졌습니다. 월 3개의 변환은 무료로 제공되며, 그 이후에는 변환 크기에 따라 토큰을 사용해야 하며, 최고의 결과를 위해 Auto Layout 사용이 필수입니다.

## Topic Body

- Figma Frame URL 앞에 `bolt.new/`만 붙이면 바로 임포트되어 즉시 앱으로 생성  
  - 피그마 디자인을 픽셀-퍼펙트 풀스택 앱으로 바로 변환   
- Bolt가 Figma-To-Code 도구인 @AnimaApp 과 연동하여 가능해짐   
- 월 3개의 변환 까지 무료이고 그 이후엔 토큰 사용(크기에 따라 50~200k)  
  - 최고의 결과를 위해서는 Auto Layout 사용 필수

## Comments



### Comment 36147

- Author: penguin5
- Created: 2025-03-20T13:10:59+09:00
- Points: 1

🔹 1. Bolt  
특징  
  
Figma의 Auto Layout을 감지하여 유연한 Flexbox 또는 CSS Grid로 변환  
디자인을 기반으로 React, Vue 등의 코드로 자동 변환  
간단한 URL 변환(bolt.new/[Figma URL])으로 빠르게 사용 가능  
장점  
  
UI를 거의 픽셀 단위로 유지하면서 코드 생성  
React 및 Vue 코드로 변환 가능  
전체 앱 구조를 변환할 수 있어 빠른 프로토타이핑 가능  
단점  
  
코드 최적화가 부족할 수 있음  
CSS의 가독성이 낮을 가능성 있음