Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 22, 2021 02:26 pm GMT

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!


Original Link: https://dev.to/codewell/figma-for-developers-2-simple-tips-to-level-up-your-figma-game-2ej2

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To