Step-by-step walk-through for using ChatGPT to plan a Design System learning event
Before using ChatGPT, I relied on templates and tables in Notion or Google Spreadsheets to organize my thoughts. Sometimes, I also used FigJam boards to gather inspiration and rearrange information in a non-linear way. However, to see how my thinking has evolved over time through iterations and edits, I had to go through the version history of those files.
Recently, I took the initiative to plan a two-day virtual learning event to onboard my team with Design System. The goal was to up-skill designers so that they use global design language in their workflows consistently. To accomplish this, I decided to use ChatGPT as a thinking partner.
Note: If you're only interested in iterating on prompts with ChatGPT, please skip to Step 3 for details.
Step 1: Collect interests and concerns
I began by collecting team members’ thoughts on their needs and pain points when using the design system. Although our Figma library for the design system has been adopted to some extent (with around 10,000 component inserts per week across the board), some members still have concerns. They are unsure about best design system practices and how to effectively use Figma as a design tool in general.
This is a common challenge that many small and medium design teams face when upgrading their frameworks and tools. On one hand, the Figma community has done fantastic work providing a plethora of tutorials, office hour Q&As, and community forums to showcase applicable examples for using design systems at scale. On the other hand, the responsibility of “keeping up” with Figma and design system features falls on product designers, which can be overwhelming — especially in organizations that do not prioritize uninterrupted learning time as part of the work week.
I believe it’s important to recognize that Figma practices differ significantly from Design System practices. Therefore, it’s important to establish common ground by covering the basics of designing in a Figma environment as a concrete starting point for learning.
Step 2: Extract learning themes
After categorizing the learning objectives into two buckets (Figma practices and design system practices), I discovered the following:
- Figma best practices should concentrate on reusable features that are common to every project, to help designers build muscle memory over time. For example, a clear page structure that organizes context, explorations, and deliverables effectively will ensure that the outputs are consistently reliable, regardless of the tooling capacity.
- Design system best practices should focus on reusable assets that are cascaded down from the design system library, with in-file documentation that delivers instant value when using components and patterns. This prepares designers to consume design system knowledge easily, without context switching, and to use the right panel for customization (including override instances, properties, and styles) intentionally.
In addition to extracting learning themes, I connected with my mentor Davy Fung in the design system community to evaluate relevant session topics that the team may find valuable. Curating learnings for others provided a refresher for me as I stepped back into a beginner’s mindset. I also researched a few Figma bootcamps and annotated their course syllabi for ideas (to my surprise, they were quite expensive!).
I compiled my ideas into a bullet list of sessions that can be separated into two days. Day 1 will cover Figma basics and include a take-home exercise, while Day 2 will focus on break-out reviews of the exercise and advanced learning.
After drafting the agenda, I asked for the team’s thoughts. They provided positive feedback and expressed interest in seeing tangible examples for each learning session. Although my bullet list quickly expanded to include additional details such as thoughts, levels of interest, volunteered speakers, and an approximate timeline, this feedback offered me confidence to flesh out more details and push the planning forward.
Step 3: Detail sessions with ChatGPT
Although I am not familiar with writing prompts, I agree with John Maeda’s perspective of feeding AI with contexts and constraints. To illustrate his point, he uses the metaphor of “Simon’s scissors” to demonstrate that effective problem-solving involves both cognition and context as two blades of a pair of scissors. In other words, the prompts we write to put ChatGPT to work provide real-world contexts to articulate the questions we have in mind, and outline critical constraints to help with reasoning. A good inquiry is iterative, instrumental, and non-linear, as opposed to the linear process of “Googling an answer,” where answers are narrowed using combined words (think of a pile of “+” symbols in the search box).
I began by requesting an agenda in table format with placeholder content to get a basic sense of the progression of the learning sessions.
It’s helpful to segment the pace of learning with a main lunch break (in our scenario, separating Day 2 from Day 1) and a consistent structure of keeping each session less than an hour (learning fatigue is real). For Day 1 and Day 2, I can leverage a set of two tables and replace session topics based on my curation. Additionally, I added a few more columns to capture “Speaker”, “Note”, and “Reference Links”, as ChatGPT generally doesn’t offer citations, references, or credit to original creators (but I believe it should).
To tailor talking points for each session, I began using ChatGPT to flesh out the briefs. My goal is to cover essential practices that every team member can memorize and put into action at the end of the session.
For example, in the session “Using Rulers, Grids, and Breakpoints,” I realized that the brief was too generic. It did not consider that individuals’ Figma practices would be shaped differently through a centralized design system and governance that limits the exposure of design choices.
Here is the first draft of the brief without any constraints:
Considering that product designers, who are the owners of Figma project files, will not have the option to set up and customize breakpoints as they desire (as this would result in an inconsistent experience for customers when switching contexts between integrated apps on one platform), the brief will deviate from my usual recommendations. As a result, I have revised my request to remove “Guides” from the list of requirements (as “custom guides” are not feasible in the current phase of our design system). Instead, I have specified that designers should “apply grid styles” to create responsive layouts that are adapted to established breakpoints.
These detailed touches made the session brief relevant, directional, and concise. I can collaborate with the speaker to iron out working examples for demonstration based on the brief.
Step 4: Plan out the rest of the agenda
Here is the final agenda resulting from iterating on session briefs, along with a blurb for the Day 1 take-home exercise. I had a lot of fun refreshing my past experience of drafting “design challenges” to recruit designers.
While the process is not fully automated, having a well-reasoned thinking partner adds so much value in compressing our ability to solve real-world problems and better our lives. In the resulting example of the agenda, I removed the last three columns of information to keep our learnings abstract enough to be applicable for those planning events for their own teams.
Take-aways
To conclude this second piece in the writing series on AI tools, I want to emphasize the importance of critical thinking when designing something new. Anything new that we create will eventually shape our future reality, and it is our responsibility as creators to audit, revise, and make sound recommendations.
While ChatGPT is exceptionally capable of remixing information to produce plausible answers, it is not a replacement for inquisitive reasoning. The automation of repetitive tasks is great, but it should not come at the expense of critical thinking.
In my next post in this writing series, I will share my experience using Midjourney to visualize design ideas. I am excited to share what I have learned about writing effective prompts and blending design creations with the benefits of AI. Please stay tuned.
