figma_tutor

figma_tutor Figma 사용팁과 프로토타이핑 정보를 공유합니다!

13/05/2026

귀한 작업시간 아껴주는
무료 코드 소스 라이브러리 5가지 🛠️

1️⃣ Float UI
마케팅에 최적화된 섹션을 제공하는
🔗 floatui.com
언어:HTML / Tailwind CSS / React
✅ Hero, CTA, Pricing, FAQ 등 마케팅 섹션이 풍부
✅ React 없이 HTML/CSS만으로도 사용 가능

2️⃣ Aceternity UI
재미있는 애니메이션이 들어간 컴포넌트
🔗 ui.aceternity.com
언어:React / Next.js / Tailwind CSS / Framer Motion
✅ 200개 이상의 애니메이션 컴포넌트 & 블록
✅ 랜딩페이지에 임팩트 있는 모션 넣기 딱 좋음

3️⃣ Magic UI
SaaS 템플릿을 제공하는
🔗 magicui.design
언어:React / TypeScript / Tailwind CSS / Motion
✅ 150개 이상의 오픈소스 애니메이션 컴포넌트
✅ shadcn/ui와 호환돼서 확장성 좋음

4️⃣ HeroUI
기본 컴포넌트를 제공하는
🔗 heroui.com
언어:React / Next.js / Tailwind CSS / React Aria
✅ 구 NextUI → 테마 커스터마이징 자유로움
✅ 유일하게 React Native(모바일 앱)도 지원

5️⃣ 21st.dev
섹션별 컴포넌트를 제공하는
🔗 21st.dev
언어:React / Tailwind CSS
✅ 복사-붙여넣기로 바로 쓸 수 있는 UI 마켓플레이스
✅ 커뮤니티 기반이라 컴포넌트가 계속 늘어남

💡 요약
→ 전부 무료로 사용 가능
→ React 못 쓰면 Float UI부터 시작
→ 애니메이션 넣고 싶으면 Aceternity UI / Magic UI
→ 앱까지 만들고 싶으면 HeroUI
→ 빠르게 복붙하고 싶으면 21st.dev

저장해두고 필요할 때 꺼내 쓰세요 🔖

#바이브코딩

12/05/2026

1.글로벌 기업의 Design.md를 모아둔 사이트
https://getdesign.md/airbnb/design-md

2.Design.md가 뭘까?
Design.md는 AI가 작업할 때 쓰는
디자인 가이드 문서인데
이 문서가 잘 되어 있을수록
좋은 아웃풋을 얻으실 수 있어요.

3.좋은 Design.md 작성하는 3가지 원칙
반드시 구체적인 수치를 넣어 작성합니다.
하네스(claude.md, settings와 같은)(기술적인 원칙)와
겹치지 않게 작성해요
하지 말아야 할 것 섹션을 반드지 포함합니다.

4.사용하는 방법
AI로 코딩 작업하는 폴더에
Design.md 형태의 문서를 작성해서
넣고, 필요할 때마다 불러와서 작업하면 됩니다.

5.claude에게 Design.md파일
작성 요청하는 프롬프트
이 웹사이트를 분석해서 DESIGN.md를 만들어줘
우리 웹사이트 주소 적기

아래 항목을 전부 포함해
1️⃣Overview — 전체 디자인 톤, 브랜드 성격, 핵심 특징 요약
2️⃣Colors — 브랜드, 표면, 텍스트, 보더 색상을 토큰 형태로 정리
3️⃣Typography — 폰트 패밀리, 크기/웨이트/행간/자간을 테이블로
4️⃣Layout — 스페이싱 체계, 그리드, 여백 철학
5️⃣Elevation & Depth — 그림자, blur, 깊이 표현 규칙
6️⃣Shapes — border-radius 체계
7️⃣Components — 버튼, 카드, 네비게이션, 인풋 등 주요 컴포넌트 상세
8️⃣Do’s and Don’ts — 반드시 지킬 것 / 절대 하지 말 것
9️⃣Responsive — 브레이크포인트, 터치 타겟, 반응형 전략
🔟Known Gaps — 분석에서 빠진 부분 명시
모든 색상, 크기, 간격은 토큰 형태로 적어줘.
예: {colors.primary} — 0066cc, {spacing.lg} — 24px
모호한 표현(“적절한”, “깔끔한”) 대신 구체적 수치를 사용해.

첫 시작이 어려우면 클로드에 간단한 원칙과 가이드만 넣어도
클로드가 알아서 파일까지 만들어주니까
위 드린 프롬프트로 시작해보세요!

6.그리고 좋은 디자인을 위한 스킬들
https://impeccable.style/
https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design/skills/frontend-des

[무료세미나] 클로드 코드/디자인이 좋아하는 피그마 디자인,어떤 조건이 필요할까요?피그마 피디아팀이 클로드 코드 하네스 셋팅부터 웹,랜딩 페이지 제작하는 과정까지 모두 공유하는 세션을 준비했어요!💗일시: 5월 8일(...
06/05/2026

[무료세미나] 클로드 코드/디자인이 좋아하는 피그마 디자인,
어떤 조건이 필요할까요?

피그마 피디아팀이 클로드 코드 하네스 셋팅부터
웹,랜딩 페이지 제작하는 과정까지
모두 공유하는 세션을 준비했어요!

💗일시: 5월 8일(금) 21:00 ~ 22:00 (온라인 실시간 라이브)
💗모집 인원: 선착순 500명 무료
💗신청 방법: 프로필 링크 클릭

궁금한 점은 댓글로 남겨주세요!
#하네스 #클로드하네스 #클로드코드 #바이브코딩 #웹디자인

클로드 코드 쓸 때 이거 모르면 일관된 디자인 뽑기 어려움클로드 코드 쓸 때 일관성 있는 디자인 결과물을 얻기 위해 꼭 알아야 할 필수 스킬,어떤것들이 있을까?클로드 코드 일관성 유지 필수 스킬 5선1. figma-...
26/04/2026

클로드 코드 쓸 때 이거 모르면 일관된 디자인 뽑기 어려움

클로드 코드 쓸 때 일관성 있는 디자인 결과물을 얻기 위해 꼭 알아야 할 필수 스킬,어떤것들이 있을까?

클로드 코드 일관성 유지 필수 스킬 5선
1. figma-variables-tokens-generator: 부트스트랩, 테일윈드 등과 통합하여 디자인 토큰을 일관되게 관리해 줍니다.

2. impeccable: 완벽하고 정교한 UI 컴포넌트 구성을 도와주는 스킬입니다.

3. UI/UX Pro Max: AI가 짠 듯한 뻔한 템플릿 느낌을 벗어나, 완성도 높은 디자인을 할 수 있도록 돕습니다.

4. frontend-design Skill: 프론트엔드 개발 관점을 반영하여 실제 구현 가능한 컴포넌트 설계를 지원합니다.

5. Figma 공식 MCP Skills: 피그마에서 공식적으로 지원하여 원활한 연동과 작업을 돕습니다.

💡 팁: 쏟아지는 스킬들, 어떻게 관리해야 할까요?
위의 좋은 스킬들을 다 설치하다 보면 관리가 힘들어질 수 있는데요.
* 스킬이나 서브 에이전트(Subagent) 구조를 무작정 잡기보다는,
프로세스를 먼저 정의하는 것이 중요합니다.

* 만약 스킬이 너무 많아졌다면, 같은 맥락을 가진 스킬들은 상위 스킬 하나로 통합(Merge)하여 추상화해 보세요. 지금까지 몰랐던 스킬들이 있다면 이번 기회에 꼭 저장해 두시고, 클로드 코드 작업 환경에 하나씩 적용해 보세요!

[디자이너 취준생분들을 위한 무료 특강]서류 100번 넘게 탈락하던 디자이너들은 어떻게 토스에 합격했을까?✔️라이브 일시:4월 21일 화요일 9시✔️라이브 방식: 구글밋 참여 https://meet.google.co...
16/04/2026

[디자이너 취준생분들을 위한 무료 특강]
서류 100번 넘게 탈락하던 디자이너들은 어떻게 토스에 합격했을까?

✔️라이브 일시:4월 21일 화요일 9시
✔️라이브 방식: 구글밋 참여
https://meet.google.com/mdw-poog-sta
✔️참여방식: 별도 신청없이 누구나 링크로 참여
✔️연사: 테크, 스타트업 전문가 10만명이 사용하는
커리어 플랫폼 서핏 대표 김진욱님
- 프로덕트 디자인 14년, 스타트업 및 대기업 VC 조직 경험
- 함께 일한 디자이너는 모두 토스, 글로벌 테크 기업으로 이직
- B2B채용 고객사 1,000개+인재 데이터 3만개 기반의 인사이트 보유

라이브는 늘 그렇듯 전날, 당일 인스타그램과
오픈카톡방 통해서 공지드릴 예정입니다.

디자인 취업쪽 고민 많으신분들
꼭 오셔서 인사이트 얻고 가세요!

#디자인포트폴리오 #취업포트폴리오 uxuidesign

05/04/2026

영상편집 클로드 코드로 자동화하기
설치 사이트👉auto-editor.com (무료 오픈소스)
🛠️ auto-editor (무료, 오픈소스)
명령어 한 줄로 무음 구간을 자동 삭제하는 CLI 도구입니다.
📌 Mac 은 터미널에 아래 코드 입력
brew install auto-editor
Homebrew가 없다면 먼저 이걸 실행
/bin/bash -c ”$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)“ 설치 후
안내되는 PATH 설정까지 완료 → 다시 brew install auto-editor

📌 Windows 설치
GitHub 릴리즈 페이지에서 Windows용 바이너리 다운로드
👉 https://github.com/WyattBlue/auto-editor/releases
파일명을 auto-editor.exe로 변경
PowerShell에서 다운로드 폴더 이동 후 실행 확인
cd ~\Downloads .\auto-editor.exe —help 도움말이 뜨면 설치 성공.

Claude Code로 영상 편집 자동화
Claude Code를 사용하면 auto-editor 실행은 물론,
FFmpeg을 활용한 전환 효과 삽입, 자막 추가, 영상 병합 같은 편집 작업도
대화로 처리할 수 있음. ”이 영상에 페이드 효과 넣어줘“ 한마디면 됩니다.

⚡ 그 외 쉽게 무음 삭제 지원하는 유료 서비스 3가지
설치 없이, 또는 GUI로 편하게 쓸 수 있는 도구들입니다.
* Vrew (브루)
한국에서 만든 AI 영상 편집 프로그램.
무음 구간 자동 감지 + 자막 생성 + 컷 편집까지 원스톱.
👉 https://vrew.ai
* Filmora (필모라)
초보자 친화적 영상 편집 프로그램. 무음 구간 탐지 기능 내장
볼륨/기간/버퍼까지 세밀하게 조절 가능.
👉 https://filmora.wondershare.com

* Descript AI
기반 영상/팟캐스트 편집 올인원 툴.
텍스트 기반 편집 + 무음/필러 워드 자동 제거.
👉 https://www.descript.com

#클로드코드 #영상편집 #자동화

⭐️Pretext가 뭐길래 이렇게 난리예요? 쉽게 말해 텍스트를 화면에 그려보지 않고도 높이를 미리 알아낼 수 있는 라이브러리.기존 방식은 텍스트를 다 그려보고 나서야 높이를 알 수 있었다면, Pretext는 DOM...
04/04/2026

⭐️Pretext가 뭐길래 이렇게 난리예요?
쉽게 말해 텍스트를 화면에 그려보지 않고도
높이를 미리 알아낼 수 있는 라이브러리.
기존 방식은 텍스트를 다 그려보고 나서야 높이를 알 수 있었다면,
Pretext는 DOM 없이 순수 계산만으로 높이를 알아내요.
빠르고, 가볍고(몇 KB), 한국어·중국어·아랍어·이모지까지 다 지원.

⭐️DOM이 뭘까?
DOM은 Document Object Model의 줄임말.
쉽게 말하면, 웹 페이지를 브라우저가
이해할 수 있도록 구조화한 설계도.

⭐️어디에 쓸 수 있을까?
✔️채팅 앱에서 말풍선 높이 미리 계산
✔️무한 스크롤/가상 스크롤 최적화
✔️텍스트 리사이즈 애니메이션
✔️Canvas나 SVG 위에 텍스트 그릴 때
✔️자막/캡션 시스템
✔️인터랙티브 프레젠테이션

⭐️내 프로젝트에 적용하기
✔️GitHub에서 복제 또는 다운로드
https://github.com/chenglou/pretext
✔️설치: npm install /pretext

개인적으로 이걸 보면서 웹 디자인도 그렇지만
재미있는 e-book도 많이 나올것 같다는 생각을 했는데
여러분들은 어떻게 활용할 수 있을것 같으세요?

#프리텍스트 #디자인팁 #디자인꿀팁

Address

서울특별시
Seoul

Telephone

+821037230060

Website

Alerts

Be the first to know and let us send you an email when figma_tutor posts news and promotions. Your email address will not be used for any other purpose, and you can unsubscribe at any time.

Contact The School

Send a message to figma_tutor:

Shortcuts

Share

Category