티스토리 뷰

피그마 유용한 플러그인 

플러그인
주요 기능 활용
① Iconify 다양한 아이콘을 검색해서 편집 가능한 SVG로 삽입합니다. 무료입니다. 메뉴·검색·다운로드·요금 안내 아이콘 배치. 한 프로젝트에서는 같은 아이콘 세트로 통일하면 선 굵기와 분위기를 맞추기 좋습니다. (iconify.design)
② Content Reel 여러 레이어에 텍스트·아바타·이미지를 채웁니다. 직접 만든 문구도 등록할 수 있습니다. 게시판 제목·이름·날짜 등 반복 콘텐츠 입력. 긴 제목과 짧은 제목을 섞어 줄바꿈과 화면 높이를 확인하는 데 추천합니다. (Microsoft Design Tools)
③ Stark 색상 대비 검사와 시각 특성 시뮬레이션을 제공합니다. 회색 안내문·버튼·청구요금 숫자가 잘 읽히는지 디자인 단계에서 점검. 접근성 작업 경험이 있는 도토리님께 특히 추천합니다. (getstark.co)
④ Autoflow 화면이나 도형 사이의 흐름을 연결해 표현합니다. 화면설계서에서 ‘요금 조회 → 상세 → 납부’처럼 이동 관계를 설명할 때 유용합니다. (Figma)
⑤ html.to.design 기존 웹페이지를 편집 가능한 피그마 레이어로 가져옵니다. 화면 너비를 지정할 수 있고, 브라우저 확장 기능도 제공합니다. 기존 홈페이지 개편 시 현재 화면을 가져와 문구·배치 변경안을 만드는 데 추천합니다. 가져온 결과의 폰트·간격·레이어 구조는 원본과 비교해서 확인하세요. (html.to.design)
⑥ Tokens Studio 색상·글꼴·간격·모서리 등의 디자인 규칙을 토큰으로 관리합니다. JSON 저장과 동기화도 지원합니다. 화면 수가 많은 프로젝트에서 공통 디자인 규칙 관리. 기본 Variables와 컴포넌트에 익숙해진 뒤 도입하면 이해하기 편합니다. (GitHub)

 

○  새 화면 디자인: Iconify로 아이콘 넣기 → Content Reel로 내용 채우기 → Stark로 가독성 점검

○  기존 홈페이지 개편: html.to.design으로 현재 화면 가져오기 → 수정안 제작

○  화면설계서 작성: Autoflow로 이동 흐름 표시

○  공통 UI 규칙 관리: Tokens Studio 검토

 

Content Reel이 제공하는 이미지·아이콘·폰트는 프로토타입 용도로 이용 범위가 제한되어 있으므로, 실제 서비스 제작에서는 별도 사용 권한이 있는 소재로 교체하시면 됩니다. Stark 역시 디자인 점검 도구라서 구현 후 접근성 검사는 따로 필요

 

 

플러그인은 피그마 Community에서 위 이름을 검색해 실행하고, 자주 쓰는 것은 저장하시면 됩니다. 무료 범위와 유료 기능은 각 상세 페이지에서 확인

 

 

 

자주쓰는 플러인 저장

플러그인 상세 페이지에서 책갈피 모양의 ‘Save(저장)’ 버튼

 

 

  • 로그인한 상태에서 피그마 Community에 접속합니다.
  • Iconify처럼 저장할 플러그인 이름을 검색합니다.
  • 해당 플러그인의 상세 페이지를 엽니다.
  • 페이지 상단의 책갈피 모양 아이콘 또는 Save 버튼을 클릭합니다.
    하트는 좋아요이고, 책갈피가 저장이에요. 😊

 

※ 자료출처 : GPT-6.1 Sol 

 

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/10   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함