Announcement
Last updated on Aug 16, 2024
Last updated on May 10, 2024
In the fast-evolving world of web development, where user expectations and technology standards are always on the rise, Next.js stands out for its robust performance and developer-friendly features. However, transforming app design in Figma to Next.js code can often seem challenging.
This is because developers need to bridge the gap between the static design elements in Figma and the dynamic functionalities required in a web application.
So, how do you overcome these design-to-code challenges?
DhiWise accelerates the Figma to Next.js transformation with advanced tools that convert Figma design components into ready-to-deploy Next.js code. This not only preserves the design's fidelity but also enhances developer productivity.
Here's a glimpse of the folder structure of generated code that makes DhiWise a game-changer:
1├── public --------- Static assets holder 2│ └── images --------- Contains all images 3│ └── fonts ---------- Font resources 4├── README.md 5├── src --------- Source code root 6│ ├── app --------- Application logic 7│ │ ├──<router> --------- Route-specific components 8│ │ │ └── page.tsx 9│ │ ├── layout.tsx 10│ │ ├── page.tsx 11│ │ ├── robots.ts 12│ │ └── sitemap.ts 13│ ├── theme --------- Theme(s) for the app 14│ ├── components --------- Reusable components 15│ ├── theme --------- Theme configuration 16│ │ └── components ----- Component style 17│ │ └── foundations ---- Base styles 18│ │ └── index.ts ----- Theme export file 19│ └── styles --------- Global style config 20│ ├── font.css ------ Font styling 21│ └── index.css ------ Main stylesheet 22├── next.config.js ----- Next.js config 23└── package.json
This demonstrates how DhiWise simplifies the initial step from Figma to code, setting the stage for a deeper dive into specific features that make your Next.js projects faster and more SEO-friendly.
DhiWise is not just another developer tool; it's a strategic partner that streamlines your development process from Figma to Next.js by ensuring:
With DhiWise, you are equipped to tackle any challenge in Next.js development, enhancing both the speed and quality of your output. Let’s now delve into Next.js-specific features that DhiWise optimizes for your development workflow.
Version 13 of Next.js introduced a new App Router built on React Server Components, offering more efficient routing capabilities. DhiWise now supports this feature, simplifying the integration of complex routing in your applications.
Folder structure of DhiWise generated Next.js application
DhiWise facilitates the creation of SEO-friendly components crucial for Next.js applications, such as optimized <Image />
and <Link />
elements, along with enhanced metadata management and sitemap generation.
1 // Example of using Next.js Image and Link components for SEO 2 import Image from 'next/image'; 3 import Link from 'next/link'; 4 5 const SEOComponent = () => { 6 return ( 7 <div> 8 <h1>The Importance of SEO</h1> 9 <Image src="/seo-image.jpg" alt="SEO" width={500} height={300} /> 10 <Link href="/learn-more"> 11 <a>Learn More About SEO</a> 12 </Link> 13 </div> 14 ); 15 };
Leveraging the capability of Next.js for modular development, DhiWise excels in scaffolding reusable nested components. This approach promotes scalability and reduces redundancy. Reusable nested components
DhiWise uses design tokens and systematized components to maintain styling consistency across your Next.js projects, streamlining the application of a cohesive design system.
1import React from "react"; 2 3const sizes = { 4 xs: "text-sm font-normal", 5 lg: "text-xl font-normal", 6 s: "text-base font-normal", 7 xl: "text-2xl font-normal md:text-[22px]", 8 md: "text-lg font-normal", 9}; 10 11export type TextProps = Partial<{ 12 className: string; 13 as: any; 14 size: keyof typeof sizes; 15}> & 16 React.DetailedHTMLProps< 17 React.HTMLAttributes<HTMLSpanElement>, 18 HTMLSpanElement 19 >; 20 21const Text: React.FC<React.PropsWithChildren<TextProps>> = ({ 22 children, 23 className = "", 24 as, 25 size = "s", 26 ...restProps 27}) => { 28 const Component = as || "p"; 29 30 return ( 31 <Component 32 className={`text-gray-400 font-plusjakartasans ${className} ${sizes[size]}`} 33 {...restProps} 34 > 35 {children} 36 </Component> 37 ); 38}; 39 40export { Text }; 41
DhiWise's code generation is tailored for Next.js, ensuring optimal layout and performance across all devices using built-in features and best practices.
1 /* Example CSS for responsive design */ 2 @media (max-width: 768px) { 3 .responsive { 4 flex-direction: column; 5 } 6 }
DhiWise provides an exact translation of Figma components into Next.js code, preserving design intentions such as component states, including hover and active styles. This ensures that interactive elements behave as expected in Next.js, without the need for repeated adjustments.
Figma Design
Output of DhiWise generated application in dev environment
1 import React from "react"; 2 import { ChakraProps } from "@chakra-ui/react"; 3 import { Text, Image, Flex, Heading, Box } from "@chakra-ui/react"; 4 5 interface Props extends ChakraProps { 6 className?: string; 7 imgSrc?: string; 8 title?: string; 9 description?: string; 10 avatar?: string; 11 name?: string; 12 date?: string; 13 } 14 15 export default function BlogCard({ 16 imgSrc = "images/img_placeholder.png", 17 title = "How to create a UX Writing portfolio as a beginner", 18 description = "The film rolls back the clock through Nike’s past as the company expands sport for a new generation over the next half century.", 19 avatar = "images/img_profileimg_large.png", 20 name = "Jane Phillips", 21 date = "22nd June, 2022", 22 ...props 23 }: Props) { 24 return ( 25 <Box {...props}> 26 <Image src={imgSrc} h={{ md: "265px", base: "auto" }} w="100%" borderRadius="12px" /> 27 <Flex gap="16px" alignSelf="stretch" flexDirection="column"> 28 <Heading size="s" as="h1" lineHeight="29px"> 29 {title} 30 </Heading> 31 <Text size="xl" color="gray.900_01" lineHeight="26px"> 32 {description} 33 </Text> 34 </Flex> 35 <Flex mb="8px" alignSelf="stretch" justifyContent="space-between" alignItems="center" gap="20px"> 36 <Flex gap="8px" w="45%" justifyContent="center" alignItems="center"> 37 <Image src={avatar} borderRadius="50%" h="56px" w="56px" /> 38 <Text>{name}</Text> 39 </Flex> 40 <Text textAlign="right">{date}</Text> 41 </Flex> 42 </Box> 43 ); 44 }
Tailoring DhiWise's output for Next.js includes optimizing the auto-responsiveness of components. This feature is essential for maintaining layout integrity and user experience across various devices and screen sizes, specifically using Next.js best practices.
1 /* Example CSS for responsive Next.js components */ 2 .responsive-component { 3 display: flex; 4 flex-wrap: wrap; 5 justify-content: space-around; 6 } 7 8 @media (max-width: 768px) { 9 .responsive-component { 10 flex-direction: column; 11 } 12 }
Integrating dynamic data is crucial for modern web applications. DhiWise simplifies this process by generating Next.js code for server-side rendering and dynamic data fetching.
1 // rest of the code 2 const blogData = [ 3 { 4 image: "images/img_placeholder.png", 5 title: "How to create a UX Writing portfolio as a beginner", 6 profileImage: "images/img_profileimg_large.png", 7 profileName: "Jane Phillips", 8 }, 9 { 10 image: "images/img_placeholder_265x323.png", 11 title: "How Snapchat and Netflix Break UX Design Principles", 12 profileImage: "images/img_profileimg_large_56x56.png", 13 profileName: "Wade John", 14 }, 15 { 16 image: "images/img_placeholder_1.png", 17 title: "How Do You Overcome Imposter Syndrome?", 18 profileImage: "images/img_profileimg_large_1.png", 19 profileName: "Jack Amber", 20 }, 21 ]; 22 23 // Component declaration code 24 <Flex 25 gap="24px" 26 alignSelf="stretch" 27 flexDirection={{ md: "row", base: "column" }} 28 > 29 {blogData.map((blogRecord, index) => ( 30 <Flex 31 key={"responsivecard" + index} 32 gap="16px" 33 borderColor="blue_gray.200" 34 borderWidth="1px" 35 borderStyle="solid" 36 bg="white.A700" 37 w="100%" 38 flexDirection="column" 39 p="10px" 40 borderRadius="23px" 41 > 42 <Image src={blogRecord.image} h="265px" borderRadius="12px" /> 43 <Flex gap="16px" flexDirection="column"> 44 <Heading as="h6" lineHeight="33px"> 45 {blogRecord.title} 46 </Heading> 47 <Text size="xl" color="gray.900_01" lineHeight="26px"> 48 The film rolls back the clock through Nike’s past as the company 49 expands sport for a new generation over the next half century. 50 </Text> 51 </Flex> 52 <Flex justifyContent="space-between" alignItems="center" gap="20px"> 53 <Flex gap="8px" w="45%" justifyContent="center" alignItems="center"> 54 <Image 55 src={blogRecord.profileImage} 56 borderRadius="50%" 57 h="56px" 58 w="56px" 59 /> 60 <Text>{blogRecord.profileName}</Text> 61 </Flex> 62 <Text textAlign="right">22nd June, 2022</Text> 63 </Flex> 64 </Flex> 65 ))} 66 </Flex> 67 //rest of the code
Follow these detailed steps to transform your Figma designs into a Next.js application using DhiWise:
Select Web App
Create new application
Configure the application setup as follows:
Next.js
.JavaScript
or TypeScript
.ChakraUI
or TailwindCSS
.Figma Design
Choose the screens from your Figma design that you want to include in your application.
Select screens from Figma to create application in DhiWise
Adjust settings according to your preferences while DhiWise fetches your Figma design data.
Application configuration while fetching screens
After successful fetching, DhiWise will display the identified components from your design.
Identified components
Navigate to the "Screen List" to select and manage specific screens for further configuration.
Screen List
Configure the CSS unit for your web app (px
or rem
).
Create additional components by right-clicking on UI elements within the interface.
Screen configuration
Click on the "Build app" button to initiate the code generation process.
Building App
Once the build process is complete, you can:
View Code
This guide helps you seamlessly create a fully functional Next.js web application from your Figma designs using DhiWise.
As we continue to innovate at DhiWise, our roadmap is guided by the evolving needs of Next.js developers. Our upcoming enhancements are specifically designed to maximize efficiency and performance in Next.js applications:
We are enhancing our layout management to support dynamic and shared layouts in Next.js, making it easier to maintain consistent layouts across different parts of your application.
1 // app/layout/main.js 2 export default function MainLayout({ children }) { 3 return ( 4 <div> 5 <header>Main Header</header> 6 <main>{children}</main> 7 <footer>Main Footer</footer> 8 </div> 9 ); 10 } 11 12 // app/layout/special.js 13 export default function SpecialLayout({ children }) { 14 return ( 15 <div> 16 <header>Special Header</header> 17 <main>{children}</main> 18 <footer>Special Footer</footer> 19 </div> 20 ); 21 } 22 23 // app/page/index.js 24 import MainLayout from '../layout/main'; 25 26 export default function HomePage() { 27 return <div>Welcome to the Home Page</div>; 28 } 29 30 HomePage.layout = MainLayout; 31 32 // app/page/special.js 33 import SpecialLayout from '../layout/special'; 34 35 export default function SpecialPage() { 36 return <div>Welcome to the Special Page</div>; 37 } 38 39 SpecialPage.layout = SpecialLayout; 40 41 // app/layout/dynamic.js 42 import MainLayout from './main'; 43 import SpecialLayout from './special'; 44 45 export default function DynamicLayout({ children, type }) { 46 const LayoutComponent = type === 'special' ? SpecialLayout : MainLayout; 47 return <LayoutComponent>{children}</LayoutComponent>; 48 } 49 50 // app/page/example.js 51 import DynamicLayout from '../layout/dynamic'; 52 53 export default function ExamplePage() { 54 return ( 55 <div> 56 Content of the Example Page 57 </div> 58 ); 59 } 60 61 ExamplePage.getLayout = page => <DynamicLayout type="special">{page}</DynamicLayout>;
This is still a prototype. Release version is subject to change.
Recognizing the need for optimized component rendering, we will automatically classify components as server-side or client-side, organizing them to leverage Next.js's hybrid rendering capabilities for better performance.
Client component in Next.js
Server component in Next.js
To further leverage the latest features of Next.js, we are working on UI streaming components and route groups for advanced performance optimizations and streamlined routing mechanisms.
1 import { Suspense } from 'react' 2 import { PostFeed, Weather } from './Components' 3 4 export default function Posts() { 5 return ( 6 <section> 7 <Suspense fallback={<p>Loading feed...</p>}> 8 <PostFeed /> 9 </Suspense> 10 <Suspense fallback={<p>Loading weather...</p>}> 11 <Weather /> 12 </Suspense> 13 </section> 14 ) 15 }
Before implementing streaming, data fetching is completed on server before showing the page
After implementing streaming, entire page is broken down into smaller chunks
Next.js allows to create groups of routes to make them easily manageble. It is denoted as (category)
. You will see such in upcoming updates.
We're refining our algorithms to better identify and categorize reusable components, enhancing modularity and reducing redundancy across your Next.js projects. We have more than 2000+ algoritms and we are adding support for more components.
Our development plans include support for advanced conditional elements, allowing for more dynamic and responsive UIs that adapt to user interactions and data states seamlessly.
1 "use client"; 2 import React, { useState } from "react"; 3 4 function ProductCard({ product, onAddToCart, onToggleWishlist }) { 5 const [isInWishlist, setIsInWishlist] = useState(product.isInWishlist); 6 7 const handleAddToCart = () => { 8 onAddToCart(product); 9 }; 10 11 const handleToggleWishlist = () => { 12 setIsInWishlist(!isInWishlist); 13 onToggleWishlist(product); 14 }; 15 16 return ( 17 <div className="product-card"> 18 <img 19 src={product.imageUrl} 20 alt={product.name} 21 className="product-image" 22 /> 23 <h3>{product.name}</h3> 24 <p>{product.description}</p> 25 <div className="product-price">${product.price.toFixed(2)}</div> 26 <button onClick={handleAddToCart} className="btn btn-primary"> 27 Add to Cart 28 </button> 29 <button 30 onClick={handleToggleWishlist} 31 className={isInWishlist ? "btn btn-danger" : "btn btn-secondary"} 32 > 33 {isInWishlist ? "Remove from Wishlist" : "Add to Wishlist"} 34 </button> 35 </div> 36 ); 37 } 38 39 export default ProductCard;
These enhancements are designed to ensure that DhiWise not only keeps pace with the latest Next.js developments but also anticipates future trends to provide a cutting-edge tool for developers.
As we wrap up our exploration of DhiWise's capabilities and future direction, it's clear that DhiWise is more than just a tool—it's a strategic ally in the complex world of Next.js development. Designed to empower developers, DhiWise transforms Figma designs into performant, SEO-friendly Next.js applications with precision and ease.
We invite you to experience firsthand how DhiWise can elevate your Next.js projects. Sign up, start your first project, and join our community of developers who are pushing the boundaries of web development. Whether you're looking to streamline your workflow, enhance application performance, or ensure your projects are future-proof, DhiWise offers the resources and support to achieve your goals.
How do you currently navigate the design-to-code process? What challenges do you face in Next.js development? Share your experiences by reaching out directly. Your insights have always helped us continuously refine DhiWise to better meet your needs and the demands of the evolving web landscape.
For more insights into making the most of DhiWise for your Next.js projects, explore our curated resources:
Thank you for joining us on this exploration of DhiWise. We can’t wait to see what you build "next"!