GreenGirl Posted April 22, 2021 Share Posted April 22, 2021 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 Quote Link to comment Share on other sites More sharing options...
Old Bruce Posted April 22, 2021 Share Posted April 22, 2021 I would use Text frames with one Paragraph Style for the Large and another for the Small. Quote Mac Pro (Late 2013) Mac OS 12.7.4 Affinity Designer 2.4.1 | Affinity Photo 2.4.1 | Affinity Publisher 2.4.1 | 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 More sharing options...
GreenGirl Posted April 22, 2021 Author Share Posted April 22, 2021 I've changed the text from artistic to text Frame, but the text is still replicated across all instances of the button. Please could you expand or explain your solution better? I'm relatively new to Designer. Thanks Quote Link to comment Share on other sites More sharing options...
Old Bruce Posted April 22, 2021 Share Posted April 22, 2021 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. Quote Mac Pro (Late 2013) Mac OS 12.7.4 Affinity Designer 2.4.1 | Affinity Photo 2.4.1 | Affinity Publisher 2.4.1 | 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 More sharing options...
firstdefence Posted April 22, 2021 Share Posted April 22, 2021 The text would need to be outside of the symbol "group" You could however group the symbol and the text like so... 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. Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
GreenGirl Posted April 22, 2021 Author Share Posted April 22, 2021 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... 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... Quote Link to comment Share on other sites More sharing options...
firstdefence Posted April 22, 2021 Share Posted April 22, 2021 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. Quote iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9 (Please refrain from licking the screen while using this forum) Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions Link to comment Share on other sites More sharing options...
GreenGirl Posted April 25, 2021 Author Share Posted April 25, 2021 Thank you to everyone that helped with this - I couldn't do exactly what I wanted, but I"m working with what I can get working. firstdefence 1 Quote Link to comment Share on other sites More sharing options...
v_kyr Posted April 25, 2021 Share Posted April 25, 2021 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. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
meefox Posted November 28, 2021 Share Posted November 28, 2021 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.