#30 days 20 prototypes
What am I trying to do here?
● I want to learn design. Not just design thinking, I want to be proficient in the design tools as well so that I can play around with mocks, create wireframes/prototypes and use them to communicate my ideas.
● Idea: Create 20 design prototypes in the next 30 days. The prototypes can be of anything, I guess I’ll create (design) clones of famous web apps in Figma, like Slack, Amazon, Hotstar, and YouTube.
● The hope is that I’ll learn the Figma, get good at creating websites/apps design. As a side effect, I will absorb some of the design principles.
● I am NOT committing to the # 30 days 20 prototypes challenge. It seems like it will be valuable, though if it turns out it is not, I am okay quitting midway.
Prototype 1
● Did a Figma crash course from YouTube
● Build landing page and prototype of a design consultancy. Took almost ~3 hours for me to complete it, it was worth it!
● Check out the prototype here 😄🤘🏻
● And the mocks here
Things I liked:
○ Figma plugins are very useful. Using the Unsplash plugin I was able to very quickly add images to the portfolio page, then using the lorem ipsum plugin, I didn’t have to write all the filler text. Should explore the Figma plugin system more, especially how it is implemented tech-wise. Might have some lessons for Neera Plugin architecture.
○ Figma community is pretty strong, with lots of free high-quality resources.
○ Loved the concept of “Components”. While building wireframes or mocks, there are lots of repeated elements! The same button or card will be used in 10 different places. Now after you have created the card, and you want to change it, you’ll have to change it again at all the 10 places you have used the card. Never again, with Figma components. When you use components, the changes in the original component is reflected in all its copies 🤩
○ Loved how easily you can create prototypes!
○ Overall Figma is a very well-executed software.
Things I didn’t like:
○ Figma menus are confusing, have to spend a lot of time figuring out which button is where. Loved the Whimsical’ contextual toolbar in comparison. Ideally, I should be able to search the menu item without having to do 3 clicks for each action. Keyboard shortcuts are nice, though they take time to get into muscle memory.
New resources I learned about:
○ UI Goodies -> Got the background pattern from here
○ Lukas Adams Free illustrations -> Got the storefront illustration from here
Figma Cheatsheet
● Duplicate: Cmd-C + Cmd-D
● Bring to front: Cmd-]
● Bring forward: Cmd-Opt-]
● Choose background: Fill ⇒ Change "Solid" to "Image"
● Auto Layout: Select the elements you want to frame, and press "Shift - A"
● Autolayout: Select the elements and press "Shift - A"
● Group elements: Select the elements and press "Cmd - G"
● Components: Select the thing, right-click, press "Create Component". Then you can duplicate the component, can use it wherever you want. If you change the parent components, the change is reflected in the child component as well
● Detach instance from component: Cmd + Option + B;
Figma Hacks
Use builder.io plugin to import an HTML page as figma. Can save you ton of time in redesigning the components. Things aren’t grouped layered properly, but it is better than starting from scratch.