C3 Dev Festival

C3 Dev Festival 2024

AI design challenges include bias, safety, and security. Trust and transparency are important in AI. Design principles for AI include user control, fighting bias, and promoting good decision-making. AI can enable the design process and investors expect to see it included in products. AI empowers individuals to create and share ideas, but managing expectations is crucial.

The unfolding AI revolution presents us with unique opportunities, challenges and responsibilities for designing our future. Learn how to exercise your critical thinking skills when it comes to integrating AI in your design craft, and how to build a solid ethical mindset around making design decisions in the Age of AI. Guided by Ioana Teleanu, the Lead Product Designer for AI at Miro, we'll explore the main themes that we need to reflect on as designers participating in shaping the future of humanity.

AI + UX: Product Design for Intelligent Experiences

Ioana Teleanu

React Summit US

React Summit US 2023

The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.

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.

The Whimsical Potential of JavaScript Frameworks

Josh Comeau

React Advanced

React Advanced 2024

tldraw is a canvas and a whiteboard SDK that can be integrated into React apps. It allows for high-performance rendering using the DOM and React. tldraw's canvas is powerful and can be enhanced with Vision models for image creation and AI utilization. It enables easy iteration and updating of designs based on annotations. tldraw can be used to create UIs, complex applications, interactive things, calculators, ASCII art, and more. It explores the use of AI on the canvas and can generate images, code, flowcharts, and content. tldraw focuses on performance optimization, AI model exploration, security, usability, and accessibility. The Talk also discusses the business model, future plans, and the vision of building a plugin community for the canvas.

This is the full story behind "Make Real", tldraw's viral AI experiment that lets you turn your low fidelity drawing into a functional website. It's half startup rollercoaster ride and half moral tale about betting on React — as Make Real was only possible because of the ability to put any React component onto tldraw's canvas. Here's the full behind-the-scenes perspective, and everything we learned along the way.

Make Real: tldraw's AI Adventure

Steve Ruiz

The Talk discusses the majoring coverage of the Reduzon system and the journey of migrating from design-system-3.0 to design-system-4.0. It introduces React scanner, a tool that statically analyzes code and extracts React component and prop usage. The Talk explores the options and custom functions in React scanner, as well as the processors and AST used by the tool. It also discusses exploring AST using astexplorer.net and showcases the usage of react-scanner. Finally, it mentions the importance of component restructure and introduces Omelet, a tool for component analytics.

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

Measuring Coverage of React Design System

Karan Kiri

Defeating decision paralysis when building design systems by letting tools make some decisions. Using design tokens to express design decisions as data, including colors and typography. Alias colors to give them more specific names and define typography with a type scale. Use existing spacing scales and build components in isolation to test different states. Start with the basics, use existing tools, and have fun with it.

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.

Defeat Decision Paralysis: Building a Killer Design System in Isolation

Shaun Evening

React Advanced 2023

Today's Talk explores how AI can empower developers to write better React code and automate the process of converting Figma designs into code. It discusses the use of heuristics to convert Figma designs into working HTML code and the potential of AI in generating better CSS class names. The Talk also highlights the importance of generating code that follows team conventions and automating design and code updates. Finally, it emphasizes the benefits of using large language models to automate tasks and improve developer productivity.

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.

Figma to React With AI, Are We There Yet?

Federico Terzi

JS GameDev Summit

JS GameDev Summit 2023

This talk explores game design, iteration, and prototyping, emphasizing the importance of playtesting with non-developers and smooth prototype testing. Observing playtesters carefully and gathering their feedback is crucial for understanding their thoughts and feelings. Playtesters are essential during the design process to ensure a cohesive and enjoyable game. The speaker shares a personal example of solving multiple problems with a single solution in the game Beast of Colchis. The talk concludes with a reminder to prototype, be nice to playtesters, and focus on making gameplay fun.

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.

The Secret to Good Game Iteration

Tamta Asatiani

Vue.js Live Conference

Vue.js London 2023

Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.

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>

Domain Driven Design with Vue Applications

Abdulrasaq Mustapha

Pinnia is a lighter, more modular state management solution for Vue apps, offering consistent patterns, TypeScript support, and an intuitive developer experience. PINIA encourages splitting state into manageable domains, improving code splitting, type inferences, team collaboration, and debugging clarity. Pinia provides flexibility in accessing and mutating state, with different approaches for option and setup stores. It also offers features like patch, reset, and onAction methods. Vue Mastery offers comprehensive Pinnia courses and resources for fast learning.

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.

Proven Pinia Patterns

Adam Jahr

The Talk covers clean components and when to create new components, as well as patterns for writing cleaner components and the benefits of VIP patterns. Refactoring and separating code into separate components can make it shorter and easier to read, reducing complexity. The importance of not repeating oneself and the benefits of using smaller components for performance and developer experience are discussed. Composables can help extract logic in large and complex components, and patterns can be incorporated into component libraries and design systems.

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.

Component Design Patterns

Michael Thiessen

React Day Berlin

React Day Berlin 2022

Today's Talk covers the challenges of implementing accessibility in design systems and the importance of using existing libraries. It also emphasizes the use of design tokens and code generation to ensure consistency across different code bases. The Talk explores automation, webhooks, and type safety in design systems, as well as the importance of measuring adoption and building accessibility. Finally, it suggests establishing a DesignOps team to encourage collaboration between designers and developers.

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.

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

Matheus Albuquerque

React Advanced 2022

This Talk introduces Figma's Widget Code Generator and demonstrates how to build a FigJam widget using it. The speaker discusses the implementation of voting functionality, avatar functionality, and remove vote functionality. They also explain how the Widget Code Generator plugin works and how to access properties and modify names using the Figma plugin API.

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.

Building Figma’s Widget Code Generator

Jenny Lea

The panel discusses the overlap between UX and developers, emphasizing the importance of collaboration and learning about design. The lack of decent developer and designer tooling is a big issue, and there is a need for a tool that bridges the gap between design and development. Understanding the promise and challenges of design systems and improving developer experiences requires a focus on UX and design as a discipline. Developers skilled in design can improve DX tooling, and getting involved in the design process and user testing is crucial. The language of React can help bridge the gap between developers and designers through conceptual modeling and object-oriented UX.

Panel Discussion: UX and the Design/Dev Overlap

Anjana Vakil

Maggie Appleton

JS GameDev Summit 2022

This talk provides insights and advice for aspiring indie game developers. It emphasizes the importance of game design and marketing, as well as the need to stand out in a crowded market. The speaker shares their experience with YouTube and experimenting with startups. Starting as an indie game developer requires self-motivation and a focus on strengths. The talk also highlights the challenges and opportunities in the indie game development industry, and encourages support for Ukrainian game developers.

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>

So You Want to be an Indie Game Developer?

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>

JSX for Designers

Travis Arnold

React Summit Remote Edition

React Summit Remote Edition 2020

Welcome to Designing with Coding Minds. Having a designer who codes in your team can help work faster and bridge the gap between developers and designers. Designers who can code can improve design systems and create components for design tools. GitHub is used at Elastic for collaboration between designers and developers. At Elastic, the code is prioritized over the final design, allowing the code to go live first.

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