Skip to main content
Question

Seeking advice on creating components

  • April 20, 2026
  • 5 replies
  • 65 views
Samsj
screenshot from Figma standalone app

Hi all, I’ve been attempting to learn Figma on my own for a year or more. I’m still stumped when it comes to how to tell my developer about padding and margin and special characters. I’d like the dev to use the … ellipsis special character but the best I could do in Figma is to tighten the letterspacing of three period characters, and leave a comment on the board. I’ve read here on the forums that designers are unable to communicate margin without an invisible spacer box?

I have laid out this tiny card view which could show up as a card on its own, or have a active state with the yellow highlight ring, or have a photo under it. For now, I’ve turned the card alone into a component. I stretched the text box of the number id 593052… to touch the blue border  and added 4px paragraph indent. (because when i originally built it, i moved the blue selection box of the text 4 pixels over from the edge.) I don’t have a way to indicate padding for the right edge. 

I think I have to start over or something; I’m unsure how to build these so the dev can find all the padding and margin that he needs. How would you build this card as a component please? 

5 replies

AlicePackard
  • AlicePackard
  • Power Member
  • April 21, 2026

Hi Samsj! From the lack of values in the right hand panel’s box-model, and the small icons in the layers panel of your highlighted component, it seems you are not using auto layout. That's my biggest recommendation for you to better communicate things like padding to your devs!

I am away from my laptop (writing this reply on my phone), but using bullets (which i cannot indent right now), i would expect your layer construction to look closer to this:

  • ❖ Card (white fill with border/shadow)
  • --- ID box (frame with full color)
  • ------ ID (text layer “ID”)
  • --- Label (text layer set to fill horizontally)

Also Figma has a truncation feature! https://help.figma.com/hc/en-us/articles/360039956634-Explore-text-properties#h_01H3D1XRJVMBD0D1NVSCENVXRX No need for you to manually manage the ellipses 

I write about building excellent Figma components on my blog: https://alicepackarddesign.com/blog
    Samsj
    • Samsj
    • Author
    • New Member
    • April 21, 2026

    ​@AlicePackard I really appreciate you took the time to examine my screenshot and give advice. I didn’t know about the truncation in text properties. And it seems I’ll re-structure my small cards to be auto-layout first, then component second. I think this is a time to do nested components.

    Samsj
    • Samsj
    • Author
    • New Member
    • April 24, 2026

    I’m trying! But I never know when to bring the edge of the text bounding box to where I want the padding to start. In this screenshot I figured out the truncation and have made text styles for both “ID” and for the num-string with truncation turned on. 

     

    In the above screenshot, I’m showing the bounding box for the text. I made it all an ‘auto-suggest’ autolayout, but there are still no values to show for the beginning of the white box and the start of the text, and there is no value shown for the padding between the truncation and end of text box. 

    I’m finding Figma more confusing than coding. I could have coded this thing in a couple minutes. 

    AlicePackard
    • AlicePackard
    • Power Member
    • April 25, 2026

    I’m back! And I’m at my laptop this time. I’ve mocked up my version of this same component, this time using auto layout. Maybe you can try reverse-engineering what I have? This is a live embed from my public-view-access Figma file: 

     

    That first element on top is the main component. Below are instances with annotations. It doesn’t look like that shows up in the embed, so here’s a screenshot of what I see as an editor of the file (on the Pro plan):

    And here’s what I see when I inspect in Dev mode:

    I hope this is helpful! You’re welcome to download a copy of this file for yourself, or copy/paste my main component into your file.

    I write about building excellent Figma components on my blog: https://alicepackarddesign.com/blog
      Samsj
      • Samsj
      • Author
      • New Member
      • April 27, 2026

      ​@AlicePackard you’re an angel. Thanks for this! Is this little component still live in your Figma? I am looking at your Forum Workshop File and can’t find my little card. 
      By now I’ve taken 8hrs of training on Figma Basics in Udemy, watched scores of random YouTube videos on how to work in Figma. People seem to approach building things in different ways. 

      Some start with the background box first, then put text in it, as in they change that background box to a text box. This method always confuses me. 

      I tend to drop a background box onto the frame, then drop another text box above it. Is this method I’m using the cause of my frustration with not getting access to padding? Maybe that is all it takes; to rebuild my work using a different order of operations.

      Terms & ConditionsAccessibility statement