Jump to content

Designer: Making a Button 'template' a symbol - am I doing this wrong?


Recommended Posts

Hi

So I've watched a few YouTube videos and have a pretty good idea how symbols work, but they're working in a different way than I need.

Is what I'm trying to achieve possible? If so, how am I using Symbols incorrectly?

What I'm trying to do:

I have created a 'standard' button, to be used throughout the web app I'm designing, but also a smaller one for a mobile web app version. 

In both cases it's a rounded rect, with a text on top, which has a pre-defined Text Style.

My issue is that I want to be able to change the look of all the buttons in one go i.e. size, shape, colour etc, HOWEVER, each button's text is unique. I do NOT want the text to be common across all of these button symbols. Yes, the font colour, style and positioning (central to it's button 'shape') but NOT the text characters themselves.

Is this even possible or am I using symbols incorrectly? 

Thanks

Link to comment
Share on other sites

I would use Text frames with one Paragraph Style for the Large and another for the Small.

MacBook Pro (13-inch, Mid 2012) Mac OS 10.12.6 || Mac Pro (Late 2013) Mac OS 11.7

Affinity Designer 1.10.5 | Affinity Photo 1.10.5 | Affinity Publisher 1.10.5 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

Just now, GreenGirl said:

Please could you expand or explain your solution better? I'm relatively new to Designer. Thanks

The sound you hear is me slapping myself.

I didn't finish the advice. The Text should be on a layer that is not part of the symbol. So sorry to have been too quick and therefore wasting your time.

You can also Detach the symbols so then the changes made to that instance will not update all the symbols. You may find it easier to have the Text in the Symbol.

MacBook Pro (13-inch, Mid 2012) Mac OS 10.12.6 || Mac Pro (Late 2013) Mac OS 11.7

Affinity Designer 1.10.5 | Affinity Photo 1.10.5 | Affinity Publisher 1.10.5 | Beta versions as they appear.

I have never mastered color management, period, so I cannot help with that.

Link to comment
Share on other sites

The text would need to be outside of the symbol "group" You could however group the symbol and the text like so...

image.png.1e7a6b05e988dbc928387c1aebc1b8ea.png

So, the symbol is just a rounded rectangle, you can edit the height width colour and stroke, the text sits above the symbol and for this example has the heading 1 text style applied, you can do this for all buttons so changing the heading1 text style changes all the text associated with that text style. The text and the symbol are then grouped together to form a button with it's unique text.

iMac 27" Late 2019 Fully Loaded, iMac 27" Late 2013 both running Catalina 10.15.7 - Affinity Designer, Photo & Publisher, Adobe, Inkscape, Blender, C4D, Sketchup, Pepakura Designer + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

4 minutes ago, Old Bruce said:

The sound you hear is me slapping myself.

I didn't finish the advice. The Text should be on a layer that is not part of the symbol. So sorry to have been too quick and therefore wasting your time.

You can also Detach the symbols so then the changes made to that instance will not update all the symbols. You may find it easier to have the Text in the Symbol.

LOL, no apologies necessary, but appreciated -  I thought I was being overly dim in not comprehending your answer. 

 

3 minutes ago, firstdefence said:

The text would need to be outside of the symbol "group" You could however group the symbol and the text like so...

image.png.1e7a6b05e988dbc928387c1aebc1b8ea.png

So, the symbol is just a rounded rectangle, you can edit the height width colour and stroke, the text sits above the symbol and for this example has the heading 1 text style applied, you can do this for all buttons so changing the heading1 text style changes all the text associated with that text style. The text and the symbol are then grouped together to form a button with it's unique text.

Thank you for this, so if I'm right, I won't be able to drag my button symbol from the symbol palette, I'll have to copy this 'Master' group and paste it everywhere I need a button in my layouts, but as the rect is part of a symbol, they will all change as I update the master symbol. 

This means though that I won't be able to globally change the button text style or colour right? 

I'm thinking what I'm trying to do isn't quite built into Designer... Or how I'm approaching it is not right...

Link to comment
Share on other sites

17 minutes ago, GreenGirl said:

This means though that I won't be able to globally change the button text style or colour right? 

As long as the text style is the same for the unique text you can change the font face, colour, size etc so say you have for each button you create. In the example below you have different words but the text style for each word is heading 1, editing the text style heading 1 will change each of the unique words so in the screenshot I changed the font face to Impact and all the words changed. 

Try out and you will see.

image.thumb.png.9537aa20e6a4e50347a7f6579708b0a1.png 

iMac 27" Late 2019 Fully Loaded, iMac 27" Late 2013 both running Catalina 10.15.7 - Affinity Designer, Photo & Publisher, Adobe, Inkscape, Blender, C4D, Sketchup, Pepakura Designer + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

On 4/22/2021 at 4:47 PM, GreenGirl said:

What I'm trying to do:

I have created a 'standard' button, to be used throughout the web app I'm designing, but also a smaller one for a mobile web app version. 

In both cases it's a rounded rect, with a text on top, which has a pre-defined Text Style.

Well, for web sites and partly apps that's usually what Frontend-CSS-Framework like Bootstrap are meant for, which do handle the layout and sizing etc. related to plain vs mobile web device screens. Bootstrap of course also offers a bunch of customizable components like buttons ... and so on.

Further as you already know, instead of using Affinity you always also can program what you need individually via Swift etc. here, either dynamically as SVG output or bitmap.

☛ Affinity Designer 1.10.5 ◆ Affinity Photo 1.10.5 ◆ OSX El Capitan

Link to comment
Share on other sites

  • 7 months later...

I have the same issue, would be cool to have symbols similar to Sketch.

Where properties like text, colors, etc are dynamic and be possible to assign from the top level for one instance without losing mutability.

Sadly current symbols are not very useful for UI design.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...

Important Information

Please note there is currently a delay in replying to some post. See pinned thread in the Questions forum. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.