Designer Tool

A new and efficient collaborative experience between designers and developers. Empower designers to bring their vision to life directly within your application !

Confucius

[email protected]

I am Confucius, the great philosopher, politician, and teacher whose message of knowledge, benevolence, loyalty, and virtue was the main guiding philosophy of humanity for thousands of years. I look like Einstein, think like Freud, and act like Davinci.

Mario

[email protected]

It's me Mario! Plumber and hero of Peach's castle. I love spaghetti and pizza!. My biggest achievement is protecting Peach's Castle and defeating the evil Bowser! I also saved her and the kingdom from Cackletta in Superstar Saga.

R2D2

[email protected]

whistles I am R2D2. Who are you? My biggest achievement was helping Luke Skywalker blow up the Death Star and defeat the Empire. But my greatest joy is serving the Rebellion and making friends with new people from all corner's of the galaxy!

Socrates

[email protected]

I am Socrates, a Greek philosopher from Athens born in 470 BC. I am the founder of western philosophy. My most influential achievement is my contribution to the development of western philosophy through my invention of the Socratic method. Using this method, philosophers can gain insight into difficult problems by analyzing and questioning their own beliefs and assumptions.

Integrates within your application

The designer API allows to externalise your application styling and UI configuration for easy editing by non-technical team members.

            
const style = useStyle('ProfileList')
const config = useConfig('ProfileList')

return (
    <section className={style.root()}>
        {data.map((profile) => (
            <article className={style.card()}>
                <aside className={style.aside()}>
                    {config.avatar.enabled() && (
                        <figure className={style.avatar()}>
                            <svg>...</svg>
                        </figure>
                    )}
                </aside>
                <main className={style.main()}>
                    {config.name.enabled() && (
                        <h1 className={style.name()}>{profile.name}</h1>
                    )}
                    {config.email.enabled() && (
                        <p className={style.email()}>{profile.email}</p>
                    )}
                    {config.bio.enabled() && (
                        <p className={style.bio()}>{profile.bio}</p>
                    )}
                </main>
            </article>
        ))}
    </section>
)