본문 바로가기

figma3

Figma Make × Gemini 3 Pro로 쇼핑리스트 웹 만들기 안녕하세요, 여러분?오늘은 피그마(Figma)의 Make 기능을 활용하여 간단한 웹페이지를 만들어 보겠습니다.Make는 이제 Google Gemini 3 Pro 모델과 연동되어 간단한 프롬프트만으로 높은 수준의 UI와 실제 동작까지 하는 프로토타입까지 만들 수 있습니다.오늘은 마트 가기 전에 무엇을 사야할 지 정리하는 용도로 사용할 수 있는 “쇼핑리스트”를 만들어보도록 하겠습니다.그럼 지금부터 저와 함께 차근차근 시작해 봅시다.1. Make 기능 진입 & 설정피그마에서 Make 기능을 사용하려면 1) 우측 상단 메뉴에서 [Make] 버튼을 선택하거나 2) 상단의 [+] 버튼 누르고 [Make] 버튼을 선택합니다. 그리고 Gemini 3 Pro 옵션을 활성화 해주셔야 하는데요, Make 우측 상단 톱니바퀴.. 2026. 1. 19.
피그마(Figma) AI 기능 : 이미지 제작/수정/배경 제거까지 손쉽게 피그마(Figma)가 AI 기능을 출시했는데요 (뒷북) Figma를 실행한 뒤 작업 화면 하단의 도구 모음에서 별 모양 아이콘을 클릭하면 새로운 AI 기능들을 한눈에 확인할 수 있습니다.기존 AI툴과 차별화된 점은 디자인 도중에 자연스럽게 AI 기능을 사용할 수 있다는 것인데요, 이번 글에서는 그중에서도 특히 이미지 생성, 수정, 배경 제거 기능에 집중해 각각 어떤 기능인지 자세히 소개해볼게요. 1. 텍스트로 이미지 생성하기Figma의 AI 기능 중 하나는 텍스트 프롬프트만으로 이미지를 만들어주는 기능입니다. 사용 방법은 간단합니다.텍스트로 원하는 이미지를 설명 → Make it 버튼 선택잠시 기다리면 AI 이미지가 자동으로 생성 됩니다.이 기능은 GPT 기반 이미지 생성 모델(DALL·E) 을 활용하고.. 2025. 7. 29.
[Figma] 피그마 오토 레이아웃(Auto Layout) 기능으로 버튼 디자인하기 오늘은 피그마의 대표 기능 중 하나인, Auto Layout을 활용하여 버튼을 만들어 보겠습니다.Auto Layout이란?Auto Layout은 요소들 사이의 간격, 정렬, 크기 조절 등을 자동으로 설정해주는 피그마의 기능입니다. 텍스트 길이가 바뀌어도 여백이 유지되고, 여러 요소를 묶어 정렬하거나 간격을 조절할 때 매우 유용합니다. 반복되는 UI 컴포넌트를 만들 때 시간을 절약하고 일관성을 유지할 수 있는 핵심 기능입니다. 기본 : 버튼 만들기아래와 같은 순서로 차근차근 따라하시면 30초 안에 버튼을 만들 수 있습니다.1. 텍스트 작성하기 [T] 버튼을 눌러 버튼명이 될 텍스트를 작성해 줍니다.2. 텍스트를 그룹으로 만들기[Group selection] 또는 [ctrl/command + G]를 눌러 방.. 2025. 4. 8.
728x90
반응형