You might be using Figma the wrong way | Part 1
Hello, my dear reader! I’m going to share some outsmart plugins and the easiest way with you today that professional UX designers use regularly! The most amazing thing is that they have at least doubled the performance at which I can work.
Are you ecstatic? Me too! So, let’s get going!
Set a Colorful Background
A colorful background is essential as it helps accentuate your glass design and make it stand out. You could just use the uiGradients plugin to select a gradient of your choice like I did below.
Draw a shape
Here, we’ll imitate the shape of a physical credit card, which looks like a rectangle.
Draw a rectangular shape with the dimensions 640×400, and set the corner radii to 40pt.
Apply fill using gradient
Next, you need to fill the shape with translucent colors like white. Both colors of the gradient should be white but they should be set to different opacity levels.
Apply fill using gradient
Set the blur value to 40, or any value of your choice depending on how blurred you want it to look.
Add Strokes to Create Borders
Adding borders makes your card look more polished and elegant. It helps to have a sharper contrast through thicker and more distinguishable borders.
Apply a Drop Shadow
Using a drop shadow effect helps strengthen the visual hierarchy.
Set the blur value to 24 and the spread to -1.
Add Your Content
Using a drop shadow effect helps strengthen the visual hierarchy.
Set the blur value to 24 and the spread to -1.
A11y — Color Contrast
Your design must undoubtedly comply with the WCAG level. You can quickly assess and FIX contrast in your design with the help of A11y and ensure that everything is accessible!
Font Preview
We all are familiar with numerous typefaces and can visualize its typeface. However, because we only have a small selection of fonts in our brain libraries, we often have to make educated guesses when we require something distinctive or different from SF Pro Text or Montserrat. Browse through the font preview live to save time. Add fonts to your favorites so you won’t miss any upcoming new features.
Round››all
This plugin exceeds my expectations in every way! With only one click, all of your parameters are full numbers. The perfectionist in me is ecstatic! Therefore, feel free to scale elements whichever you choose.
Similayer
You have to choose several layers that are comparable. Put an end to physical labor and make better use of your time! Simply configure the required attributes in the Similayer plugin and presto! You have just accelerated your task by x4 and have chosen all the necessary components.
Scale
It’s true what it says: “Scale any frame, its contents, and its effects to any given width or height.” In some situations, if Figma’s native tool Scale (press K) is inadequate, you’ll need to use your magic wand. four occasions.
Find in page
Finding an icon is simple when there are just 30 of them. But what if you have more than 1000 icons? Or do you need to locate and convert five instances of the phrase “metro” to the word “subway” in 500 rows? Of course, you shouldn’t spend the entire day altering and searching through a million symbols on your own. You only need to choose the type and write a key word for a layer or text. Although you can’t pick all of the discovered layers at once, this plugin will undoubtedly save you time.
Split Shape
Thank you “Split Shape” for making it so simple and quick to divide forms into proportional halves. However, a little distinction—decimal numbers—appears. The Round-all plugin, which was previously discussed, can be used to fix it to the complete number if you need a pixel-perfect result.
Design Lint
Your worst nightmare is that you missed some styles or made a mistake when you have more than 50 screens and almost a few thousand pieces in your design. I’m happy to inform you! With the aid of this fantastic plugin, you can spot styling errors and get a good night’s rest. Simply choose a frame and correct any errors.
Propstar
Yes, your wish can now come true! You may generate every possible variant for your components depending on characteristics thanks to this wonderful plugin. Additionally, you will have your versions in a very organised and lovely spreadsheet.
Conclusion
The next time, I’ll write one more part of simple and practical plugins ready to speed up your work by 4 times!
Gratitude for reading! I hope you found it beneficial. And don’t forget to clap if it was to let me know! Kindly remember to save the tale if you don’t want to lose these amazing plugins!
