# Figma로 화면과 웹사이트 만들기

> 사용자 경험을 생각하며 화면과 웹사이트를 만들고 싶은 분께 맞아요. Figma 기초와 UX 프롬프팅부터 사용자 여정, 포트폴리오와 인터랙티브 웹 제작까지 따라가요.

- 연재: https://community.clauders.ai/series/figma-ai-design-lab
- 공간: [이미지 / 음악 / 영상](https://community.clauders.ai/media)
- 편 수: 8

## 편 목록

1. [😊1주차 오리엔테이션 후기와 Figma 튜터 프로젝트 만들기](https://community.clauders.ai/media/post/1%EC%A3%BC%EC%B0%A8-%EC%98%A4%EB%A6%AC%EC%97%94%ED%85%8C%EC%9D%B4%EC%85%98-%ED%9B%84%EA%B8%B0%EC%99%80-figma-%ED%8A%9C%ED%84%B0-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-bc4f7d49-b86b-857b-877e-7e58a94741ea) — 두부, 2025-07-08
   안녕하세요! 17기에 참여한 진여진입니다. 1주차 OT 정리 + 숙제 : 프로젝트 만드는 과정을 공유드립니다. Figma & Replit 스터디 참여자 입장에서 작성했습니다. 앞서, 1주차 재미있고 유쾌하게 스터디를 진행해주신 허세임님 감사드립니다! 😍 🎯 1주차 OT배운 내용: 프롬프트 가이드 오리엔테이션에서 가장 인상 깊었던 건 프롬프트 가이드 P…
2. [1주차 Figma AI 맛보기](https://community.clauders.ai/media/post/1%EC%A3%BC%EC%B0%A8-figma-ai-%EB%A7%9B%EB%B3%B4%EA%B8%B0-6d576fdb-59e6-8ba8-8bef-71ddc256d1d8) — 날쌘 오리, 2025-07-10
   Figma 수강하는 이선민입니다. 1주차 수업 내용 : Figma AI로 렌딩페이지 만들기 가장 인상 깊었던 내용은 프롬프트 작성 방법이었습니다. 제가 원하는 UI/UX를 AI로 잘 만들기 위해서는 어떤 서비스를 제공할 것인지가 정확해야 한다는 걸 배웠습니다. 이번주 과제와 개발 목표를 잘 수행하기 위해 실습 과정을 복습하면서 figma와 친해져보려고 합…
3. [Figma 1주차 후기와 UX 전용 프롬프팅 학습기](https://community.clauders.ai/media/post/figma-1%EC%A3%BC%EC%B0%A8-%ED%9B%84%EA%B8%B0%EC%99%80-ux-%EC%A0%84%EC%9A%A9-%ED%94%84%EB%A1%AC%ED%94%84%ED%8C%85-%ED%95%99%EC%8A%B5%EA%B8%B0-b75d4a15-a75d-8671-9f63-3238a7b254a4) — 두부, 2025-07-11
   안녕하세요 진여진입니다. 🙇 1주차 스터디를 마친 후기 소감과 UX 전용 프롬프트 가이드 문서를 공부한 과정을 공유드립니다. > TL;DR: 공식 문서를 파고들어 만든 자작 가이드 문서 만들면서 배운 이야기입니다. 제공받은 레퍼런스 문서들 스터디에서 제공받은 문서들이 다음과 같았습니다: AI를 위한 프롬프트 엔지니어링 가이드 프롬프트 설계 전략 - Ge…
4. [Figma Make를 통해 "고민박스" 프로젝트 웹사이트 만들기!](https://community.clauders.ai/media/post/figma-make%EB%A5%BC-%ED%86%B5%ED%95%B4-%EA%B3%A0%EB%AF%BC%EB%B0%95%EC%8A%A4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-8a50a3c6-0537-8a0e-b1ed-02a4d5f24f09) — 쑥떡, 2025-07-12
   📌 소개 저는 이번 Figma 스터디에 참여하게된 제잼스라고 합니다! 저는 현재 UX 디자이너 포트폴리오를 위해서 여러가지 지역사회 프로젝트를 진행중에 있는데요, 그 중 하나는 '고민박스' 프로젝트입니다. 이번 스터디에 참여하기 전, 아래 그림과 같은 박스를 만들어 10대-20대 친구들한테서 고민거리를 받아놓았습니다. 내가 웹사이트를 만들어 그곳에 나름…
5. [🤔💭아이디어 피벗 3번 하며 배운 사용자 여정 중심 개발 목표 잡기🌌](https://community.clauders.ai/media/post/%EC%95%84%EC%9D%B4%EB%94%94%EC%96%B4-%ED%94%BC%EB%B2%97-3%EB%B2%88-%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B4-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%97%AC%EC%A0%95-%EC%A4%91%EC%8B%AC-%EA%B0%9C%EB%B0%9C-%EB%AA%A9%ED%91%9C-%EC%9E%A1%EA%B8%B0-a0c1b4e9-3704-81c3-a8dc-02b6697a1c65) — 두부, 2025-07-15
   🖥️ 첫 시작: 데스크테리어 유튜브 제품 큐레이션 아이디어를 구상하기 시작했을 때, 제 개인적인 경험에서 출발했습니다. 8,9월에 이사를 앞두고 있어서 데스크테리어에 관심이 많았거든요. 자취남 유튜브를 보면서 책상 꾸미는 법을 배우고 있었는데, 문득 이런 생각이 들었습니다. "유튜브에서 보는 제품들, 실제로 사고 싶은데 찾기가 어렵네?" 유튜버가 사용한…
6. [1주차 OT가 궁금하다면 Figma 그리고 AI 디자인 톺아보기](https://community.clauders.ai/media/post/1%EC%A3%BC%EC%B0%A8-ot%EA%B0%80-%EA%B6%81%EA%B8%88%ED%95%98%EB%8B%A4%EB%A9%B4-figma-%EA%B7%B8%EB%A6%AC%EA%B3%A0-ai-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0-c6a2d73b-d4e9-81fe-bc4b-8317f9332fe0) — Noah, 2025-07-17
   지난 주, 1주차 OT를 마쳤습니다. 이번 스터디의 컨셉은 <디자인 좀 하는 개발자 & 개발 좀 하는 디자이너>인데요. 사례 실습만으로 야무진 퀄리티를 뽑아낸 스터디원 분들의 아웃풋을 보며 내심 안도감과 뿌듯함을 느꼈습니다. (수강생들의 작품 훑어보기) OT 콘텐츠 UI Builder별 생성 스타일 비교와 Figma AI의 특징 알아보기 UI Builde…
7. [애니메이션이 살아있는 강사 포트폴리오: Figma Make](https://community.clauders.ai/media/post/%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%EC%9D%B4-%EC%82%B4%EC%95%84%EC%9E%88%EB%8A%94-%EA%B0%95%EC%82%AC-%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-figma-make-6501d191-5029-880e-8f0b-091b1862d803) — 느긋한 화가, 2025-07-17
   안녕하세요~~ 유니입니다. 오랜만에 인사 드립니다. 나만의 강사 포트폴리오 사이트를 만들고 싶었어요, “애니메이션 맛집” 같은 역동적인 인터랙션을 꼭 넣고 싶었어요~ 물론 시중에는 프레이머나, 버블이나, 소프터나 다양한 노코드 툴이 있고 또 저희가 사랑하는 러버블 같은걸로 해도 되었겠죠? 하지만 제가 이번에 시도한건 figma make 예요~ 저희 스터디…
8. [퀴즈} 피그마MAKE가 정말로 잘하는 것은?](https://community.clauders.ai/media/post/%ED%80%B4%EC%A6%88-%ED%94%BC%EA%B7%B8%EB%A7%88make%EA%B0%80-%EC%A0%95%EB%A7%90%EB%A1%9C-%EC%9E%98%ED%95%98%EB%8A%94-%EA%B2%83%EC%9D%80-922c3fbe-8c98-8f67-81c7-3a49480dee71) — 부지런한 너구리, 2025-07-19
   그건 바로바로 공주🎀라도 남자가 될 수 있다고 알려주기 💕 는 농담이고 "세세한 프롬프팅" 없이 자율적으로 만들게 하기 입니다. 즉 → 피그마의 자유도를 보장하는 것...입니다. 그럼 생각보다 괜찮은 디자인을 간편하게 얻을 수 있다는 점! 이번 글은 최소한의 프롬프트로 피그마MAKE의 역량을 테스트해보는 내용이 담겨있습니다. 피그마MAKE에 대한 제대…