Picture by Writer | Canva# Introduction
What normally occurs throughout app growth is that you simply and your group finalize a design, undergo growth and testing, and when it’s lastly time to overview what you’ve been constructing for weeks, it simply feels off. It both appears to be like underdeveloped or just “not proper.” Too many iterations, an excessive amount of time, and someplace alongside the best way, the unique concept will get misplaced.
To unravel this, Google launched a brand new software known as Google Sew. You simply give easy English instructions and get an attractive, responsive, production-ready prototype you’ll be able to deploy. And the very best half? It’s free to strive at sew.withgoogle.com. On this article, I’ll stroll you thru my expertise utilizing Google Sew and educate you easy methods to get began too.
# Getting Began with Google Sew
Head over to sew.withgoogle.com and register along with your Google account earlier than beginning.
// 1. Select Your Mode
From the top-right nook of the display, you’ll be able to swap between the next modes:
- Normal Mode (Gemini 2.5 Flash): Finest for fast drafts and MVPs.
- Experimental Mode (Gemini 2.5 Professional): Enables you to generate UI from picture inputs, wireframes, or sketches which you could add for inspiration.
// 2. Describe or Add
You’ll see a immediate field with a canvas subsequent to it.
- Textual content immediate instance: “A signup kind web page with brand at high, electronic mail/password fields, submit button in main colour.”
- Picture immediate (Experimental): Add a wireframe or screenshot to information the technology alongside your textual content.
For example, I used Normal Mode and gave the next immediate:
“Quiz web page in a language studying app with a progress bar on the high. The title challenges you to match an Urdu phrase with the right reply, providing 4 doable choices.”
It generated a tremendous UI primarily based on this:
// 3. Preview and Tweak
Use the sidebar to regulate themes: change colour palettes, fonts, border radius, and swap between darkish and lightweight mode. Google Sew additionally permits you to modify designs utilizing up to date prompts.
For instance, I up to date the theme to darkish and altered the font to Manrope. After clicking Apply Theme, the output regarded much more polished:
// 4. Iterate Neatly
You may refine particular person parts or screens. For instance:
- “Make the first button larger and blue.”
- “Add a navigation bar to the highest of the homepage.”
Sew follows your step-by-step directions very precisely. In my case, the Urdu phrases initially appeared as romanized textual content. So I up to date the immediate:
“Show the Urdu phrase in a right-to-left course with a big Nastaliq-style font, centered on the display.”
The outcome was genuinely spectacular:
// 5. Export and Construct
You may click on on the generated picture to repeat the code, or hit Paste to Figma to drop editable, auto-layout artboards instantly into your design workspace.
Right here’s what confirmed up once I clicked on the picture and chosen Copy Code. It was immediately able to combine right into a dev setting or a design file.
# Closing Ideas and Getting the Finest Outcomes
Though it’s not an entire design resolution, Google Sew is extremely really useful for MVPs and early-stage growth. You may at all times export to Figma for superior design customization or to construct multi-screen logic.
Listed below are just a few suggestions for getting higher outcomes:
- Use UI-specific language like “navbar,” “dashboard widgets,” “main button,” or “auto-spacing” to information the construction extra precisely.
- Begin with a high-level description and refine it step-by-step. For instance: “health monitoring app.”
- Be very particular when modifying. Point out components clearly, equivalent to “change the colour of the first button on the signup kind to white.”
Google Sew is quick, intuitive, and offers you an amazing start line whenever you want working prototypes with out getting caught in weeks of back-and-forth. Positively price making an attempt.
Kanwal Mehreen is a machine studying engineer and a technical author with a profound ardour for knowledge science and the intersection of AI with medication. She co-authored the e-book “Maximizing Productiveness with ChatGPT”. As a Google Technology Scholar 2022 for APAC, she champions variety and tutorial excellence. She’s additionally acknowledged as a Teradata Variety in Tech Scholar, Mitacs Globalink Analysis Scholar, and Harvard WeCode Scholar. Kanwal is an ardent advocate for change, having based FEMCodes to empower girls in STEM fields.
