I was waiting for you to use the word "inheritance" to explain how CSS and Indesign styles behave. They layer on top of each other. Figma styles are totally standalone.
I know this is just a spinoff but I would appreciate more content on typography and design ! I also support referring to any Adobe CC app as “ancient software”
Check out typography variables, they’re not quite as seamless as this, but they do replicate the functionality you’re looking for. You can create variables for font-family, size, practically any font property and use those inside of your styles. So you would set up your styles with variables, and any changes you make would be to the variables rather than the style itself.
@@LateStageDesigner I never said they did, but if you base all your Body styles on the same variables, you can adjust the base variables, and all of your styles will update accordingly. Not inheritance, but removes the hassle of updating each style individually.
exactly! many devs absolutely don't get cascade and inheritance in CSS. tbf it can get complicated quickly in large projects. and I also think it's one of the reasons frameworks like tailwind got so popular .
Cascading was always a mistake of html styling. A short sighted effect of the times and mentality then. They figured it would save code and bandwidth, which it did, a bit, but ultimately wasn’t worth it. Bandwidth was in short supply then but people had a much higher tolerance for waiting for content to load so the added complexity just didn’t pay off. Granted, designs were simpler but it was massively short sighted to not see that the number of style properties, elements being rendered, and overall page complexity would grow, compounding the issues with deep/multiple inheritance. And this should have been obvious at the time as the issues around multiple inheritance in programming were already well understood and many languages emerging at the time addressed this by only supporting singular inheritance.
Many designers don't know anything about development. And design programs like Figma only widen the gap. Figma also wants developers to pay separately to be able to copy bad code :-)
This inheritance has always been in text editors. I used it in MS Word 2003 and I created styles with it in Open Office Writer and newer versions of MS Word.
I am «only» a dev, but it always bothered me that the designs I receive are usually very all over the place with the styles and fonts and typography and everything. I was thinking why isn’t it like MS Word or Pages where I can just create an overview of all the types of styles that exist. So I know all the headings and all the other stuff. I think your video kind of explained why this could be.
Something I personally miss from InDesign is when some text overflows its textbox, you can click on the little overflow icon and create a new textbox that's linked to the first one. That way you can create multiple textboxes in columns or different pages that have continuous content. If you edit any of them, it's like editing a window of a larger hidden textbox.
@@octothorpe12the fucking web is ancient and we don’t have such simple features. Adobe and Aldus and Apple where tiny companies in the 90s and figured this shit out.
Sadly the proposal for that, if I remember correctly, died. I would *love* something like that. A lot more complexity for a responsive layout to handle that over static layouts for print, but I bet they could do it... I'm looking to get involved in the spec next year, maybe that's something I could look at reviving (or getting behind, if I'm wrong that it's dead)
@@KevinPowell That's awesome that you're getting involved! Still, Figma could have that even if the web doesn't. I use Figma for some lighter print designs these days, and this feature would help a lot in that respect.
Hi @KevinPowell have you used variables to set up your base typography styles? You can have a font family defined differently per style, hierarchy etc. That could help mitigate this you point out
I was about to write the same thing @KevinPowell, that the missing link for cascading styles is somewhat solveable within Figma by using variables. But it is a very weak link. With that said, I do, as a designer, agree with you that Figma and similar design software that are made for collaboration with developers should inherently just be based on CSS - it would make everyday collaboration so much smoother.
Finally someone else gets it too. Back in the day, I was designing interfaces in indesign, not only using the styles inheritance, but also the page master inheritance. This is pre-sketch. Cheers!
As developer, I rip apart figma and basically recreate what I see there in whichever framework I'm working in. Figma is great for mockups and getting the idea shared between the product owners and designers but it is much less important for actually developing the product. It's the same a Photoshop for that.
I agree with mostly everything... BUT the example you gave for boldness has already been kind worked out. You don't need an extra style for boldness you can just press Ctrl+B to get a selected text to be bold and it will keep all the formatting of the rest of the text box, but in bold. If you change the font family the bold parts will follow.
Would so love to see the day where we can control text sizes across 'devices' and create fluid type scaling systems using clamp functions in Figma. Did I hear a rumor that they were looking to at least introduce REM values/units at some point soon? Or did I just dream that?
Great video! I use SKETCH for web design and prototyping and have used Figma sometime ago. Sketch has the same unhelpful state of just having one typestyle per block of text. You can manually select and change text within a styled block but as soon as you make a change to or update the text style the whole block reformats to it. Very frustrating. Having also used Indesign for many years the Character style was great, like having a child style within a parent style but only affecting particular properties… extremely useful. But for both web design software Figma and Sketch there could be more done to help us with design features that mirror css settings and even naming convention… that would help hand over to devs. I think it stems from their initial early releases, where they were fairly basic design software. And as they become more complex programs their focus became more adding in functionality and features, losing the focus of development a little.
It makes so much sense why your teaching works for me. I also come from a print background and still use InDesign a lot. It's great especially for books! Here I just assumed it was something in the first name. ;-)
The scenario is different than when using InDesign, I think. When a developer copies the css styles from a Figma object needed for a single element in the CSS file, for example, Figma doesn’t know if you need to copy ALL of the required styles for one element or whether you are copying just the styles that need to be applied to this element, assuming that it will inherit all of the other document styles through the cascade. I think this is what you’re talking about. Figma code has to be extracted to another file (CSS) in order to be used. In print the InDesign file IS the source.
I think about this at least once a day 😂, it’s been my biggest annoyance for probably 10+ years as a designer and frontend developer. And every time they add new features with styles and components they always seem to miss the mark with this one. Not only Figma as you say but them all. When you have a paragraph style applied and want to display a link… no can do because somehow links does not exist 😏
Yeah, it's infuriating, lol. Figma's variables + styles thing already confuses me, and I still haven't figured out why we needed the variables when we had styles... Or, maybe it's that extra layer we do need, but we need it for type!
@@KevinPowell Very much so! I'm building this huge design system to kind of bridge design -> frontend and was happy when variables was announced and to be honest, they provide a little more functionality than styles did, but in many ways they are the same and still lacking so much. It's just strange to be honest. Wonder which will be the next inaugural design software that we have to convert to in a year or two 😂
Microsoft Word does exactly the same thing with its styles. Like you, I used to be a graphic designer, but my tool of choice was the great Aldus PageMaker. I loved that program, even despite the crashes.
If Adobe had their shit together, Figma wouldn’t even exist and we would all be designing websites in InDesign and exporting modern HTML and CSS and life would be so much better. Such a shame.
It's probably due to the "app" centric mindset in web development that totally took over and made everything page or content centric low priority. It's not just the design software, it's also the web technologies, even though in this example CSS matches up nicely. The part of web technology that is closer to print publishing than desktop app development stagnated a lot, because everything was web apps for a while. The web design software followed suit.
I only like to use the SVG export in Figma, but I agree that the CSS isn’t good enough for production. Most companies don’t understand or maybe even care about great CSS and that is why many web based apps are slow, no one is focusing on learning optimized CSS and most likely are just using the garbage Figma spits out. I wouldn’t say it’s Figma’s fault, but frontend is treated as the lowest priority for most companies. So we will always see this being used as is until frontend is given the respect it deserves for delivering a better quality user experience. Has anyone else noticed a trend of having flashy but slow designs with web pages/apps?
I've never used any of these design tools, so it's surprising that the one I hear mentioned a lot has this deficiency. Even Microsoft Word has inheritance for styles...
Channel idea: since I love the topics you choose to talk about, and since my attention span (and time) is limited. How about creating a "Kevin Powell gzip" channel where the videos are reduced to around 2-3 minutes. Honestly, this whole video (like most of your videos) could've been a quarter of its length and still deliver the same content. This is not criticism, I love your content, but really a suggestion.
Illustrator inherits InDesign's paragraph and character styles… it's also a really great vector image editor. If Adobe makes some minor tweaks to dynamic layouts (ie, to mimic flex/grid), they'd have a MUCH better product to do 'real world' design. It may even encourage *better* designs than the 'just copy bootstrap' layouts we have today.
I have never liked design software, seems to take 10x longer than just doing it with CSS. To the point though, maybe Figma is not only created for UI web design even though it seems like it is.
This is one of the biggest issues with Figma in general to me. I use it every day, don’t get me wrong - but I don’t particularly like it. It muddies the waters a lot and makes complexity the norm. I lead design teams and I see how much it actually slows down the process of actually building software for the web. Sketch was the same before it. Photoshop before it. These are *solved* problems. The mental models should not be regressing.
I found your videos through the Odin Project. (I’m sure you hear that a lot) and you explain things so well! Can you follow me around in my daily life and explain to me what the heck is going on? 🤪
It's almost like the styles... cascade.
😱
*insert Black Guy Oooh meme 😲😎😮😱😯
cheeky 😱😱😱😱
or there's references to references that a user can reference and aren't hardcoded form values references that cannot be referenced.
I was waiting for you to use the word "inheritance" to explain how CSS and Indesign styles behave. They layer on top of each other. Figma styles are totally standalone.
I know this is just a spinoff but I would appreciate more content on typography and design !
I also support referring to any Adobe CC app as “ancient software”
Figma is also missing most of hyphenation and text wrapping properties CSS has.
Check out typography variables, they’re not quite as seamless as this, but they do replicate the functionality you’re looking for.
You can create variables for font-family, size, practically any font property and use those inside of your styles. So you would set up your styles with variables, and any changes you make would be to the variables rather than the style itself.
What are you talking about? Variables don't replicate class inheritance at all.
They replicate tokenization of values.
@@LateStageDesigner I never said they did, but if you base all your Body styles on the same variables, you can adjust the base variables, and all of your styles will update accordingly. Not inheritance, but removes the hassle of updating each style individually.
Figma does the same as many devs who hate CSS: they don't embrace the cascade. (And so do a lot of css-in-js libraries.)
exactly! many devs absolutely don't get cascade and inheritance in CSS. tbf it can get complicated quickly in large projects. and I also think it's one of the reasons frameworks like tailwind got so popular .
Cascading was always a mistake of html styling.
A short sighted effect of the times and mentality then. They figured it would save code and bandwidth, which it did, a bit, but ultimately wasn’t worth it. Bandwidth was in short supply then but people had a much higher tolerance for waiting for content to load so the added complexity just didn’t pay off.
Granted, designs were simpler but it was massively short sighted to not see that the number of style properties, elements being rendered, and overall page complexity would grow, compounding the issues with deep/multiple inheritance.
And this should have been obvious at the time as the issues around multiple inheritance in programming were already well understood and many languages emerging at the time addressed this by only supporting singular inheritance.
Even people using tailwind know it cascades styles.
No one is re-setting the body style to each text element of a component.
@ You have no idea. I’ve seen people styling every p tag for text styles instead of the parent element. It happens a lot!
It happens... If they don't know what they are doing. CSS is fine. The complaints are just a skill issue.
It's almost as if these applications are created by and for people who either don't understand the "cascade" or actively do not care about it.
Many designers don't know anything about development. And design programs like Figma only widen the gap. Figma also wants developers to pay separately to be able to copy bad code :-)
This inheritance has always been in text editors. I used it in MS Word 2003 and I created styles with it in Open Office Writer and newer versions of MS Word.
I am «only» a dev, but it always bothered me that the designs I receive are usually very all over the place with the styles and fonts and typography and everything. I was thinking why isn’t it like MS Word or Pages where I can just create an overview of all the types of styles that exist. So I know all the headings and all the other stuff. I think your video kind of explained why this could be.
Something I personally miss from InDesign is when some text overflows its textbox, you can click on the little overflow icon and create a new textbox that's linked to the first one. That way you can create multiple textboxes in columns or different pages that have continuous content. If you edit any of them, it's like editing a window of a larger hidden textbox.
That is in the pipeline for CSS, but there's a lot of complexity involved… so upvote it if you'd like to see it in browsers!
@octothorpe12 What is the proposal called?
@@octothorpe12the fucking web is ancient and we don’t have such simple features. Adobe and Aldus and Apple where tiny companies in the 90s and figured this shit out.
Sadly the proposal for that, if I remember correctly, died. I would *love* something like that. A lot more complexity for a responsive layout to handle that over static layouts for print, but I bet they could do it... I'm looking to get involved in the spec next year, maybe that's something I could look at reviving (or getting behind, if I'm wrong that it's dead)
@@KevinPowell That's awesome that you're getting involved!
Still, Figma could have that even if the web doesn't. I use Figma for some lighter print designs these days, and this feature would help a lot in that respect.
Hi @KevinPowell
have you used variables to set up your base typography styles?
You can have a font family defined differently per style, hierarchy etc.
That could help mitigate this you point out
I was about to write the same thing @KevinPowell, that the missing link for cascading styles is somewhat solveable within Figma by using variables. But it is a very weak link.
With that said, I do, as a designer, agree with you that Figma and similar design software that are made for collaboration with developers should inherently just be based on CSS - it would make everyday collaboration so much smoother.
Finally someone else gets it too. Back in the day, I was designing interfaces in indesign, not only using the styles inheritance, but also the page master inheritance. This is pre-sketch. Cheers!
As developer, I rip apart figma and basically recreate what I see there in whichever framework I'm working in. Figma is great for mockups and getting the idea shared between the product owners and designers but it is much less important for actually developing the product. It's the same a Photoshop for that.
typo in title "acient" :)
Early gang
acient
@@rahul9704 still early gang
Been 10 hours I don't think it's a typo anymore
Fixed 😊
I agree with mostly everything... BUT the example you gave for boldness has already been kind worked out. You don't need an extra style for boldness you can just press Ctrl+B to get a selected text to be bold and it will keep all the formatting of the rest of the text box, but in bold. If you change the font family the bold parts will follow.
Would so love to see the day where we can control text sizes across 'devices' and create fluid type scaling systems using clamp functions in Figma. Did I hear a rumor that they were looking to at least introduce REM values/units at some point soon? Or did I just dream that?
thank you kevin, i finally understand why i dont use figma as a designer and web developer its the typography strugles kept me away from figma.
Great video! I use SKETCH for web design and prototyping and have used Figma sometime ago. Sketch has the same unhelpful state of just having one typestyle per block of text. You can manually select and change text within a styled block but as soon as you make a change to or update the text style the whole block reformats to it. Very frustrating. Having also used Indesign for many years the Character style was great, like having a child style within a parent style but only affecting particular properties… extremely useful. But for both web design software Figma and Sketch there could be more done to help us with design features that mirror css settings and even naming convention… that would help hand over to devs. I think it stems from their initial early releases, where they were fairly basic design software. And as they become more complex programs their focus became more adding in functionality and features, losing the focus of development a little.
It makes so much sense why your teaching works for me. I also come from a print background and still use InDesign a lot. It's great especially for books!
Here I just assumed it was something in the first name. ;-)
You can scale the Figma UI from the home screen. There's a preferences menu with a UI Scale slider.
The scenario is different than when using InDesign, I think.
When a developer copies the css styles from a Figma object needed for a single element in the CSS file, for example, Figma doesn’t know if you need to copy ALL of the required styles for one element or whether you are copying just the styles that need to be applied to this element, assuming that it will inherit all of the other document styles through the cascade. I think this is what you’re talking about.
Figma code has to be extracted to another file (CSS) in order to be used. In print the InDesign file IS the source.
I think about this at least once a day 😂, it’s been my biggest annoyance for probably 10+ years as a designer and frontend developer. And every time they add new features with styles and components they always seem to miss the mark with this one. Not only Figma as you say but them all. When you have a paragraph style applied and want to display a link… no can do because somehow links does not exist 😏
Yeah, it's infuriating, lol.
Figma's variables + styles thing already confuses me, and I still haven't figured out why we needed the variables when we had styles... Or, maybe it's that extra layer we do need, but we need it for type!
@@KevinPowell Very much so! I'm building this huge design system to kind of bridge design -> frontend and was happy when variables was announced and to be honest, they provide a little more functionality than styles did, but in many ways they are the same and still lacking so much. It's just strange to be honest. Wonder which will be the next inaugural design software that we have to convert to in a year or two 😂
Did abandon use or did we abandon .
Either way consequences.
Microsoft Word does exactly the same thing with its styles. Like you, I used to be a graphic designer, but my tool of choice was the great Aldus PageMaker. I loved that program, even despite the crashes.
If Adobe had their shit together, Figma wouldn’t even exist and we would all be designing websites in InDesign and exporting modern HTML and CSS and life would be so much better. Such a shame.
It's probably due to the "app" centric mindset in web development that totally took over and made everything page or content centric low priority. It's not just the design software, it's also the web technologies, even though in this example CSS matches up nicely. The part of web technology that is closer to print publishing than desktop app development stagnated a lot, because everything was web apps for a while. The web design software followed suit.
I only like to use the SVG export in Figma, but I agree that the CSS isn’t good enough for production. Most companies don’t understand or maybe even care about great CSS and that is why many web based apps are slow, no one is focusing on learning optimized CSS and most likely are just using the garbage Figma spits out. I wouldn’t say it’s Figma’s fault, but frontend is treated as the lowest priority for most companies. So we will always see this being used as is until frontend is given the respect it deserves for delivering a better quality user experience.
Has anyone else noticed a trend of having flashy but slow designs with web pages/apps?
When I shower these days I'm singing Christmas songs
Great points Kevin. They should implement it.
100%. I abused GREP styles as well, and you could also manage adjacent elements to some extent. Good times.
THANK YOU! It’s so sad how modern software dropped so many advanced stuff that all was figured out in the 90s.
Another major annoyance with Figma is its inability to do collapsing margins.
You CAN do that but you need to have the style saved, and better yet if the style uses variables. Definetely could be better implemented, though.
Next do tables. InDesign nailed it (at least from what I remember)
How can we create smooth restructuring during flex-wrap?
I've never used any of these design tools, so it's surprising that the one I hear mentioned a lot has this deficiency. Even Microsoft Word has inheritance for styles...
Would also love to see container components in figma
4:11 maybe changing the system resolution can help :)
You're missing an "N" in ancient in the title. :-)
0:26 Oh wow, so he is the same as us, he also realize lots of things during the shower 😂😂
Channel idea: since I love the topics you choose to talk about, and since my attention span (and time) is limited. How about creating a "Kevin Powell gzip" channel where the videos are reduced to around 2-3 minutes. Honestly, this whole video (like most of your videos) could've been a quarter of its length and still deliver the same content. This is not criticism, I love your content, but really a suggestion.
That's what my shorts are, one a week on those as well 😊
Illustrator inherits InDesign's paragraph and character styles… it's also a really great vector image editor. If Adobe makes some minor tweaks to dynamic layouts (ie, to mimic flex/grid), they'd have a MUCH better product to do 'real world' design. It may even encourage *better* designs than the 'just copy bootstrap' layouts we have today.
Can’t you do that now with Figma variables?
I have never liked design software, seems to take 10x longer than just doing it with CSS.
To the point though, maybe Figma is not only created for UI web design even though it seems like it is.
Sounds like the way styles work in MS Word, which is another app with a 30yr history.
This is one of the biggest issues with Figma in general to me. I use it every day, don’t get me wrong - but I don’t particularly like it. It muddies the waters a lot and makes complexity the norm. I lead design teams and I see how much it actually slows down the process of actually building software for the web. Sketch was the same before it. Photoshop before it. These are *solved* problems. The mental models should not be regressing.
This problem was solved in the update of October 31.
I found your videos through the Odin Project. (I’m sure you hear that a lot) and you explain things so well! Can you follow me around in my daily life and explain to me what the heck is going on? 🤪
I really do not know how Figma has made it this far - it's the clunkiest thing in the world. This is a perfect example of that.
Please check the title,
spellcheck? Ancient software... ;)
Eureka! 🙂
Yea, even Microsoft Word does this better and did so 30 years ago, good morning everyone...
Figma is getting worse and worse
Also please for the love of god: superscript and subscript
Figma already has this under the Typography 'Details' tab - In the 'Numbers' section it's Labelled 'Position'
@@repuniad Thank you! That's hidden pretty well though.
Figma is an absolutely horrendous user experience if you're stuck on a laptop with just a trackpad, and it's not much better with a proper mouse.