Figma Dev Mode is here!
HTML-код
- Опубликовано: 13 июн 2024
- Figma just launched Dev Mode and it’s really cool. There are a lot of really awesome features that make life so much easier, from having the units in rem to a bunch of new features and a VS Code plugin, plus a bunch more. Of course, there are a few negatives as well, and I take a look at it all in this video.
🔗 Links
✅ Figma Dev Mode Introduction: www.figma.com/blog/introducin...
✅ Figma’s demo file exploring Dev Mode: www.figma.com/community/file/...
⌚ Timestamps
00:00 - Introduction
00:43 - How to turn on Dev Mode
01:50 - Changing your language and base units
03:12 - Box model and the CSS that it outputs
04:57 - Getting assets
05:40 - Sections and ready for development
06:45 - Variables and Styles
10:00 - Tracking changes
12:25 - Connecting components to GitHub files
15:18 - VS Code Extension
22:34 - The negatives of Dev Mode
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Figma team has reached out to me (!) to let me know they're going to be rolling out some fixes for the issues I ran into when recording, such as the border-radius units, as well as the auto-complete not working, which was because I was in an SCSS file. It should work soon, and should already work with css-in-js and other solutions as well :)
what about rounded image corners?
Kevin, brother everything is good, but please try to speak little slow..its too fast...Thanks
At the beginning of the video, most people speak loudly and scream directly into the microphone. However, I appreciate your calm and soothing tone, which makes it easier for me to listen to you. Thanks, Kevin!
If I ever become a RUclipsr, I will make sure to not have an obnoxious “RUclips voice” 😂
Was waiting for your evaluation of Figma Dev mode. Thank you for this. You, sir, are awesome. Aiding me in "making my corner of the web a little bit more awesome".
I literally *_just_* started having to work with Figma an hour ago, and I was glad it had a Dev Mode - I didn't realize it was brand new. Thanks for the video!
same here mate!
Im learning CSS and you have helped me a ton , thank you sir ❤️❤️❤️🔥🔥👍👍
I've resisted prototyping in Figma for a long time, but this is what I needed to change my mind. Thank you Kevin!
This has been incredibly helpful for my figma design and first time trying to make everything into a e-commerce cms
Thank you for this. Figma seems to be the Next Big Thing.
One thing to note: Adobe is NOT buying Figma, so all is right in the world.
just used it this weekend it was greatttt
Nice work bro ❤
Thank you Kevin! It was interesting!
I still rather code manually by my own myself. It's a pleasure for me and like to control each detail.
100% agree! I'm not a huge fan of the code it produces anyway and probably wouldn't use much, if any of what it does, but a lot of the other things here really do help a lot even if you're doing all the coding yourself :)
Me too. But I anticipate many newer devs (maybe those who aren't that great with CSS) will copy/paste the generated CSS and make it much more difficult for the rest of us.
I solidly appreciate the video and the work it took to put this together. FWIW, I'm on the 'dev' side of things at my day job. Our UX team brought in Figma about a year ago, so we're still adjusting to how to best utilize the base offering. As long as someone in UX doesn't mis-save the file in a way that interferes with my access to the Inspect panel, that does all the things I really want done. I do share a strong reservation about playing with a beta product (generally against our internal M.O.) that will definitely pay wall. That said, I don't really see anything in this offering that makes me excited enough to campaign for changing what/how we handle the dev side of our working process. /two-cents
Sad to know this will be behind a paywall. Most of the time, the design team pick a solution they like and the rest of the chain is using it because of that starting choice they made. As a developer we can suffer from those choices. Figma could have made a bold decision here and make this available for everyone so the dev world and the creative people could better work together… but no, this is not the way thing seem to lean on. So sad. Thank you kevin to point out this as nobody seems to care about (still very fresh tough…)
I mean, I do understand that creating a product like this costs a lot of money to start with, so I understand wanting to charge for it. Adobe owns them too, so also not much of a surprise, lol.
They have such a generous free tier though, it's a shame some of these new features can't be baked into that. Especially for students and people trying to get into the industry, it would probably reinforce it's use even more as it just becomes part of a regular workflow.
@@KevinPowell Note, that Adobe doesn't own them *YET*, since the regulators haven't agreed yet. There is a slight chance, that adobe may not be able to get its grubby little fingers into figma.
The amount of time you will end up saving though outweighs the potential cost factor especially as a freelancer.
The issue I have is the fee is basically double that of the "team" license seat, so now each seat is now 3X the cost. Is this dev integration worth tripling my cost? If you're an indie, sure, perhaps. But if you're in a large organisation, suddenly your costs *skyrocket*. I'm going to have to start to look for a different tool.
Excited to see if Penpot comes out with something like this eventually
"If you're on my channel, you're probably a dev" 👀 just here because you're a good teacher and I like your content.
Hey! Have you tried clicking on image.png in section where there is padding, margin, etc.? There is actually an option to download image without border-radius and it has even more benefits. If designer will place image as a background of some container for example, before you could only download whole container with all stuff in it (texts, buttons...) WIth dev mode you can now select whole container and press that little link saying "image.png" or other name of file and it will redirect you to original image. For me that's awesome because it has ended pain with making double containers: one with content and one with background only
awesome it`s work.... thank brow....
At least someone doesn't hate CSS and makes it all sound reasonable. Thanks for all the helpful tips and advice.
thank you Kevin!
Hey Kevin, have you ever given Locofy a try? It's a Figma plugin that generate React+Tailwind CSS code from your Figma designs. It does requires some design tweaks before the plugin can work its magic. I'm really curious to know your opinion on the quality of code and CSS it produces. Have you had any experience with it?
im somewhat new to figma as programming is my main focus but I do enjoy using figma. what exactly is the purpose that dev mode serves? is it meant to act almost as a model or template where the front end code of your choosing ie swiftUI, CSS conforms to the UI elements you created and designed where it can be plugged into you IDE? if im interpreting this right it seems like a worthwhile service and im definitely intrigued by it especially as someone who mostly does backend coding but is still building an app on my own where im having to learn UI design and front end stuff specifically swiftUI in my case.
Have you used pen pot? What’s your thoughts? :D thanks for the vids
It looks like they have updated the copy around the end of Beta / paid plan now and from what I can understand: The beta is only available to paid plans, and when it comes out of Beta it will still be available to all paid plans. In addition if you company is on either the Organization ($45 a seat) or Enterprise plan ($75 a seat) then you can choose a dev only plan at $25 or $35.
But it will be available on the $12 a seat Professional plan too.
Don't forget to submit feedback!! The more we flood them with stuff we want, the more likely it is they'll do it!
Wow, look at all those icons in your VS Code sidebar. I have the default 5 ending with Extensions but you have an additional 8 - what are those for? Other than the figma one. Sounds like a video idea!
please do you now know the names of the extension that gives those icons?
I’m not seeing a way to view pages inside of VS Code. It seems to just open to the first page of the Figma document. I have been designing using pages for different workflows. a\Am I missing a button somewhere or is there another way to set up Figma designs in a similar way that the VS Code plugin understands? It seems a cit much to have to convert every page to a separate file.
Hello, is there a way to get all assets in their Original Form (Source Image File) with one click?
1. CSS copying - it's worse because they divided CSS into several sections (typography, layout, styles)....
2. It still does not remember the selected file format for export and whether the export field should be expanded or not.
3. lacks the ability to hide a section in the sidebar.
people binge watch instagram reels, I binge watch kevin powell's videos
i don't know why the sizes in figma is not accurate. sometimes when i code i always having a problem about the sizes when i copy the size and convert in to my code
border-radius in rem doesn't actually make senses to me -- wouldn't that change the rounding based on the screen dimensions?
This is all pretty interesting, but to be honest, I don't really see that much use for this. Copying the code from this and then having to check and clean up/tweak it seems like more of a nuisance than just creating it myself. And exporting images/icons is just as easy in classic Figma. One thing that's great is the changes comparison, that's pretty nice.
Is it possible to extract code including animations in Figma dev mode?
Hey what do you think about no code Tools like webflow and framer.
I've used webflow and thought it was pretty good :)
Love seeing this from someone I look up to!
Thanks for the overview! One thing that bugs me though is when people complain about something like $20/mo for a product that you say is so helpful...? If it saves you say 20-30 min per MONTH, that is of course worth it, no?
Not really no.
It depends on the business. If we're talking small freelancers or one-person shops, then saving 30 minutes actually means billing 30 less minutes of time. So now they get paid less AND have to buy extra software. If they are smart, they'll compensate this by charging the customer MORE even though it takes less time, because now the toolstack costs more. They will have to start justifying higher costs to these clients which gets harder and harder as the dollar amount climbs.
But then again, you can't make this argument about everything. On my computer I probably have 5 dozen apps I've had to use at various times for various takes. You can't just tell me "well if it saved you some time, it's worth $25 a month!". No, that would be $1500/month for some apps I use 3 times a year. I can't just buy everything. Not every cost can be passed on to clients.
I can see how Figma can be a foundational app in the workflow of a full time designer, so I'm not really talking about them. But for me, I do a lot of freelance work and project work, but it doesn't always involve Figma. There are months I don't touch it. I'm only on Figma because I had the same darn problem when Adobe started charging what they did. I moved to Affinity tools, I moved to Figma, I moved to open source tools. Because infrequent use can't justify a constant financial drain.
There is a reason for this entire underbelly of dev/tech/designers who complain about pricing, and it's simply because they don't have the volume of work or charge the prices needed to be paying for every app under the sun. Running a business is hard enough as it is without shrinking the margins tighter and tighter every time a software company does a bait and switch on their offerings.
The only two missing things is relative values and font size variables.
damn, only heard about this this morning u don't waste time 😂
Border radius is in pixels bc it has to be a fix number, otherwise you will end up with a different corners everywhere. Omg I’m such a nerd 😎
You should make some videos using Figma
I have some older ones, but I don't use it to design stuff often enough anymore.
"But in the end, it doesn't even matter"
A designer sent me figma graphics today. I was not able to get usable HTML and CSS code from that using several plugins. So I've chosen to write that myself only using figma as grafic layout. So I wanted to download the assets. I've selected the layer on the left, 37 assets showed on the right, but there's no f***g way to download them all at once!!! So, in this point I am not a big fan.
I agree, it's annoying to see how many firms want to take their monthly share without giving an "absolutly necessary" service. We just need to learn how to code well, not a "cotton carrier" of the king.... (if you know the reference)
Border radius should never be in rem, why should the border radius increase when the font size increase?
I'd rather `rem` over pixels :) - Maybe one day they'll add a contextual sizing unit as well, which would be even better :)
I also prefer px for some things, like border radius and border line width. Also, I'm not sure if it's recommended, but if something should always be small (like visually about 10px or less) then I'll go with px. I guess it's fine if you know the rules, but also know when appropriate to break them. :)
I thought that Figma Dev Mode is more like Wix Codux
Anyone have tried Penpot yet? Seems dev friendly?
I use Penpot, I'd be curious to know if Kevin gave it a try as it's really focusing on creating a bridge between designers and devs. It's got a powerful flex layout feature and they're releasing grid layout in the coming weeks too! It's a very good alternative to Figma, and it's free and open-source.
They have fully customizeble flex layout and announced grids.
@@profesor08 yep, and they'll be communicating about their new grid feature this week during the Penpot fest. It's happening in Barcelona but you can attend it online for free if you're interested.
Kevin, the plural of border radius is "border radii"
Not really impressed, I'm afraid 😕 just Figma turning into a Low/No-Code tool. I can see this features becoming popular, as are many frameworks these days. I'm "old school" as in better code, and not faster code. Having said that, this is still one of my favorite channels and it's always good to know the tools that are available 🙏
Figma is a very useful tool, that should be used to lay out your interface design before development, and that's about it.
I can't really find any use for Figma dev, it isn't malleable enough and it would be a pain to use if it was. The sizes generated using arbitrary pixel amount and magic colors here and there is a big no-no, unless you don't mind your application to come as stiff as a png.. I would never use the generated code anywhere, over that code you'll also have to add behaviours for responsiveness, theme, hovers, etc... doesn't strike me as a mainteinable workflow
What's up great Kevin! I'm Fabricio Fernandes from Brazil.🇧🇷🌞🌊🏝 What is your screen recording software? If is it paid, tell me even so but tell me a good alternative free please.
OBS Studio is the standard
I use OBS, as stonebubbleprivat recommended. Free and very powerful, with *lots* of tutorials and videos out there on how to use it.
@@stonebubbleprivat Thank you so much.👍
@@KevinPowell @stonebubbleprivat Thank you so much.👍
The only problem with figma is its going to be paid in the next year to use dev mode starting at 25$
Actually starting at $12, as it comes with that tier. I thought it was $25 too, but that's for orgs paying for seats. Still frustrating, but at least not as expensive for those who use it.
Figma balls
I think figma is going in a wrong way. New Dev mode looks weird, it brokes many things, a lot of properties are missing, a lot of problems are comming. But realy cool and useful thins are in unknown state for years. Penpot, started from sratch, has the most complete control of layout, like it is done in browsers, also grid come soon.
hold on, I watch your vids, maybe i missed some, but, what is figma ? 2023 dreamweaver ?
It's a 'web design' app. Back in the old days everyone would use Photoshop, but these days designers use apps like Figma.
Honestly I think it sucks.
They have removed already established features from normal view to devmode while devmode still is in beta but they still removed production features.
So they have basically stripped the featureset of their production version for a beta. Its just called a beta but not really a beta.
Imo they should fix existing issues first before going after the new shiny stuff. They still show dimensions as Hug x Hug for example.
Knowing that devmode will probably be behind a paywall is a huge bummer and basically degraded figma to a design tool (for designers only) with optional dev features (which you have to pay extra for). That was not the point of the original product.
When I started out I used a pixel ruler to measure distances between elements on a jpeg image from PSD.
I dont need a tool that tells me to use display: flex for elements that are displayed in a row. Im not a duck.
Still not sold on Figma, but then again nobody's paying me, yet...
Sorry but I thought this video was really hard to follow/not well explained. In general your content is normally really well done.
Sorry about that :(
This feature is very frustrating. It further solidifies the idea that design and engineering should work entirely separately and that Figma should be the source of truth for any design iteration which further encourages a "throw it over the wall" mentality between the two disciplines. I'd prefer to see Figma used as a tool to create a great place to kick off discussions and engineering work and then that iteration on the design happen within the code whilst pairing with a designer and unfortunately this feature encourages the opposite.
have to thank Adobe for the extra cost
thank you for reminding us that Adobe is Adobe :/
Adobe bought them, so dead product in a few years.
Macromedia, Flash, etc...
Bro, Dev mode is no more free and very high cost 🥴
This is bad. You'll see many developers (too many don't understand CSS) just copying and pasting that generated nonsense and they'll be SO confused why it doesn't work... I hope they fix this nonsense quickly.
I mean, they *always* had code in Figma, but it was always position absolutes everywhere. This is *a lot* better. I think part of learning to be a web developer is learning the useful stuff from tools like this, and the parts you can ignore (which tend to be layout related).
@@KevinPowell True, it's just that new devs wouldn't have the filter that you and I have. Figma makes it too easy for designers to deliver bad CSS. It should be relatively easy to solve, I think. If not with machine learning, then at least with some kind of function that simplifies CSS and strips away unnecessary (or weird looking) properties.
I'm sure they'll get there eventually :)
eww paid figma. time for penpot?
The FrontEnd programmer has died. This is one of the videos that assure it. Frontend Developers are no longer needed
But that's not a bad thing. Frontend is pretty monotonous and doesn't require a lot of skill
That makes no sense
No, it is just another tool they could use. Also, FE dev is more than just designing layouts.
@@stonebubbleprivat I agree! Frontend is closer to design and UX/UI than to programming, and that's good
just stop coding dude and stop looking for jobs altogether, you are going to be replaced anyways. Toilets are going to be cleaned by machines as well. lmao
not sure what figma is. dont really care. annoyed that you assume i use it
Not sure who you are, annoyed that you think I care what your feelings are.
Are you a designer/developer?
This channel is aimed towards web developers. Even if you don't use it at your company, you should at least be aware of Figma as a tool...
An explanation would be pretty annoying because every Web developer knows it. It's like explaining Photoshop before every photo edit video
It's the industry standard for UI design these days, and generally something any front-end dev would have at least passing experience with, and this video is really targetted to that audience, devs who already know and use Figma, as this is a big update with a lot of great features for it. If you'd prefer an intro to it, I've got some videos on that side of things too :)