Story: Figma in 2 weeks
I wrote this blog a year ago.
Some reasons I would like to switch Adode XD to Figma are below.
– Figma is a trend, I saw many projects in which client shares the Figma file for website development
– Adobe XD requires updating OS which I don’t want to do it
– I could not invite the collaborator on XD for some reason, he could not open the file
I start practicing in Figma for the next project. So far, I have no problem. Figma is very flexible for text design, clip, outline, vertical, gradient, all available. Some functions, I have to get used to them. I would like to pick up specific features of Figma.
Next time, I would like to share the file with the developer without hesitation.
*Update: March 17, 2023
One of the reasons I read this blog again is that I need to install the mega menu on low fidelity wireframe. I knew that Figma has a function(interactive dropdown menu), but I did not know how to do it. I cannot say that I clearly understand components, instant, and valiant, etc.
I checked the video and documents below. Figma is really smart. However, just learning is not so fun. So, I do create a situation in which I have to learn and apply the learning quickly. It is a little stressful, but this is a tip for quick learning.
Figma YouTube channel
©Figma
I will pick up the subject on the Figma YouTube channel.
Welcome to Figma Community
©Figma
All materials are here. This is a typical great SaaS product. Figma provides a platform, becomes a community and people develop content, then share. We can duplicate what we need, but if you understand the structure of the components/instances, using a template will be stressful. We have to know how to use them.
Figma Tutorial: Creating Styles
©Figma
If you are a Webflow user, creating a style sheet is essential. You may have a template already. Creating a style(or it calls a symbol in some other software) is standard in 2022.
Figma Tutorial: Components – The Basics
©Figma
– Component (influence all the instances)
– Instance (overridable)
Create component = Option + Command + K
Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects. You can create components from any layers or objects you’ve designed. These could be a whole range of things like buttons, icons, layouts, and more.
©Figma Project: Build a Navigation Menu with Components
Figma tutorial: Interactive components
©Figma
How to create a mega menu
– Click the single nav menu
– Link to elements(mega menu, dropdown menu, etc)
– On click, open overlay, manual
– Close outside click
A year ago, I thought this is mainly for a mobile APP, but we, a web designer, need this function for website development if we create a high-fidelity mockup. This interaction(function) can be applied on the dropdown menu, the mega menu, or the form page/section.
I don’t spend much time on a prototype. I do care about details when I develop a website. If you are a Figma user, this is one of the topics you should know.
Figma tutorial: Variants
©Figma
To be honest, this is challenging for me. I don’t have many product design projects. This is a different usage of Figma.
Figma tutorial: Auto layout button
©Figma
Auto layout (add frame) → Shift + a
Component → command + option + k
We may need to change a button text frequently on each page. We don’t want to adjust the button size manually. The auto layout(with component) is useful for any Figma user.
©Figma: Figma tutorial: Auto layout navigation menu
This is related to the auto layout. If you are a web designer, you have to know how to create a nav menu by Figma. This is essential.
Figma tutorial: Constraints
©Figma
This function is unfamiliar to me and I am not sure how precisely I need to organize the file before pass to the development team during the APP project.
I basically use Figma for a prototype for a website. I don’t much use constraints, but knowing what Figma can do is beneficial after all.
Figma Tutorial: Smart Animate and Drag Triggers
©Figma
I don’t know how much precise interaction a client requires. Looks helpful for both designer and developer. No miscommunication.
Figma in 5: Tricks on Fire 🔥
©Figma
– Zoom in/out = Command + scroll(magic mouse)
– child element = pointer + return
– parent element = pointer + shift + return
– Search = command + /
– Change color tone = shift + up/down
– Change opercity(on color wheel panel) = option + scroll(magic mouse)
– Rename = command + R
There are many shortcuts. I don’t know many of them, but the Figma interface shows the shortcut key. Let’s try a new one when we find it.
©Figma
– Replace icon(nested instance) = option + command + drag/hover
– Avoid nest of elements = space + drag
– Auto width button = double click on boundary box line
– Usage union = text space center in the boundary box
– All canvas = Shift + 1
– Placing mulch images
– Resize with scale mode(k)
©Figma
This is a little advanced for me.
©Figma
Deep.
©Learn UX: Figma Tips & Tricks – UI Designer’s Superpower
– Copy style = command + option + c
– Figma search = command + /
– Import mulch images = command + shift + k
– Renaming = command + r
Please check the video on YouTube. Nice Tips & Tricks.
Conclusion: Sketch > XD > Figma
Generally speaking, functions are similar. A while ago, I heard a developer likes Figma for efficiency purposes. Figma generates the code. I don’t know the situation in 2022. Maybe it’s possible on XD or Sketch. I generally touched all the tools. I don’t have an opinion about which tool is better or not. In my usage, for developing a responsive website, all tools are okay. When I share the file with a developer, XD has an issue, requiring updated OS. Once, the file is saved to the latest version, I cannot open the file. A downgrade is not available. This is a big issue of Adobe XD even though I may buy Macbook Pro or iMac within 2 years.
Anyway, I enjoy Figma so far. I am going to share the prototype by Figma with a client at the next project. Let’s provide a good user experience during a project!
