Responsive resize in figma
This will be the start of our "Get Started" button. Just like before, let's add some text to the "field_container" frame. Let's add in some Sign Up buttons, and a link to Log In. If not, make sure the correct frames are set to "Fill Container".Īdding those finishing touches Step 8: Adding buttons If it all worked out, you should be left with something that looks like the following screenshot! When you change the width of "field_combo", everything should remain in the same position. We now have an icon that looks like its in the field, and it will stay in position on resize. We then follow the same process as the field headings by moving the icon to the right, and setting its constraints to "Right" and "Top". Then, select your icon and your "field" frame, right click and select "Frame Selection". Add your icon of choice (here we chose a 24x24px icon with a fill of #C2C2C2) to the "field_combo" frame. Instead, let's follow a different process. we could, but it wouldn't work for a responsive design). At the moment, we can't just add an icon into the "field" auto layout frame as we couldn't get it aligned to the right (well. To add the icon to the field, it's a bit more complicated. This gives us a little red error box below the field. I then converted it to an auto layout frame, added a fill to that of #FFE7E7, and adjusted the padding to 4px,8px,4px,8px. Now, let's add an error message and a place for an icon within the field.įor the error message, I added another text item within the "field_combo" frame, with a fill of #FF8282. Now when we resize the "field_combo" frame, this heading will stay to the right!
We then can move the new heading to the right hand side, and give it a "Right" and "Top" set of constraints. Let's set this frame to "Fill container" on the right hand Resizing menu. Now these two text layers are in their own frame. Let's call this frame "heading_frame". To do this, lets duplicate the first "field_heading" text we just made, select both headings, right click and select "Frame Selection". This heading needs to remain on the right side regardless of how wide the field is. This heading can be used for things like "Forgot Password" links, or character counters. Next, we will be adding a secondary heading that will sit to the right of the main heading. Rearrange this text layer so it is above your "field_frame" frame. For this example we again use the font Inter at the same size, but now with a fill of #1A1A1A. Inside the "field_combo" frame, simply add your heading text in using the text tool (I'll name this layer "field_heading). The first element we will add will be the field heading. Congrats, you now have an auto layout frame inside another auto layout frame! Let's call this frame "field_combo", and give it's "spacing between items" setting 12px. Then, right click on your new group and select "Auto Layout". Instead, right click and click "Group Selection". This will hold all these new elements we are about to add.īecause it is already an auto layout frame, we can't just right click and select auto layout. Before we start adding these though, we need to add another auto layout frame to our "field" frame. Next up we will be adding the other elements that will make up the form field. Your first field using auto layout Step Two: Let's add some extra elements