A self-study program to learn in public by Roberto RG

<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" /> Introduction

Hey everyone, I've been feeling this growing desire to elevate my craft skills and be able to build my designs. I already have some solid knowledge on design systems and components, also this role of design engineer is getting market attention. It feels like the next step for me and the right time.

In this project, I’ll be sharing my learnings and documenting my journey in a dedicated site where I will follow a self-study course created by myself.

</aside>

<aside> <img src="/icons/bullseye_yellow.svg" alt="/icons/bullseye_yellow.svg" width="40px" /> Goals

Get familiar with code. All projects would need to get involved with code: reading it, applying some code snippet from somewhere, writing some lines myself... The stack I would try to use: React, Framer Motion and Tailwind CSS.

Learning by doing. The process I will follow in this self-study course is quite simple: I would follow a lesson from any of the resources and try to apply it to something I already designed or remix it a bit to create something new. I’ll rarely start a project from scratch.

Share actionable tips and spark inspiration (hopefully) from my design-to-code projects. After applying the lessons, I'll share my results in brief articles where I'll do my best to break down concepts with visuals and step-by-step examples

Retrospective. To be honest, I'm still exploring if the design engineer role it is a fit for me. But I'm determined to find out through hands-on learning. I also will be sharing my honest thoughts and experiences along the way.

</aside>

Skills

Competencies I try to acquire


Tools


Courses

and resources I will follow


Projects

Some ideas to create (this is in the making, it might vary)


  1. Crafting Interactive UI Components in Framer
  2. Connect a Figma's Design system with Github through “Code Connect”