Request details

Button tool - style text box with border, background color, padding (auto resized when text changes)

To speed workflow it would be good to have button tool in the sidebar. In the property inspector you'd have the ability to specify the top,bottom, left and right padding. the width of button would dynamically resize as you type the button's label.

345 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)

    We’ll send you updates on this idea

    pamjam shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    33 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Scott Ruth commented  ·   ·  Flag as inappropriate

        Yes please. I wish XD had something like the "Relabel Button" plugin for Sketch:

        https://github.com/kenmoore/sketch-relabel-button

        When designing SOFTWARE, you need to design buttons, LOTS OF BUTTONS! If Adobe XD is a tool for designing digital content then we need more power in this area. I've probably spent hundreds of hours of my life just resizing buttons to fit their labels. It's tedious, and Sketch has an elegant solution that should be native in XD.

      • Anonymous commented  ·   ·  Flag as inappropriate

        Putting text inside an object is standard Adobe software practice. Not having this capability in Sketch drives me nuts.

        I can do this in Photoshop and Illustrator to make a button. Why not in XD?

      • Anna commented  ·   ·  Flag as inappropriate

        Would be great to have buttons work like they do with html. I was shocked when I started using this and realized you have to manually create buttons like you would in Photoshop or Illustrator. If you want us to replace those apps with this for prototyping, we shouldn't need to manually create such a common ui element.

      • Matza commented  ·   ·  Flag as inappropriate

        That's missing in Sketch, too … No plunging is working fine and fast. I have to press a key-shortcut after changing text! But the frame has to resize in the same time I'm changing the text …

      • Matza commented  ·   ·  Flag as inappropriate

        Yes, for buttons this would be cool. But for any other Textboxes (white colored text on red ground) thats nice. No more exakt position of a text box (without background) on a colored rectangle, just adding 2 2 2 2 (padding or example) to the text box.

      • Matza commented  ·   ·  Flag as inappropriate

        YES please!!! And you'd have the ability to say if the text box (or text) changes its width/hight to the left/top or right/bottom or both (centered)

      • sebastien louap commented  ·   ·  Flag as inappropriate

        Hi Elaine,
        I have the same request.
        If you look at tools like Axure, (the UX is not super good) but they have small details that is killing some current tools.
        for example they considered the test as a text+rectangle.

        By doing so when you create a button you don't need to add a rectangle + a test. You can have only 1 item that can have different color text + color shape.

        It has the strong added value that you can configure the padding (horizontal and vertical) and the size of the shape can be automatically adapted to the text size.

        As more than 50% of a prototype is just text + rectangle, it limits a lot the number of items in the page and improve the effiency to use/modify them. (for button/tab/text areas it is a killer feature)

        I'll also post my comment on the link you've added.

      • sebastien louap commented  ·   ·  Flag as inappropriate

        Hi Elaine,
        I have the same request.
        If you look at tools like Axure, (the UX is not super good) but they have small details that is killing some current tools.
        for example they considered the test as a text+rectangle.

        By doing so when you create a button you don't need to add a rectangle + a test. You can have only 1 item that can have different color text + color shape.

        It has the strong added value that you can configure the padding (horizontal and vertical) and the size of the shape can be automatically adapted to the text size.

        As more than 50% of a prototype is just text + rectangle, it limits a lot the number of items in the page and improve the effiency to use/modify them. (for button/tab/text areas it is a killer feature)

        I'll also post my comment on the link you've added.

      • David Knell commented  ·   ·  Flag as inappropriate

        If a text element has padding, background color, and border radius attributes, then there's your button! Excellent! You guys are really good at making interactions intuitive. Please continue that level of quality for this feature. It could easily be an awkward interaction because there are two places you can edit a text object: in the main window by dragging-and-dropping and in the inspector pane. Pressing Ctrl, Cmd, or Option and then dragging the borders of a text element may be an intuitive way to create/change the object's padding. Anyway, I trust you guys. :)

      • Keyan Mynhardt commented  ·   ·  Flag as inappropriate

        Agreed. The ability to type directly into an object makes it a lot easier to group and move objects around and reduce clutter : )

      • Anonymous commented  ·   ·  Flag as inappropriate

        Would be nice to be able to create a text box with padding and a background colour. Quite often we draw out a rectangle then add a text box over the top of it, but then you have to line them up. It would be faster if we could just use one object. You can do this in InDesign and it saves a lot of time and makes the design more consistent.

      • Robert Călin commented  ·   ·  Flag as inappropriate

        Example:
        - you have a button
        - it has a background or border or shadow
        - it has a text or icon inside
        - when changing the text or icon, the container should adapt to the content, it should maintain the padding

      • Mitsuki commented  ·   ·  Flag as inappropriate

        or I'd like to add background color, padding, border color on text object....

      • Vadim commented  ·   ·  Flag as inappropriate

        Yes! I agree, this is very important feature which can save a ton of time.

      • Karl Mochel commented  ·   ·  Flag as inappropriate

        Handle text as an attribute of a shape, not as a separate graphic element.

        - In a UX text is most often bound to a visual affordance - button, tab, container etc. It is just an attribute of a shape.
        - CSS lets the user style DIVS so they can be all of these things.
        - It is annoying to have to manage graphic attributes of text - vertical and horizontal alignment, padding, margins, size, wrapping - of text by for buttons, tabs, containers, etc separately from the shape that defines them.
        - Text and the affordances they label or fill should be defined by their relationship.

      • PB commented  ·   ·  Flag as inappropriate

        Please add options to apply color properties to text frames, not just to text inside them.

      • PB commented  ·   ·  Flag as inappropriate

        Please add options to apply color properties to text frames, not just to text inside them.

      ← Previous 1

      Feedback and Knowledge Base