Button Component in Figma | Tamil Tutorial

In Figma, creating a button component involves using the Auto Layout feature and setting up the necessary elements that make up a button, such as text and shapes. Here's a step-by-step guide to create a basic button component in Figma: Creating a Button Component: Open Figma: If you don't have Figma installed, you can use the web version by visiting Figma's website and signing in. Create a New Frame: Click on the "+" icon in the Figma interface to create a new frame. Draw a Rectangle: Select the Rectangle tool from the toolbar and draw a rectangle on the canvas. This will be the background of your button. Set Background Color: Fill the rectangle with the desired background color for your button. You can do this in the right sidebar under "Fill." Add Text: Use the Text tool to add the label or text that will be displayed on the button. Style Text: Customize the text by adjusting the font, size, and color. You can find these options in the right sidebar under "Text." Group Elements: Select both the rectangle and the text, then right-click and choose "Group" or press Cmd + G (Mac) or Ctrl + G (Windows) to group them together. Apply Auto Layout: With the group selected, click on the "Auto Layout" button in the toolbar. This will allow the button to adjust its size based on the content inside. Adjust Padding: Adjust the padding within the Auto Layout frame to control the spacing between the text and the button edges. Create Variants (Optional): If you plan to have different button states or styles (e.g., hover, pressed), you can duplicate the button and modify its appearance accordingly. Turn into a Component: Right-click on the button group, and choose "Create Component" from the context menu. Name Your Component: Give your component a meaningful name in the right sidebar. Using the Button Component: Drag and drop instances of your button component onto other frames or pages. Customize text, colors, or styles of individual instances without affecting the master component. If you make changes to the master component, those changes will propagate to all instances. Hope this video is useful. Do like and subscribe to the channel. #figma #figmaintamil #components