React Course for Designers with Codux

Meet Codux

Codux is less intimidating for designers than code editors. It lets you handle styling visually, like Xcode, using boards and components. You can create a full site without touching code, except for optional CSS and routing. Codux organizes projects visually, making it easier to navigate and reuse components. My tutorial shows how it works—worth trying if code-centric tools are too much.

Codux offers a user-friendly environment for designers, bridging the gap between design and code. Here's why it's worth considering:

• Visual Styling: Codux allows you to handle boards and components visually, similar to Xcode, making it less intimidating than diving straight into VSCode.
• Minimal Coding Required: You can create an entire site without touching code, except for optional CSS and necessary routing for multiple pages. This makes it accessible for designers who prefer a visual approach.
• Full React Support: Since it's a full React site, you have the flexibility to expand and customize as needed.
• Organized Code Projects: Codux helps you organize your projects visually, making it easier to navigate large projects, especially in a team environment with both designers and developers.
• Reusable Components: The platform encourages reuse of components, promoting cleaner and more efficient code management.
• UI Elements and Templates: Codux provides various UI elements and templates to help you get started quickly.

This Course

In this course, you’ll build a website from scratch using Codux, starting with a Figma template. Learn to design, extract CSS, and understand Codux features. Collaborate with developers, set up multiple pages with React Router, and implement responsive designs with media queries. Create dynamic components with props and follow best practices for effective collaboration and website creation.

• Final site: https://nimble-elf-f60a07.netlify.app
• Figma Template: https://www.dropbox.com/s/cc0of4gwk8gwtg8/Codux%20Course.zip?dl=0
• DesignCode UI: https://www.figma.com/community/file/1316701892522528301
• Github: https://github.com/MengTo/codux-course

Preparing Your Responsive Figma Design

Creating fully responsive sites in Figma is now easier with features like auto layout wrap and min/max constraints, ensuring designs look great on any device. Code export plugins such as Dev Mode, Figma to Code, Anima, and Locofy simplify the transition from design to development by handling much of the CSS work.

To ensure your Figma design is ready for responsive web development, follow these guidelines:

1. Proper Naming Conventions: Name all text layers appropriately. Ensure all groups and subgroups are named correctly to avoid fallback to generic class names.
2. Use Frames for Containers: Do not use groups for containers; always use frames. Frames provide more control over layout and responsiveness.
3. Inner Elements: Use the "Fill" setting for inner elements instead of fixed sizes or "Hug" settings. This ensures elements adapt properly within their containers.
4. Design Readiness Checklist: Utilize the Local Lightning plugin to review your design. The plugin provides suggestions and actions to ensure your design is fully prepared for responsive web development.

How to Prepare Your Figma Designs for Code Export

Frames:

• Use frames to structure your design.
• Employ nested frames for organization.
• Apply absolute positioning for precise element placement.

Constraints:

• Set min/max constraints for responsive resizing.
• Use responsive constraints to pin elements within frames.

Auto-Layout:

• Utilize fill/hug content settings for flexible element resizing.
• Implement auto-layout wrap for clean layouts across different screens.
• Define gaps and use the "space between" setting for consistent spacing.

Additional Tips:

• Use component variants for different states.
• Define styles and variables for consistency.
• Maintain clear naming conventions.

Utilizing Code Export Tools:

• Dev Mode: Export CSS styles and assets.
• CSS Variables Generator Plugin (Free): Generate variables for consistent design.
• Figma to Code Plugin (Free): Export HTML/CSS/Tailwind/JSX, Flutter, and SwiftUI.
• Anima (Paid): Export production-ready HTML/CSS/React/Vue code.
• Framer: Launch responsive websites directly from Figma.
• Locofy.ai: Export clean, production-ready code.

By following these steps, you can ensure your Figma design is well-structured and optimized for responsive web implementation.

Download Codux

Codux is readily available for both Mac and Windows platforms, catering to a wide range of users and environments. To start using Codux:

1. Visit the Codux website.
2. Click on to the Download button.
3. Choose the version appropriate for your operating system.
4. Follow the installation instructions to get Codux set up on your machine.

Codux Templates

To help you jumpstart your projects, Codux provides a variety of templates. Each template is designed with a specific purpose in mind, allowing you to choose one that best fits your project’s needs:

• Blank Template: Ideal for those who want to start from scratch and build their design with complete creative freedom.
• Starter Template: Contains the essential components and layouts to help you get started quickly, perfect for general web development projects.
• E-Commerce Starter: Tailored for e-commerce projects, this template includes layouts and components that are commonly used in online stores, such as product listings and shopping carts.
• Various Sample Projects: Explore different design possibilities with templates designed for content management systems, card layouts, Semantic UI frameworks, and more. These templates provide a practical starting point and can be customized to suit your project requirements.

Using these templates, you can significantly reduce development time and start with a solid foundation, whether you are building a simple site or a complex web application.

Setting Up Your Project

Getting started with Codux is straightforward and intuitive. It provides a user-friendly interface for designers to create and manage projects visually. Follow these steps to set up your first project:

1. Start with Codux: Open Codux and set up a new project.
2. Select Blank Template: Choose the Blank template.
3. Edit Initial Design: Double-click on the App board to start editing the initial design.

Boards and Components in Codux

Codux provides a powerful way to manage and test your components using boards. Here’s a brief overview:

• Boards: Boards are isolated environments where you can render components with various property values, states, and settings. They allow you to test and edit components along with HTML elements, fully mocking how the component will be used in your app.
• Components: Components in Codux render based on the board's code settings. Board files have the .board.tsx extension and can be edited using Codux's built-in code editor or an external IDE. You can also create new boards visually in Codux. Changes to a board are immediately visible and saved to the board's code file.

Style Management

• CSS Modules: Apply styles to individual components or boards without them cascading to other areas. This ensures that styles are scoped locally, avoiding unintended global style conflicts.
• Global Styles: Manage consistent themes across your project by defining global styles for variables, colors, fonts, etc. Global styles ensure a cohesive look and feel throughout your project.
• Reset CSS: Use a Reset CSS template to normalize and standardize default browser styles, creating a consistent foundation for your project’s custom styles. This helps eliminate browser inconsistencies and simplifies cross-browser compatibility.

// index.css
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root {
    /* font */
    --font: Manrope;

    /* font sizes */
    --subheadline-semibold-size: 15px;
    --caption-2-regular-size: 11px;
    --headline-medium-size: 20px;
    --body-regular-size: 16px;
    --headings-heading-5-size: 24px;
    --headings-heading-2-size: 50px;
    --small-regular-size: 12px;

    /* Animation */
    --transition: transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Font Size */
    --small: 12px;
    --caption: 13px;
    --footnote: 14px;
    --body: 16px;
    --body-large: 18px;
    --headline: 20px;
    --heading-5: 24px;
    --heading-4: 30px;
    --heading-3: 40px;
    --heading-2: 50px;
    --heading-1: 60px;

    /* Colors */
    --background-primary: rgb(255, 255, 255);
    --background-secondary: rgb(255, 255, 255, 0.1);
    --background-tertiary: rgb(0, 0, 0, 0.05);
    --button-foreground: rgb(255, 255, 255);
    --container-background: rgb(255, 255, 255, 0.6);
    --container-background-recessed: rgb(255, 255, 255, 0.9);
    --container-background-secondary: rgb(255, 255, 255, 0.1);
    --container-background-tertiary: rgb(255, 255, 255, 0.9);
    --container-border: rgb(255, 255, 255, 0.5);
    --container-border-secondary: rgb(255, 255, 255, 0.2);
    --container-divider: rgb(0, 0, 0, 0.1);
    --container-divider-secondary: rgb(0, 0, 0, 0.2);
    --foreground-primary: rgb(0, 0, 0);
    --foreground-secondary: rgb(0, 0, 0, 0.7);
    --foreground-tertiary: rgb(0, 0, 0, 0.5);
}

body {
    background-color: var(--background-primary);
}

Dark Mode Variables

Dark mode variables enable your project to adapt to users’ dark mode preferences, providing a more comfortable viewing experience in low-light environments. Using the @media (prefers-color-scheme: dark) media query, you can define a set of CSS variables specifically for dark mode.

@media (prefers-color-scheme: dark) {
  --background-primary: rgb(0, 0, 0);
  --background-secondary: rgb(0, 0, 0 , 0.1);
  --background-tertiary: rgb(255, 255, 255 , 0.1);
  --button-foreground: rgb(255, 255, 255);
  --container-background: rgb(0, 0, 0 , 0.6);
  --container-background-recessed: rgb(0, 0, 0 , 0.2);
  --container-background-secondary: rgb(0, 0, 0 , 0.1);
  --container-background-tertiary: rgb(255, 255, 255 , 0.1);
  --container-border: rgb(255, 255, 255 , 0.1);
  --container-border-secondary: rgb(255, 255, 255 , 0.1);
  --container-divider: rgb(255, 255, 255 , 0.1);
  --container-divider-secondary: rgb(255, 255, 255 , 0.2);
  --foreground-primary: rgb(255, 255, 255);
  --foreground-secondary: rgb(255, 255, 255 , 0.7);
  --foreground-tertiary: rgb(255, 255, 255 , 0.5);
}

Dark Mode SVG Images with Invert Filter

To ensure SVG images look appropriate in dark mode, you can use the invert filter. This approach helps maintain visibility and consistency of images without needing separate dark mode assets. By applying the invert filter within the @media (prefers-color-scheme: dark) media query, your SVG images will invert their colors, making them suitable for dark backgrounds.

@media (prefers-color-scheme: dark) {
  img {
    filter: invert(1);
  }
}

Breakpoints and CSS Media Queries

To adjust the padding for different screen widths, you can use the following media queries:

// HomePage .root, BrowsePage .root
@media(max-width: 800px) {
  padding: 30px;
}
@media (max-width: 500px) {
  padding: 20px;
}

For adjusting title sizes based on screen width:

// Header
.logoText {
  display: block;
  @media (max-width: 800px) {
    display: none;
  }
}

Button Transition and Hover

Adding smooth transitions and hover effects enhances the user experience by providing visual feedback and making interactions feel more responsive. In Codux, you can define transition properties and hover states for elements to achieve this.

transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
&:hover {
  background-color: var(--container-divider-secondary);
  border-color: var(--container-divider-secondary);
}

Appear Animation

Adding appear animations can create a dynamic and engaging user experience by gradually revealing elements on the screen. This technique involves animating elements from an initial state of opacity and position to their final visible state.

.title,
.subtitle,
.text,
.buttons,
.image {
    opacity: 0;
    animation: fadeIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.title {
    animation-delay: 0.1s;
}
.subtitle {
    animation-delay: 0.2s;
}
.text {
    animation-delay: 0.3s;
}
.buttons {
    animation-delay: 0.4s;
}
.image {
    animation-delay: 0.5s;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

Handle Drawer Visibility with States

To control the drawer’s visibility, use React’s state management. Define a state variable to track whether the drawer is visible or not. Create a function to toggle this state when the hamburger menu is clicked.

const [isDrawerVisible, setDrawerVisible] = useState(false);

const toggleDrawer = () => {
    setDrawerVisible(!isDrawerVisible);
};

Add a drawer menu button to your header. This button will trigger the drawer’s visibility toggle function. When the button is clicked, the state variable updates, and the drawer appears or hides based on this state.

<a className={styles.buttonCircle} onClick={toggleDrawer}>
    <img src={MenuAlignLeftDescSvg} alt="" height="24px" width="24px" />
</a>

React Helmet

React Helmet is a library that allows you to manage changes to the document head in a React application. This includes updating the title, meta tags, and other elements, providing better control over SEO and user experience.

To use React Helmet, install the library and its TypeScript definitions:

npm install react-helmet
npm install --save-dev @types/react-helmet

Import React Helmet and use it within your components to define head elements:

import { Helmet } from 'react-helmet';

<Helmet>
    <title>Figma UI Kit and design system for iOS</title>
    <meta name="description" content="Create iOS apps faster with our extensive Figma UI kit. It offers adaptive components, font/color variables, dynamic type sizes, and both light and dark mode designs." />
    <meta name="keywords" content="Figma UI Kit, iOS App Design, UI Design" />
</Helmet>

Multiple Pages with React Router and Codux

Creating multiple pages in a React application using React Router with Codux involves setting up navigation links, configuring the router, and defining routes. This approach allows seamless navigation between different components in your project.

1. Install react-router-dom

First, install the react-router-dom package to enable routing capabilities in your React application:

npm install react-router-dom

2. Set up the Link in Navigation

In your navigation component, use the Link component from react-router-dom to create navigable links:

// Header.tsx
import { Link } from 'react-router-dom';

<Link to={'/'}><Link>

3. Set Routes in App Component

Ensure your routes are properly defined in the App component and that the router is used within the relevant components:

// App.tsx
import { Route, Routes } from 'react-router-dom';
import { MemoryRouter } from 'react-router-dom';

function App() {
    return (
        <MemoryRouter>
            <Routes>
                <Route path="/" element={<HomePage />} />
                <Route path="/browse" element={<BrowsePage />} />
            </Routes>
        </MemoryRouter>
    );
}

4. Set MemoryRouter in App

Wrap your application in MemoryRouter to manage the routing in memory, ideal for applications where you don’t need a persistent URL (like in Codux). App.tsx and the boards won't load in your real application, but is necessary in Codux.

// Header board, HomePage board, BrowsePage board
import { MemoryRouter } from 'react-router-dom";

<MemoryRouter><Header />
  <Header />
</MemoryRouter>

5. Real Application with Routing

In a real application, you would typically use BrowserRouter to handle routing, enabling persistent URLs and better handling of the browser’s history:

// main.tsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

<React.StrictMode>
    <Router>
        <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/browse" element={<BrowsePage />} />
            <Route path="/updates" element={<UpdatesPage />} />
        </Routes>
    </Router>
</React.StrictMode>,

GitHub Integration in Codux

Committing Changes

In Codux, committing your changes is straightforward and similar to how you manage version history in Figma. Here’s how you do it:

1. Make Your Edits: Work on your designs as usual. Every change you make can be committed, ensuring you have a log of your progress.
2. Commit Your Changes: Once you’re ready, commit your changes to your repository. This action saves a snapshot of your current work.

Publishing Your Website

Once your project is ready for deployment, you can use Netlify or Vercel to publish it. Here’s a step-by-step guide:

Connecting to GitHub

1. Sign Up/Log In: Create an account or log in to Netlify or Vercel.

2. Connect to GitHub: Link your Netlify or Vercel account to your GitHub repository.

   • In Netlify: Navigate to "New site from Git" and choose GitHub.
   • In Vercel: Click on "Add New Project" and select GitHub.
3. Select Your Repository: Choose the repository you want to deploy.
4. Configure Build Settings: Set the build settings for your React project. Netlify and Vercel often auto-detect the settings, but you can adjust them if needed.
5. Deploy: Click on "Deploy Site" (Netlify) or "Deploy" (Vercel). Your website will be built and published.

Resources to Learn Codux

• Video Tutorials: Official tutorials made by Codux.
• Community: Join Discord groups for support and tips.
• Playgrounds: Explore real-world examples.
• Social Media: Follow Codux on Twitter and YouTube for updates and tutorials.