Free course for UI designers

Learn to build interactive
UI prototypes with code.

Use components / Add props / Text

Case 1. Pass Text.
In the component: Write `props.yourPropName` inside curly braces. It will display the value passed from the component instance.

In the component instance: Add the prop name, followed by an equals sign and the text in quotes.

Open in CodeSandbox

Click to Copy

Button.js

import React from 'react'
export const Button = (props) => {
  return (
    <div className="button primary">{props.label}</div>
  )
}

import React from 'react'
export const Button = (props) => {
  return (
    <div className="button primary">{props.label}</div>
            )
          }
                        

Click to Copy

App.js

import './styles.css'
import { Button } from './components/Button.js'
export default function App () {
  return (
    <div>
      <Button label='Save'/>
      <Button label='Cancel'/>
    </div>
  )
}

import './styles.css'
import { Button } from './components/Button.js'
export default function App () {
  return (
    <div>
                <Button label='Save'/>
      <Button label='Cancel'/>
              </div>
            )
          }
                            

Browser

Save

Cancel

Technical freedom
for creative minds.

Choose the right level of code for each prototype. Learn three practical approaches that help you manage complexity, speed, and fidelity. Build on a stable foundation instead of depending on constant Figma changes that disrupt your workflow.

HTML 80%

CSS 60%

JavaScript 5%

React 10%

CodeSandbox 5%

VS Code 1%

Faster, sharper,
and harder to replace.

Build clickable prototypes that feel real. Achieve perfect alignment with engineering. Write better prompts for AI tools.

For designers:

Work more effectively with AI

Increase your value in the job market

Communicate more clearly with developers

Build interactive prototypes faster

For companies:

Use tools that are free to access

Keep your design files and assets in-house

Avoid proprietary formats

Increase team independence and reduce vendor lock-in

The future
of product design.

How AI is reshaping product design, why designers need code, and how to stay relevant.

Learn to build interactive
UI prototypes with code.

Technical freedom
for creative minds.

Faster, sharper,
and harder to replace.

For designers:

For companies:

The future
of product design.

Designers who code will always win

AI won't replace designers. It will take their jobs.

Why AI-era teams still need both designers and engineers

Why designers prefer no-code tools and how AI is changing the game

Learn to build interactive UI prototypes with code.

Technical freedom for creative minds.

Faster, sharper, and harder to replace.

For designers:

For companies:

The future of product design.

Designers who code will always win

AI won't replace designers. It will take their jobs.

Why AI-era teams still need both designers and engineers

Why designers prefer no-code tools and how AI is changing the game

Learn to build interactive
UI prototypes with code.

Technical freedom
for creative minds.

Faster, sharper,
and harder to replace.

The future
of product design.