DEV Community

Cover image for Figma for Developers: 2 Simple Tips to Level Up Your Figma Game

Figma for Developers: 2 Simple Tips to Level Up Your Figma Game

Figma is a great tool to help you design landing pages quickly, but it isn't often used to it's fullest potential. This article will go over 3 simple tips that you can use to create better components for your landing pages.

Creating a dynamic button

ezgif.com-video-to-gif.gif

1/ Type in your text as you normally would.

ezgif.com-video-to-gif-2.gif

2/ Click Shift + A on the text layer, this will make it an auto-layout frame.

3/ Adjust the padding and alignment in the 'Alignment and padding' window on the right. Also add in your button's color by adding a Fill.

ezgif.com-video-to-gif-3.gif

That's it, you've created a button will retain alignment and padding even if you change the text inside.

Creating a reusable button

1/ Right click on the auto-layout frame you've just created and click 'Create component'

ezgif.com-video-to-gif-4.gif

2/ Copy paste the button anywhere in your design.

ezgif.com-video-to-gif-5.gif

3/ When you apply any changes to the original component, it affects all child components.

ezgif.com-video-to-gif-6.gif

These 2 simple tips will speed up your workflow a lot, not to mention you can use this same technique for any component, not just buttons. Give it a shot next time you're designing something on Figma!

Top comments (2)

Collapse
 
learnwithshakib profile image
Md shakib ahmed

Your sharing is very special to me. Thank you so much. I found it to be eye-opening.
today I'm happy to use UIHUT Figma Plugin. my work grows 10x fast than before. Becouse, I have UIHUT, The most powerful and largest design resources platform. Over 20,000 UI KITs across all categories such as Web Template, Illustrations, 3D Assets, Web App, Icon, Dashboards, and so much more.

Want to grow your work? try out:
figma.com/community/plugin/1162429...

Want to learn more?
uihut.com
Happy Designing ❀️πŸ₯°

Collapse
 
kr4idle profile image
Pete Steven

Another way to speed up your web development process is by using nocode tools like Desech Studio where you can import your figma design file and then apply some slight changes and your code is finished.

Then you can focus on more important things like responsiveness and integrate with your react, angular or vue code base.