공부 노트공부 노트
공부 노트/
No Code Design 툴 모음No Code Design 툴 모음
No Code Design 툴 모음
No Code Design 툴 모음No Code Design 툴 모음
No Code Design 툴 모음No Code Design 툴 모음

No Code Design 툴 모음

 
Tier 1 - 보정 작업 없이 바로 프로덕션으로써 운용 가능 + 나중에 Code Base 로 전환할 때 허들 없음
 
(없음)
 
 
Tier 2 - 다량의 보정 작업을 거치면 프로덕션에 활용 가능
Plasmic - The headless page builder for your codebase
"Some people will say that an app like Plasmic doesn't fit into their workflow, or that they don't need it because they are perfectly happy hand-crafting boilerplate code, and so on. In my experience, these people don't know what they are missing, and in a few years will have completely forgotten they ever doubted it."
Plasmic - The headless page builder for your codebasePlasmic - The headless page builder for your codebase
https://www.plasmic.app/
Plasmic - The headless page builder for your codebasePlasmic - The headless page builder for your codebase
Framer: Design beautiful websites in minutes
Design beautiful websites in record time.
https://www.framer.com/sites/
Framer: Design beautiful websites in minutesFramer: Design beautiful websites in minutes
AWS Amplify Studio - Figma to Fullstack React App With Minimal Programming | Amazon Web Services
AWS Amplify announces AWS Amplify Studio, a visual development environment that offers frontend developers new features (public preview) to accelerate UI development with minimal coding, while integrating Amplify's powerful backend configuration and management capabilities. Amplify Studio automatically translates designs made in Figma to human-readable React UI component code.
AWS Amplify Studio - Figma to Fullstack React App With Minimal Programming | Amazon Web ServicesAWS Amplify Studio - Figma to Fullstack React App With Minimal Programming | Amazon Web Services
https://aws.amazon.com/ko/blogs/mobile/aws-amplify-studio-figma-to-fullstack-react-app-with-minimal-programming/
AWS Amplify Studio - Figma to Fullstack React App With Minimal Programming | Amazon Web ServicesAWS Amplify Studio - Figma to Fullstack React App With Minimal Programming | Amazon Web Services
 
 
Tier 3 - 변환기능 또는 그에 준하는 기능이 존재 하나 실제 프로덕션에 사용은 어려움
Overlay | Design production ready code components
Forget about absolute positions and hundreds of HTML/CSS lines, just get clean code.
Overlay | Design production ready code componentsOverlay | Design production ready code components
https://www.overlay-tech.com/
Overlay | Design production ready code componentsOverlay | Design production ready code components
Figma to Code | Grida
Figma to Code | Opensource, Headless design to code automation software. Supercharge your frontend development. Instantly convert your design to production ready code.
Figma to Code | GridaFigma to Code | Grida
https://grida.co/
Figma to Code | GridaFigma to Code | Grida
pxCode | Figma to HTML, Design to Code Truly Responsive
pxCode is a Visual Programming Tool for Web Responsive Design. 1. No more Measurement with Handoff tools. 2. No more Hand-Coding and CodeGen. 3. Complete Control your Layout and Code.
pxCode | Figma to HTML, Design to Code Truly ResponsivepxCode | Figma to HTML, Design to Code Truly Responsive
https://www.pxcode.io/
pxCode | Figma to HTML, Design to Code Truly Responsive
Anima: Design to code | High-fidelity prototypes
Anima helps teams to create interactive prototypes using Figma, XD, & Sketch. Then automatically convert them to React, Vue & HTML code
Anima: Design to code | High-fidelity prototypesAnima: Design to code | High-fidelity prototypes
https://www.animaapp.com/
Anima: Design to code | High-fidelity prototypesAnima: Design to code | High-fidelity prototypes
BuilderX
BuilderX is a browser based screen design tool that codes React Native & React for you
BuilderXBuilderX
https://builderx.io/
BuilderXBuilderX
Builder.io - Drag and drop experience builder
Build and optimize digital experiences for any tech stack with full control, visually.
Builder.io - Drag and drop experience builderBuilder.io - Drag and drop experience builder
https://www.builder.io/
Builder.io - Drag and drop experience builderBuilder.io - Drag and drop experience builder
Professional website builder for developers | teleporthq.io
TRUSTED BY COMPANIES AND PASSIONATE INDIVIDUALS FROM See what makes teleportHQ the all-in-one platform for front end development Quick drag and drop website builder Simply drag and drop elements to build your page to adjust your web design. Professional templates to get started Build a new website from scratch, or start from one of our website templates.
Professional website builder for developers | teleporthq.io
https://teleporthq.io/?figma-page
Professional website builder for developers | teleporthq.ioProfessional website builder for developers | teleporthq.io
www.useunify.app
www.useunify.appwww.useunify.app
https://www.useunify.app/
figma-low-code
Github
figma-low-code
Owner
KlausSchaefers
Updated
Jul 18, 2024
RELAY - 产品设计协作工具
RELAY - 产品设计协作工具RELAY - 产品设计协作工具
https://relay.jd.com/
Locofy.ai - ship your products 2X faster - with low code
Turn your designs into production-ready frontend code for mobile apps and web. Ship products 2X faster with your existing design tools, tech stacks & workflows.
Locofy.ai - ship your products 2X faster - with low codeLocofy.ai - ship your products 2X faster - with low code
https://www.locofy.ai/

공통적인 한계점

 
🚫
absolute positioning 이 아닌 relative positioning 으로 인한 레이아웃이 변환을 거치면 전체적으로 손상되므로 변환된 디자인을 상당부분 손봐야함
🚫
변환기가 있으나 일부분만 동작하거나 대부분 상당한 오차가 디자인에 반영된 상황이라 다시한번 전체적인 사이즈를 맞춰줘야하는 문제
🚫
내부에서 기본 에디터를 제공하는 경우, 디자이너에 의한 수정이 어려운 상대 좌표계를 사용하여, 디자이너가 해당 에디터내에서의 디자인을 기피하게 되고, 결국엔 디자이너의 디자인을 개발자가 한번 더 디자인해줘야하는 문제점
🚫
Responsive Layout 및 Breakpoints 지정이 불가능하며, 또한 Figma 의 오토레이아웃 또한 사용이 불가능하며 (혹은 그와 유사한 개념으로 치환), 개발자가 실제 프로덕션에선 사용하기 어려운 결과 코드인 경우
🚫
데이터 바인딩이 불가능하거나, 외부 프레임워크에서 값 주입이 고려가 안되있거나, 상태적용 등이 고려가 안 된 경우