Designing with Code in Mind

Elizabet Oliveira

Panel Discussion: UX and the Design/Dev Overlap

Anjana Vakil

JSX for Designers

Travis Arnold

Proven Pinia Patterns

Adam Jahr

Maggie Appleton

The Secret to Good Game Iteration

So You Want to be an Indie Game Developer?

Tamta Asatiani

Consistent UX at Scale: Lessons Learned When I Wore the DesignOps Hat

Matheus Albuquerque

Building Figma’s Widget Code Generator

Jenny Lea

Steve Ruiz

Component Design Patterns

Michael Thiessen

Measuring Coverage of React Design System

Karan Kiri

Domain Driven Design with Vue Applications

Abdulrasaq Mustapha

Defeat Decision Paralysis: Building a Killer Design System in Isolation

Shaun Evening

Figma to React With AI, Are We There Yet?

Federico Terzi

The Whimsical Potential of JavaScript Frameworks

Josh Comeau

React Summit US

React Summit US 2023

When it comes to building whimsical interfaces, React is a surprisingly capable ally. In this talk, I'll show you how I use React to orchestrate complex interactions by digging into some examples from my blog.

Design systems are becoming increasingly popular in modern front-end development. However, measuring the usage and coverage of these design systems is often challenging. In this lightning talk, I'll discuss about a tool that we're working on which uses react-scanner and Abstract Syntax Tree (AST) with custom scripts to generate component usage data for a React design system. The talk will cover how we generate this data and how it is rendered in a dashboard to provide valuable insights on the coverage of the design system. - Introduction to react-scanner - Measuring Component Usage - Identifying Native HTML elements and Styled Components - Showing Tree structure of Page in terms of Components - Highlighting Anti Patterns - Benefits / Use Cases for this tool

These days everything has an app or website and users have come to expect perfection out of their UIs. With the bar so high, it can be overwhelming for those of us designing and building those experiences. Before you start building you need to choose fonts, type, spacing, and colours. What’s more, every decision you make seems to lead to even more options. Shaun will show you how to work through these tough decisions in small isolated steps that will make this massive undertaking feel like a breeze. You’ll learn how to build your colours, typefaces, and spacing into design tokens, build a theme, and develop your components in isolation using tools like Storybook.

React Advanced

React Advanced Conference 2023

What if we could generate production-ready React components (including props, responsiveness, CSS styling, TypeScript typings, and more) from Figma designs, automatically? This seemingly impossible task is becoming a reality thanks to the latest advancements in AI (such as ChatGPT). In this talk, we’ll discuss some of the techniques we are using at Anima to automate the boring parts of frontend development, generating React components from Figma designs. We’ll cover some algorithmic techniques, processes and deep-learning based approaches that could help you speed up your day-to-day frontend work.

JS GameDev Summit

JS GameDev Summit 2023

This talk will cover designing, playtesting, and iteration. After listening to this talk you'll find out about how to prepare for and run your playtest, how to analyze the results and further iterate on your games, and I'll tell you about my personal experience regarding the topic, which I have gained while working on CIDA's boardgame.

Vue.js Live Conference

Vue.js London 2023

Introduction to Domain Driven Design<ul><li>- What is DDD?</li><li>- Key principles of DDD</li><li>- Benefits of using DDD in web application development</li></ul>Domain Modeling in Vue 3 Applications<ul><li>- How to design and implement domain models in Vue 3</li><li>- Strategies for integrating domain logic with Vue's reactive data model and component-based architecture</li></ul>Best Practices for Implementing DDD in Vue 3<ul><li>- Strategies for organizing code in a way that follows DDD principles</li><li>- Techniques for reducing coupling between domain and application logic</li><li>- Tips for testing and debugging domain logic in Vue 3 applications</li></ul>

With Vue's new-and-improved state management library, Pinia, we gain a much more modular tool. While being more flexible, leaner, and lacking the Mutations of Vuex, Pinia presents us with more opportunities to be creative, for better or worse, with our app architecture and how state management is conducted and organized within it.This talk explores some @posva-approved best practices and architectural design patterns to consider when using Pinia in production.

How do you write a good component? In this talk we’ll explore several different patterns for writing better components. We’ll look at techniques for simplifying our components, making them easier to understand, and getting more out of the components we’ve already got.

React Day Berlin

React Day Berlin 2022

The need for Design Systems comes with the need for scale, efficiency, and consistency in design. Those have been one of the major talking points in the design—and front-end—community for the past years. Some love it; some are more skeptical. In this session, I'm gathering the common denominators I've noticed while working on Design Systems across small, medium, and huge companies, with an eye on points like consistency, themeability, accessibility, the path to deliver designs to actual code, and their adoption.

React Advanced Conference 2022

Widgets are custom, interactive objects you place in a Figma or Figjam file to extend functionality and make everything a bit more fun. They are written in a declarative style similar to React components, which gets translated to become a node on the canvas. So can you go the other way, from canvas to code? Yes! We’ll discuss how we used the public Figma plugin API to generate widget code from a design file, and make a working widget together using this.

JS GameDev Summit 2022

So you want to be an indie game developer? You probably have an idea of what indie game development is like. My job is to assure you that you are wrong. I'm going to talk about misconceptions around indie game development and all you need to know before getting into it. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Finland

React Finland 2021

Even today, with advanced tooling and frameworks, the gap between design and development still exists. This talk will examine how we can eliminate handoff between design and development teams using JSX as a shared source of truth across any platform. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit Remote Edition

React Summit Remote Edition 2020

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.

#design