Can you build a website without code with Figma?
HTML-код
- Опубликовано: 1 авг 2024
- How to create a "real" website very easily with Figma.
00:00 Intro
01:45 Importing and refining with the Framer
05:09 Working with desktop designs
09:32 Working on a mobile design
14:43 Deploy your website
14:33 Wrapping up
![Design is for designers Calendar design [Figma]](http://i.ytimg.com/vi/YmJknyvKR4g/mqdefault.jpg)
천사이신가요? 피린이에게 정말 큰 도움이되었습니다.
오 도움 되셨다니 좋네요! 감사합니다 ㅎㅎ
너무 좋은 영상 감사합니다! 현재 도메인은 있는 상태에서 웹사이트 제작을 해야하는데 디자인을 완성 한 후 도메인을 입력하면 있던 홈페이지에 디자인이 입혀지는지 궁금합니다:) 그리고 프레이머를 이용해서 사이트에서 적용되는 뭐..클릭하면 다음 페이지로 넘어가고 그런 것들도 다 가능한가요?
예 갖고 계신 도메인은 어떤 웹사이트에건 (어떻게 디자인 된 웹사이트건) 다 붙이 실 수 있습니다 ㅎ
네 당연히 프레이머도 웹사이트 빌더기에, 클릭시 페이지간 이동등에 대한 기능도 있습니다
정말 좋은 영상이네요 감사합니다!! 포폴 웹사이트를 만드려고 하는데 made by framer가 붙지 않으려면 도메인을 비용 내고 구매하면 될까요?
어떤 분 웹사이트 하단에 made with framer site 라고 적혀있던데 그게 framer를 통해 만든 무료 사이트인지도 궁금합니다!!
감사합니다 네 made with framer site 라고 붙어있으면 Framer 무료 요금제로 만든 웹사이트가 맞습니다 ㅎㅎ
안녕하세요! 영상 감사히 잘 보았습니다. 혹시 피그마에서 작업한 웹페이지 디자인 요소들을 프레이머를 통하지 않고 피그마 자체에서 바로 웹으로 올릴수 있는 괜찮은 피그마 플러그인도 있을까요?~ 그리고 그 방식이 이 영상에서 알려주신 프레이머를 통한 방식보다 더 나을 수 있나요?~ 고견 부탁드립니다!^^
안녕하세요 피그마에서 작업한것을 코드로 뽑아주는 overlay 등의 플러그인이 있습니다 :)
다만 이는 코드로 나오는 것이기에 웹으로 배포 하는 한단계 과정이 더 필요 하시게 됩니다.
유용한 내용이네요. 구독 좋아요 했어요. Position 은 피그마에서 반응형 고려해서 지정해주면 프레이머에서 다시 지정 안해도 깨지지 않고 잘 import 되지 않나요? 문서 위주의 피그마는 웹으로 퍼블리시할 수 있지만, 인풋 필드, 셀렉트 박스, 이런 진짜 현실 웹이나 앱에서의 인터랙션 구현은 불가능하죠? 잘 몰라서 질문 드립니다.
감사합니다! 네 position 은 가져오는데, 반응형 단위는 한번 더 체크 해주셔야 할거에요!
Form 은 인터렉션 요소가 특히 많은 편이라, 프레이머에서 몇번 더 작업이 필요 합니다
그치만 기술이 좋아져서 프레이머에서는 코드 없이 간단한 Form submission 등도 만드 실 수 있어요 ㅎ
안녕하세요 영상 잘 보고있습니다! 궁금한게 있는데요~ 무료 사용자는 데스크탑 앱 다운로드나 인서트에서 템플릿을 제공 받을 수 없는 걸까요? 제가 못찾는 건지 무료 사용자라 안 보이는 건지 모르겠어서 여쭤봅니당 ㅜㅜ
안녕하세요 템플릿들은 여기서 확인 해보시면 됩니다
www.framer.com/templates/
와, 반응형 이외에도 페이지 변경되고하는것도 가능할까요? 블로그를 만들고싶은데 ,,
네 Link 기능을 이용해 페이지 이동 하는것도 지원합니다 ㅎㅎ
프레이머로 발행한 도메인에 대해서 따로 유지 비용을 지불하지 않아도 되는건가요?
네 그렇습니다 xxx.framer.website 처럼 되어 있는 도메인은 framer.website 의 서브도메인이기에 따로 비용을 지불하지 않으셔도 됩니다
안녕하세요~ 넘 잘보고 있습니다 혹시 질문 하나 해도 될까요?
프레이머로 디자인시스템을 준비해보려는데 프레이머가 웹사이트 빌더쪽으로 피봇을 한다고 해서 깜짝 놀랬습니다....
토스를 참조하여 프레이머를 가지고 디자인시스템을 만들어보고자 했는데 이제는 어려워진걸까요?
안녕하세요 23년 프레이머가 웹사이트 빌더 기능에 초점을 두고 있는것은 맞습니다
다만 기존에 코드등을 활용하는 기능들은 그대로 있기에, 디자인 시스템이나 개발자 협업 요소들을 그대로 활용 하실 수 있습니다 :)
관련해서는 www.framer.com/developers/ 를 더 참고 해보시면 좋을것 같습니다 ㅎㅎ
@@design-engineer 감사합니다. 프레이머의 든든한 리더이십니다. :)
안녕하세요. 하버스쿨 강의를 신청하기 전에 궁금한 부분이 있어서 질문을 드립니다. Figma와 Framer의 차별점(?) 또는 차이점이 어떤 부분인지 잘 모르겠습니다. 그리고 Figma를 배운 경험이 있다면 어떤 생각으로 Framer에 접근해야 할까요? ^^;
Figma 는 UI/UX 그래픽을 그리는데에 최적화 되어있다고 생각하시면 좋을것 같습니다.
Framer 는 Figma 처럼 똑같이 UI/UX 그래픽 를 그릴 수 있습니다. 다른점은 개발 환경이 통합되어있어, 그리는것이 실제 웹사이트가 되기도하고 개발 환경에 직접적으로 그리는 것들이 똑같이 전달 될 수 있다는 점이 다릅니다 :)
@@design-engineer 아....Figma에서의 프로토타입은 단지 실제 상황을 시연하는 것이고, Framer에서는 실제 동작까지도 구성할 수 있다고 생각하면 될까요?
@@user-ck1ql7jx6n 넵 맞습니다 프레이머 자체가 웹 기술 기반으로 만들어져 있습니다
이에 프레이머의 디자인들은 웹 개발과 연동이 다른 툴에 비해 무척 자유로운 편입니다 :)
@@design-engineer 감사합니다^^
피그마랑 프레이머로 커뮤니티 사이트도 만들 수 있나요? 회원가입, 게시판 기능을 제공하나요?
프레이머에서 자체적으로 회원가입 기능들을 제공하지는 않습니다. (코드를 쓰면 가능합니다)
게시판 기능은 CMS 기능을 사용하시면 구현할 수 있습니다만, CMS 시스템은 현재는 관리자만 게시글을 작성 할수 있습니다
프레이머로 만든 사이트에 백엔드 요소 적용은 어떻게 할 수 있을까요? 프레이머로 만든 사이트를 vscode에 코드 형태로 받아올 수 있는지도 궁금합니다!
백엔드 적용은 일반 API 사용하듯이 프론트 코드를 쓰셔야 합니다 ㅎ
Overrides 라는 방법 또는 Code Components 를 쓰시면 React 코드를 표준 그대로 사용하실 수 있습니다.
코드로 받아오는것 관련해서는 프레이머의 handshake 라는 기능을 이용해보시면 좋습니다 www.framer.com/motion/handoff/
안녕하세요 선생님 혹시 다음아니라
프라이머? 관련해서 과금구조가 이해가안가서요
사이트 오픈하려하는데
프로 하고 워크스페이스까지 오픈해야하는건가요? 그러면 이중으로 돈을 내야한다는것인지
프로?로 진행해도되는지요
일단 사이트당 과금으로 이해 해주시면 됩니다
다만, 공동작업자가 있으실경우 말씀하신것 처럼 Workspace 의 Editor 당 추가로 요금이 발생 합니다
1인디자이너 회사로 옮겼는데, 프레이머 도움을 받아보려고하는데.. 영상이 너무 도움이 됩니다! 다른것도 쭉 보려고해요.
막상 웹페이지로 옮기는 건 어렵지 않은데.... 폼이나 폰트 설정 등이 조금 어려운데 그런 것도 알려주는 영상이 있나요..
안녕하세요 답이 너무 늦었네요 ㅠㅠ ㅎ
폼 이라는건 뭔가 사용자에게 입력하고, 제출을 유도하는것 등을 말씀하시는 것일까요?
피그마에서 prototype을 사용하여 다음 페이지 넘어가는것도 프레이머에서 구연되나요?
네 물론 됩니다 프레이머는 실제 웹페이지가 바뀌는 형태기 때문에 URL 도 같이 바뀌시게 되구요 ㅎㅎ
다만 피그마에서 제작된 인터렉션이나 프로토타입 피쳐들은 영상에서 그래픽을 가져온 것처럼 프레이머로 호환이 되지 않습니다
저기 프레이머를 처음 접해서 물어보고 싶은데요..프레이머 사이트 말고 다른 호스팅에 넣을수 있는 방법이 있을까요? 프레이머로 디자인한걸 html ,css, javascript로 추출하는 기능은 없는지 궁금합니다. 프레이머로 만들어도 프레이머의 호스팅을 써야 한다면 배워도 무용지물 같아서요..
코드로 빼는 법은 handshake 기능을 쓰시면 텀포넌트 단위로 빼실 수 있습니다
다른 호스팅을 쓰셔야하는 이유가 있을까요?
@@design-engineer 답변 감사합니다. 저는 쇼핑몰 디자인 쪽인데 디자인의뢰하시는 분들이 대부분 기존 쇼핑몰을 카페24나 고도몰 메이크샵을 운영하고 계시거든요. 그 분들이 디자인만 바꾸고 싶은데 프레이머에서는 방법이 없을거 같네요. 기존 쇼핑몰을 버리고 까지 올수는 없으니깐요. 프레이머의 최대 단점이 호스팅이 기본이다보니 기존 사이트를 버리고 와야 한다는거 같네요. 다시 한번 답변 감사합니다.
얘기 드린것 처럼 handshake 기능을 사용하면 코드로 (리액트) 빠지기에 이를 어느 호스팅이건 넣을 수 있습니다 :)
안녕하세요 ! 너무 좋은 글 잘 봤습니다, 영상을 보니 한 가지 궁금한 점이 있는데, 프로토타입으로 만든것도 코드로 변환할 수 있는 플러그인이나 방법을 아시나요 ?
안녕하세요 피그마 프로토타입을 따로 Export 하는 것은 피그마의 DevMode 정도를 이용하는 방법 밖에는 모르겠네요 ㅠ
프로토타입 & 인터렉션은 프레이머쪽이 저는 더 편하고 자유도도 높아서 프레이머에서 만드는 편입니다 (이러면 리액트쪽으로 뽑기도 훨씬 쉽습니다 ㅎㅎ)
@@design-engineer 감사합니다 :)
영상잘봤습니다! 프레이머 사용해서 포폴웹사이트 무료로 만들수있는건가요?
안녕하세요 네 무료로 만드실 수 있습니다 ㅎ 다만 무료사용자는 Made in Framer 배너가 붙게 되세요
@@design-engineer 도메인이용료를 따로 지불해야하나요?
@@eunsaelee7209 도메인은 따로 구매를 하셔서 사용하신다면 그 비용이 드시고요,
그게 아니라면 기본적으로 xxx.framer.site 형식의 도메인을 무료로 사용하실 수 있으세요 ㅎ
따라해보려했는데 framer copy paste 플러그인이 사라졌나봐요... 프레이머 플러그인 검색을 해봐도 html 코드로 바꾸는 것 밖에 안나오네요ㅜㅜ
네 이름이 "Figma to HTML with Framer" 로 바뀌었는데 사용방법은 같습니다 :)
www.figma.com/community/plugin/1037108608720448600/Figma-to-HTML-with-Framer
@@design-engineer ...헉 ㅋㅋㅋ 그렇게 한 번 생각은 해봤었는데 역시나!! 그냥 일단 해볼걸 그랬어요 ㅎㅎ 일단 웹사이트를 윅스로 다 만들었는데 이거로 운영하고 프레이머로 더 퀄리티 있는 웹사이트 만들어보려고 합니다 ㅎㅎ 너무 좋은 영상 감사합니다!!
네넵 도움 되셨다니 좋네요! ㅎㅎ
프레이머에서 html로는 따로 못빼나요?
안녕하세요 광형님
따로 html 코드로 빠지지는 않지만, handshake 를 이용하면 React jsx 로 쉽게 뺄 수 있습니다 :)
www.framer.com/learn/handshake/
@@design-engineer 감사합니다^_^
US Subtitles!!
Heyyy I've added the English subtitles finally.
랜딩 페이지는 피그마에서 디자인 하면서 크게 인터렉션이 없으면 바로 퍼블리싱하면 좋겠다~ 항상 생각했는데 이미 프레이머로 가능했군요🤩
감사합니다~~~!!
옙 ㅎㅎ 너무 웹사이트, 웹앱이 프레이머 덕에 만들기 쉬워진것 같아요
버튼 인터렉션도 프레이머로 웹사이트 제작 가능한가요?
네 그럼요! 이 영상 참고해보시면 될것 같습니다 ㅎ
ruclips.net/video/oDStjTQVXpA/видео.html
도움이 됐습니다. 감사합니다😆
네 감사합니다!
피그마로 만든 홈페이지에 도메인을 연결 시켜서 판매할수있나요
네 우선 피그마로 그리셔도 영상처럼 도메인을 연결하실수 있습니다 ㅎㅎ
판매하신다는것은 무얼 판매하시려는 걸까요?
@@design-engineer 만든 홈페이지를 판매하려해요
@@kennygo5053 아아 그렇군요 외주같은걸 하시는것이군요
홈페이지 종류에 따라 다르겠지만, 포트폴리오 웹사이트 같은 형태는 일반적인 웹사이트와 차이가 없습니다 ㅎㅎ
@@design-engineer 결제 시스템만 없다뿐이지 제품소개, 서비스 예약 현황은 구글 캘린더 임베드 해서 빌딩합니다.
소스를 따로 뺄 수는 없나요?
안녕하세요 피그마 DevMode 나 여러 플러그인에서 피그마 디자인을 코드로 빼는 방법들을 제공 해주고 있습니다 :)
@@design-engineer 프레이머로 html이나css로 소스를 뺄 수 있나요!!???♡♡
@@설탕아빠퀴즈 프레이머에서는 실험적인 handshake 라는 기능을 제공 해서
프레이머에 그려진 화면, 컴포넌트들을 모두 리액트 코드로 빼는 기능을 제공하고 있습니다
API 사용할수있나요?
안녕하세요 어떤 API 말씀하시는걸까요?
안녕하세요. 프레이머로 작업했을 경우, 어드민 페이지를 만들어서 직접 작업을 올릴 수 있도록 할 수 있을까요?
안녕하세요 프레이머에서 제공하는 Admin 은 현재 CMS 관리 페이지 밖에 없습니다
다만 코드를 사용하실 수 있다면, 별도의 Admin 페이지를 만드신 후 프레이머 내의 컨텐츠들과 연결해서 사용 하실 수 있습니다
@@design-engineer 답변 감사합니다. 덕분에 프레이머를 시작하는 데에 참고가 됐습니다.
네 봐주셔서 감사합니다
@@Shintaro2024 네 감사합니다