Elizabet Oliveira

Designing with code, or with a coding mindset, can help your team to be more productive. 

For years I've been a designer who codes and I believe that designing with code or with a coding mindset can help your team to be more productive. 

In this talk, I'm exploring this concept and showing my daily workflow that can probably help to bridge the gap between devs and designers.

2020 Online

React Amsterdam

Designing with Code in Mind

Building complex user interfaces can be tricky if all you have is JS and CSS. That’s where React and SVGs come in.

Building complex user interfaces can be tricky if all you have is JS and CSS. That’s where React and SVGs come in. 

When it comes to exploring audio, creativity is key and SVGs in React enable endless design possibilities. 

So, in this talk, I’m going to show you a few powerful examples to inspire you and help you create amazing audio projects.

2019

React Day Berlin

Exploring audio with React and SVGs

SVG components are powerful. Elizabet shows how to prepare an SVG in Sketch, convert it to a JSX React component, and animate it with Framer Motion. It's surprisingly simple.

React Live

Animating an SVG cat with React.js

React NotAConf

An SVG’s Tale

Developers and designers don’t often use all SVG superpowers in their React applications.

This way, to drive your inspiration, I am going to tell you the story of an SVG image that one day made a very special friend - ReactJS. Alone and despised by its family, SVG yelled Enough! Now you’ll see what I’m all about!. And with this epic scream, little SVG unveiled all its superpowers. She took her friend React and they showed the world how to come up with creative solutions together.