My design learning documentation in 2022 Recap (before updated)
On Twitter, I usually share my design learning from visual design, Figma tips, user research, user experience, accessibility, business design, or even design system.
Since 2021, I kept sharing and uploading what I learned in UI/UX Design field. As a newcomer, beginner designer, it’s important for me to taking notes and share my learning in social media platform.
Not for the engagement or seeking validation, but because I can reconnect, review, re-learn, and refresh my own knowledge.
Also, I followed Luis Ouriach’s documentation steps on his Twitter since I could easily to understand my mind that twirl with so many thoughts
I love seeing myself growing from time to time.
Before we jump to the section, I’d like to recommend you, how to find my learning on tweets by this way:
I also want to remind you that these are my learning in 2022, I haven’t updated anything ever since Figma new features in this year released.
So, here they are.
#1 : How I Design Component and Set their Properties
First you create an interface design, in this case I made a callout or modal before I set their properties and turned them into components.
I usually made the .base component as their parent, then duplicate or dragging it from the component
Use
.basecomponent by typing (.) or (_) in your layer it will help you to hide them in publishing and updating the libraries.
As you can see the icon change from component (❖) into instance (◇).
After you made one instance from base component, now you can create at least 4 variants (◆) or more. Duplicate the instances into 4 and before I make another components for Callout, I named all of them.
Fill the value by naming those first, it’s gonna make you easier to design.
state=information, title=off, theme=light
By stating the naming above, it will automatically set up to the properties, although you must organize it again to make sure everything is right.
Don’t forget to create component set. You will see all values of the component properties has set up! Your variants also have names, such as success, title=off, light. You can check the component properties as well.
#2 : Parent and Child Components
I already mentioned about Parent, but maybe some of you still don’t recognize or have no idea about what I’m talking about.
Well, before I updated this later, this is a term in programming. People commonly stated that as “nested components”, but it’s hard to understand for me so that I used a term that is well-known for my expertise.
Also, you already saw that I made a callout component from .base component.
The purpose is simple, if I want to make changes towards one or two components without making changes to the original component, I must make them separated, so it won’t affect my original one.
In this case, after we made
.basecomponent as a parent. I must make a child that inherent their parents’ values, we called them as instances.
When you duplicate from base component (❖), it will turn to be an instance (◇), right? When you made changes from the instance, it won’t affect the parent. It goes the same when you already made 4 different instances with the different names, then you create component set.
You’ll see, it will generate a new component with the different value, but still has a .base component or its parent. However, if you made any changes through the parent or base component, it will automatically affect the child.
You can set their nested too — Which I didn’t show in here and will do in the next article soon.
And yes when you create a new component from .base component, you made a new parent. That’s why naming its layer it’s crucial!
#3 : How to naming your Design Components
I found it tricky when I tried to naming my layers and all of the components, with a little guidance I read on Figma help’s website, Figma’s forum and one of my mentor who taught me in mentoring session; I could understand how important it is to my design file.
For instance, I named my button component in Figma with the properties Primary, sm, Default, Icon=False, Light
You can see that is still primitive naming conventions, I learned that so hard because I want to know “Why I must naming into like this? And what for?” Apparently, my naming conventions still lack of proper way.
When I worked on Design System, I tried to understand it by dividing them into many categories before I set the properties. This was very challenging because my enemy that was time and needed a fast way to learn.
I categorized the value of my properties as such:
- Type → Primary, Secondary, Tertiary, etc.
- State → Default, Hover, Outline, Disabled, etc.
- Theme → Light and Dark
- Size → sm (small), m (medium), lg (large), xl (extra large), etc.
- Label → Text or Placeholder, Title, Subtitle, etc.
- Device → Mobile, Web, etc.
When I explored other design systems, I learned their naming conventions. Some of them use small letter for naming, and some of them using slash (/) for instance, they named as button-primary/active/sm/icon-right/light.
It triggered my curiosity. What makes it difference? Why?
So I asked my mentor to answer all of my questions from my head, and he said “there is no specialty or rules for naming conventions. It all depends on your team and how you work with the design system with your developers.”
💡Well, I took the initiatives to learn more deeper and connect the dots since I was a front-end developer, it will help me narrow this. I figured that out! You can name your components or layers like what I showed earlier or not.
In programming, we’re already familiarized with Case Styles for Coding, you can read them thorough here to get understand more deeply.
#4 : How to Design on Figma
Documentation is underrated topic to discuss in a design community or around your design team/colleagues.
I learned this from other people. Adopted their design files into mine since I am new in design system, I don’t want to be know-it-all about this hehe.
This is the first time I named my pages in my design file, it seems boring and casual and sometimes my clients, colleagues from other division, or we should called them as non-designers are getting confused to find or read it.
It was a side bar on the left, but not many people know how to use.
So it’d be better if I made them by using a symbol or an emoji.
#5 : Dashboard design on Figma
I got a chance to be a dribbble shooter at one of Indonesia design agencies. I learned a lot from there and what I found it useful for me, it was about my visual design or user interface skill.
I made a dashboard for Hotel site.
It taught me to design neatly, minimalist, and modern. You can check how I made this on my YouTube video, it was speed design because this was an exploration of mine. Train my visual as always.
#6 : Interactive Prototyping
This is how I learned interactive prototype when Figma 2021 released a new feature called as “Interactive Components Beta Version”.
It was a recap and this is just a teaser that prolly I will use with the new updates in 2023
#7 : Don’t use pure black on designing Dark Mode for your design.
This is the important lesson that I found the most challenging one, designing dark mode.
Maybe you’re already saw many information about “don’t use pure black for your design” and one of the reasons is that the pure black with HEX code #000000 will eliminate all of the screen’s light emissions — It requires too much energy for your eyes to absorb the light.
So, what should you do then?
Use a dark gray, like #131313 or else because it can help user’s eyes:
- Reinforces the striking visuals
- Reduces eye strain
- It has a better contrast
- Better battery life
Besides don’t use pure white as well #FFFFFF, you can change into #FEFEFE or lower the opacity into 80% or 65%. It’s not only helping user to reduce the eye strain, but also you can see the differences for your text style from Bold to Regular in your typefaces.
💡Make sure you check the accessibility with plugin Contrast or A11y in Figma to have a better readability in a dark theme.
#8 : Card component for Rapi UI Design System (fully auto layout).
Once you have already understood in making components and auto-layout, it will be easier to design the components with those features.
You see there is .base component entitled .Card base for card component in one of my design system.
The properties have at least three or four values for each instances
- Variants → I change the theme or size interchangeably within the value of properties that I already set.
- Instance swap → I used this to swap the icons and other elements inside my design file. Once you published the library, you can swap the element.
- Boolean → Switch right or left to hide or show my elements.
- Text → Fill the text or placeholder with any values.
You can detach the components from the instances (◇), not the components set (❖). This is my tutorial for creating card component in Figma, but the quality of video is 720p — I should make it a better one.
If we used variables in this time, it could help your design system more efficient and less time-consuming.
After reading this:
1 — Subscribe to this newsletter if you find out useful.
2 — Share this to your social media or friends. This newsletter update every 4–6 times a month.
3 — Support or Like this article! It will help me to grow if my article is useful and interesting enough for you to read more about this kind of one again.
Continue Reading
Older post: How Burnout leads to the Creative Block
