If there was some sort of asset export that obeyed some spec on how to size and file name that’d save hours and hours of work.
Outside of that, I’m probably not ever going to use generated code enough for it to be a game changer. Most of the time you’re having to fit some design into an existing design system, and so I don’t really see the use case for code export at scale.
2024: separate license for Dev Mode
I guess Figma trying to get more paying customers
Edit: feel a bit Adobe vibe
But if you're using some icon library that a designer has imported into figma like remix-icon, just import from the library directly in code. Importing and rexporting the svg would likely change it slightly.
Here is an overview of all the features + screenshots: https://twitter.com/Chris_Smeder/status/1671565267145748480?...
1. Component playground
2. Redlining
3. Links to github in components
4. React mode
5. https://animaapp.com plugin will build the component for you...
6. Tasks from Jira and Linear in Figma
7. Figma in VS code
8. Autocomplete fill in code when you select a layer
FYI: To learn more about Dev mode, check out the live (free) workshop from Figma at 2pm PST https://config.figma.com/agenda?d=day-2
And here is the keynote where the announcement preview was shown https://youtube.com/watch?v=-44qrQDnLMM
We've also introduced an API extension point so third parties can now provide their own implementation of code snippers (code generation) in Figma's Dev Mode which Anima and a few other partners have already released plugins for :)
What started this mentality?
We use that and just paste it into the codebase.
I've also used a bulk export plugin that autonames things. Would have to lookup the plugin name if you're interested.
Often, the way the designer has grouped them together is not ideal for code, but I don't want to ungroup and group them all over again just so I can grab an SVG.
Also I hope dev mode prevents designers from locking/hiding elements and layers, which makes it very difficult to export the elements you actually need.
- "Text content does not match server-rendered HTML."
- "Hydration failed because the initial UI does not match what was rendered on the server."
- "There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering."
None of these should impact the videos, though, because the fallback (client-side rendering) should work too. So if that's causing the issue, it's because there's a larger problem enabling it.
I find that there are few tasks in software development more uninteresting than converting Figma designs into React components. The day I no longer have to do that will be a great day indeed :)
My favorite was the PowerPoint presentation. Didn’t happen to me but I’ve heard about it.
1: Somewhat redundant. Any tiger you try to get teeth out is likely to be cranky before you finish the retrieval.
I'd rather have a napkin sketch that we can work on together vs throwing pictures over the wall.
As impressive as it is, I feel like Figma makes this situation worse. It's like "see we've figured it all out devs, look how nice this looks. No discussion needed"
I welcome many of the new features. It's great for designers who are more technically oriented, though enterable input fields would be nice.
I do wonder how non-technical designers are going to feel. The learning curve is definitely going higher.
I'm worried about the rather pricey per / seat cost. There are far more developers than engineers at most organizations, and this is really going to hurt the licensing cost. Definitely Adobe bean counters flexing its muscle.
Yes, similar to the photoshop days. I forgot all about those. Has been almost 10yr since I had that happen!
PPT doesn't bother me because it's very "what we need" not "how we need it" so I don't have to worry about the specifics and instead can focus on (and ask questions about) the intent of the feature.
/s (at my previous company they did not ... lol!)
My favorite is when design adds data to a mock-up that we don't actually have. My company is, admittedly, a bit of a joke.
Also up there: design giving us mock-ups that are a composite of shit that needs done today and future shit they still haven't decided on. And then demand review approvals. No. You can't have it both ways you fucking morons. Either give me exactly what needs to be done, or you get no review rights. I'm not going to sit here for three weeks of back-and-forth while you play hunt-the-pixel and giving me hell for not matching the fog in your own head.
how would this impact them? just use figma as usual i would assume
looking forward to giving this a spin, our design team tends to go the iterative artboard style with everything...so sussing out values can be a pain
That's my favorite - if you mention responsive or how things should wrap or cascade you get the blank stares or "we aren't solving for mobile right now"
Don’t get me wrong, I have a ton of respect for good designers, but the best designers are those with a slight technical lean who are willing to design around e.g. built in customization on UIKit widgets instead of full wheel reinvention everywhere.
Yes, absolutely, and it's among the worst ways to develop software. Designers kept coming up with controls that required coding custom behavior not already provided by the toolkit, either by modifying and extending components or creating new ones from scratch. Designers blamed developers for causing "rework" when it was found that the design included things that didn't exist, and developers took the blame when it took longer to implement the mocks than designers had led project leadership to believe. The lead designer's solution was to more-or-less abandon the team's pretense of being agile and get everything completely frozen well in advance of any coding.
Also, the backend was horrific, as might be expected when leadership treated it as an afterthought. I got the impression that because the system was built to replace an existing front end, leadership believed that it was just matter of wiring the UI up to the services that already existed. Some very legacy services, think mainframe-era fronted by a thin SOAP-to-json layer. Yeah and some of the backend services that turned out to be required didn't even exist.
I'm glad I'm done with that consulting gig. It was not fun, it wasn't challenging, it was just a grind, and if it is complete and they are able to turn off the existing front end on schedule I'll be shocked, and I'd want to know what kind of dumpster fire they end up with.
Companies like Bifrost (YC W22) are working on this problem and already automatically generate React components from Figma autolayout designs.
I remember making very complex prototypes with choices represented as branching sequences of nearly identical frames, and thinking "if I could set a variable and just show or hide some layer based on that variable, my life would be so much easier", so I'm happy y'all added this. It must have been a ton of work to implement this by you and your team, so good on you for doing it.
That doesn't sound like a bad deal to me. They're not taking away anything from free mode.
Since designers share files, whether at the same time, or at later date, if you have someone on the team who is fully taking advantage of all the features, like the new variables, conditional logics, etc.., and you're not quite up to speed, you may not be able to do your job effectively or may mess up what others have done.
Understanding abstractions / reference / inheritance is a skill that developers take for granted. But for non-technical folks, it takes time. Many struggle for a very long time.
UK antitrust regulator is looking at the merger as well. (the same people that blocked activision microsoft deal in UK)
https://assets.publishing.service.gov.uk/media/64523aa4faf4a...
Fast-forward nine months, and Penpot has a boatload of new features as well as its own conference coming up in a few days. I tried it again recently, and it had come much further than I expected: not only have they implemented auto-layout (Figma's original killer feature, in my view), but with the added benefit of wrapping auto-layouts. They even announced a new roadmap item of grid auto-layout.
I loaded up a tutorial file and my enthusiasm was dampened a bit seeing how a complex document impacted performance – Penpot still has a long ways to go to match Figma there – but as a viable Figma competitor, I think Penpot might actually have a chance now. It's telling that even as Figma races ahead with this new release, there is one feature (auto-layout wrap) that Penpot got to first.
The funny thing would be if Penpot's rise, spurred by the threat of Adobe dominance, actually results in regulators giving Adobe the green light to complete its acquisition of Figma. Still, if this market becomes a healthy competition like Blender / Maya, everyone will win.
Send the ENG a SYN packet, and if they ACK They are an engineer... if they /dev/null your packet, its a DEV.
At least they didn't use document links with absolute paths. Macs don't have have a C:\Documents and Settings\Clueless\ folder. Encountered that a few times in my career.
If you're looking for something more custom, you can take advantage of our new Variables Plugin API beta (https://www.figma.com/plugin-docs/working-with-variables) and export them with what you need!
There's usually multiple developers/engineers for every designer on a team, so bringing them in to the product with features that require full privileges would certainly be a lucrative move for Figma.
Considering my question I'm obviously not a Figma user so maybe I've misunderstood it.
Last year we all kind of switched to Figjam from Miro and it's been a good transition — and the Net Dollar Retention of Figma is insanely high at 200%+. So they probably want to keep that going... but this just seems like too hard a squeeze.
For a tool designed for visual collaboration it feels like a sizeable oversight that for me at least hinders workflow pushing me into other tools rather than keeping conversation contained alongside the files being discussed. Any plans in this area?
You should see it in the From Community list or you can find it here:
Finally, I can easily select elements that were non-selectable-without-holding-cmd in the "design" mode. The thing that shows paddings and margins is a godsend, AND it stays put when you move your mouse somewhere else and switch to another window. The size tooltip also now shows the actual helpful size in pixels in addition to the unhelpful "hug/fill".
The choice of Jetpack Compose as the only Android code format is strange. Most people, even those who do embrace The Google Way™ of Android development and Kotlin itself, don't take it too seriously and don't consider it production-ready. It would be nice to have support for the good old XML layouts.
But I do agree that Figma needs an auto-organizing feature of some kind for people who receive the work. Perhaps with machine learning to track designs by the timestamp when they were edited, instead of their location on the page. Which could be as simple as a linear or hierarchical view which only scrolls along one axis, with tags similar to git/Sourcetree. Apologies if this already exists!
True, when Sketch started switching to a subscription model, they've buried the link to renew the license very deep so it was really hard to find, but I guess they've came back to their senses and it is now available right on the pricing page.
The best designer I ever worked with did full HTML/CSS mockups but even those had to be rewritten into the development framework of choice.
To me Figma is a step up from the other ways I used to get designs.
Design systems, tokens, modules, over the top consistency/reuse, the programmatic approach to design is experienced by some as a major buzzkill.
What do you mean here? That this note taking method makes you 10 to 100 times better at your job?
I do something very similar except different files. But unstructured and rely on search to find things. Optimizes for writing. But this one trick makes you a 100x developer?
So yeah, 100% agree that the "big bulletin approach" is a negative.
for all that trouble it still beats getting `design.jpg`
"By hovering and clicking around the Figma canvas, you can find and export all the information you need"
Because "hovering" over every shape or area in a screenful of design content to prospect for hidden goodies, then exporting them one by one, is a great way for developers to acquire a complete rundown of what they need to implement.
I guess I can't speak for all developers, but I don't want to dick around with an Advent calendar that's masquerading as a design document.
Meanwhile, has Figma fixed the absurd confusion that it presents in the UI between projects and teams? It seriously confuses those two things right there on the "home" page of your account.
And finally, for those who don't want to support Adobe's software-rental nonsense, there is an open-source alternative to Figma called Penpot: https://penpot.app
She eventually came around, but these latest features may push her over the edge. I kind of feel bad. :-S
It would've been nice if they'd incorporated more design focused features:
> Improved and more intuitive drawing tool. Bezier experience in Figma is horrendous
> Keyframes
I can typically figure out a mental model, even if designed by someone else (assuming they are somewhat consistent), pretty well and fast. — But it’s the inconsistency, that screws things up for me.
If I was a good note-taker and had a rich, deep journal which was searchable - I'd be 100X more than the 1X me right now.
Not journaling is a big regret of mine.
I take screenshots of the state of figma at the time we all agreed that "this is it" (or close enough to what we'll implement). Sure I'll leave a link in the epic to the figma "bulletin board" for that feature so that people can find it and look around. But that's it. We're also never gonna implement exactly what's shown in figma (or said screenshots) either because it would take forever to get the designers to actually adjust everything to look like it does in product.
They can never seem to get the look to match what our standard UI library looks like. Which is a shame because every new developer always tries to match what the design shows instead of sticking with the standard library. Honestly, the best thing would be if figma wasn't used at all and the designers just used black and white lines and boxes and focus on good UX instead of pixel perfect UI designs.
I'm never gonna buy into the Apple ecosystem on principle but product wise it's great to have it at work. On my ThinkPad I always go for my actual mouse when I need precision but the hand travel time between mouse and keyboard use is distracting.
To be fair, they were all like that even before Figma, including Sketch.
But Figma doesn't allow you to link an artboard from one page to a one on different page, so it didn't allow designers to organize.
Don't get me started on lack of subfolders.
It's now way easier to both stop designers from adding one-off design and interaction patterns that confuse users and to write truly reusable components that allow us to iterate faster as a company while maintaining a high level of visual consistency and polish. That's a big challenge once you start hitting org sizes in the hundreds or thousands.
Other developers I know approach Compose with caution and mostly use it for experiments, not in their real apps.
Beginning of the end, and I say that as a previously huge Figma advocate.
Laying low on the cost charts would benefit you more than rinsing us and getting questioned “do we need that?”
But I still empathize with those designers. It's mechanized design which to some feel like a prison for their creativity. Even more so when all designs start to look the same across companies, and then there's AI design still to come.
What you emphasize, speed/productivity, is indeed the credo of our world, but that doesn't necessarily align with the goal of design. Take Apple, they don't seem to care about speed or continuous delivery at all, yet are widely celebrated for design excellence.
Likewise, "consistency" does not mean you found the optimal design. Even Google admitted that Material Design was a poor choice for some of their (internal) products and couldn't make it fit.
It would be incredibly hard to do a worse job of shepherding the Android platform than Google have managed to do. It's no surprise iOS is growing.
1. Hold the cmd key on your keyboard while spinning the scroll wheel to zoom in and out
2. Click and hold the scroll wheel and move the mouse around to pan
I really don't understand why there isn't a better designer>developer hand off experience. It seems like Figma is trying with the CSS stuff and the layouts, but I don't think it quite works
For instance, if something is agreed upon and a designer changes it afterwards, they could simply give you a heads up that they intend to do so with context so the two of you can discuss.
People > process.
For a large software product to be designed well I think you need at least the following four things organizationally:
1. Talented people
2. A collaborative culture that allow those people to argue their position
3. Leadership that believes in good design and is willing and able to invest in it
4. The discipline to maintain consistency across many surfaces
Apple has all 4. I'm at a company that had 1-3 but really struggled with 4 pre-figma. The transition has allowed our design team to really focus their creative energies onto more impactful problems and much less time designing settings page #32. Admittedly this done mean the less talented designers have less fun when they're working, but this griping is exactly what I deal with from mid level engineers who want to work with latest shiny framework, just part of making good product IMO.
For example, if our app uses a letter-spacing of 1.2 for all the body text, and your Figma design uses a letter-spacing of 1.25, is that important? Or is that a mistake?
In something like Figma, being consistent is difficult for designers. But in code, being consistent is the default — exceptions are hard for developers!
There's a fundamental mismatch that just ends up being painful all around.
"The map is not the territory." Trying to get a design doc to 100% accuracy is often a waste of time. Design tools need a way to specify which details are important, and which are not.
The flogging still happens. Is that broken? Yes! Does it still happen in too many companies? Yes! Is there an easy fix where you "trust but verify"? Yes! (as in, sure I trust they will notify me next time, which even if they actually do may be too late. So we made the process "figma is the 'working theory' and what we actually build will sorta look like that". Not every stakeholder may understand that but we sure will tell them when the flogging is about to start. (I say flogging, but in reality it's a gradient of course and while in some companies it will resemble an actual flogging quite closely in others it's more like what you describe. Not all countries and companies are as chill as some others ;))
Ultimately a lot of this stuff is commingled with comfort with tools and general ability to juggle things though, so hard to isolate the effects
Unfortunately that’s been the exception in my personal experience, so most of the time I have to produce pixel-perfect comps that leave nothing to the imagination.
There is still disconnect how to interpt the layout from lower level back to structural abstractions.
Like margin of 24px may actually be 16px default margin + 8px additional margin for this element type.
I'm not sure if Figma or other design tools can solve this disconnect, but I think that would help a lot.
We can use your language and persuasive skills to effect change. That change might be better collaboration. That change might be the person gets fired because it, together with other behavioral patterns, are judged to yield poor outcomes. Outcomes that are not good enough.
Minor design details tend to change and even if they are missed out, they get caught at some point - cost of dev rework is generally manageable.
Another big tool for bigger product teams has been component libraries (and corresponding Figma assets). That makes it all simpler.
This is a strong statement, and I get the sense that you haven’t used the tool much, but I’m curious on your take here. For context, I’m the PM who owns component creation in Figma.
Just pretend that magically everybody knew how to code. Wouldn't designs just be done in the browser? No longer do you have to maintain these design artifacts post handover. There would be no unrealistic designs that do not consider the constraints of a browser window.
I know this is unrealistic but I often think about this.
Even resizability can be done quite well, allowing the designers to create reusable bits that stretch and squeeze to fit the needed space, and the way they deformed can be easily read (and verified!)
One thing I noticed after creating a simple button component was that it does not export the font family of the text within but that might be a Figma limitation.
Still, I think your approach would work. I would probably find myself sketching on paper now and then in that situation though :)
Also, they spend their time analyzing the problems and have many other things to hold in their head beside coding. It would be very challenging nowadays to both be a great UX designer and be current with the latest CSS evolutions.
That said, I wish more designers would try coding at some point and learn how a browser and website work to get a deeper understanding of the material they design for.
Also developers should understand the designers methods like journey maps, basic typography and layouting principles.
Spacing and sizes do matter though. There’s a reason why we have thousands of different fonts, even though 5 would be sufficient. When lengths are proportionate it creates positive feelings in the user. People are unconsciously very perceptive to small changes in proportions - it’s sexual attraction.
So unless some tools that were available decades ago with Visual Basic surfaces with drag’n’drop widgets, I doubt we can leave Figma and the like behind.
(Note: JavaFX does have a visual editor, not perfect but it was quite a great break from editing HTML files)
This change to Figma makes me less likely to choose it as my primary tool either as a designer or a developer. Though I guess this is a minority position as I'm compelled to use it all the time as Figma's become a kind of defacto standard in many sectors these days.
I have a desire to try Figma out as a project management tool, as in being able to easily visualize which screens/flows have been implemented by a developer, which ones have been updated since. I believe Figma is a good tool for that as it is visual and often already used to show things to clients.
Designers are supposed to be fluent in the medium they are designing for. Without understanding what's possible, what's easy, what's hard, what squeezes and what scales, or what's going to have a negative impact on site performance, how can one be a great designer?
Creating a design out of whole cloth and handing it over to a dev, with minimal interaction, seems lazy.
The problem isn't figma - it is how it is being used. I do think that figma is super super overkill, as if you pick a good design kit what's the point? Lots of wasted time.
I don't see the point of doing all the extra work, when in reality a wireframe works better in most cases (doesn't set you up for the "why doesn't it look like the figma" responses)
I believe penpot.app is supposed to work like this, but unfortunately I haven't been able to try that yet.
If I'm working on a backend system and have a (frontend) framework in place, I might easily skip Figma IF I have enough confidence that the approach/pattern/solution is the right one. If not, or if the particular UI is quite challenging, I would usually sketch things out in Figma until I can resolve the most important questions/design challenges. I would not bother making a high-fidelity design in this case.
If I'm working on a highly visual/presentational project, then Figma is my go-to, since code would be super slow and limiting if I want to explore various approaches and ideas. Especially I wanted to be a bit more creative with the presentation. However, I would probably design less than usually needed. Also, when coding this design, I would *not* consider my own Figma project to be a pixel-perfect representation of every single value in terms of font-sizes, spacings, etc. I would use a code-oriented system/approach and make sure everything comes close to the design. Certain details would be tweaked by eye in code as well if I feel they need visual adjustments. I suppose I also intuitively know which areas need more (pixel-perfect) attention and which are flexible.
And then there's exceptions and hybrids to all of these. I may want to polish a particular backend UI piece for whatever reason (Figma-first), or I might want to prototype/create a proof of concept for a complex state management, transitions, etc. (frontend-first) before making portions or all of it pixel perfect in Figma.
For instance, let's say you're a React developer. Designers set their layers as exportable in SVG, and Specify can automatically export the SVG string, optimize it with SVGO, set the end filename, and generate a JSX component for React - automatically. Here's a short video that should help you understand the whole process (https://youtu.be/Z7fX0v3KFmY?t=353).
You basically just have to configure Specify once, and every time designers update icons in Figma you'll get automated pull requests with icons transformed exactly how you want.
This is one of the reason we built Specify (specifyapp.com) which is a Design API that helps you sync design tokens and assets from Figma to any platforms and formats.
Specify helps you get automated pull requests containing your design tokens and assets defined in Figma.
You basically just have to configure Specify once, and every time designers update colors in Figma you'll get automated pull requests with colors transformed exactly how you want.
https://github.com/reinier/dotfiles/blob/main/hammerspoon/er...
It let's you hold down the right click key and use your mouse to scroll any x/y direction.
Original source for this hack is offline, but Internet Archive to the rescue: https://web.archive.org/web/20200808000102/https://savouryti...
BTW I use Figma all the time, I have never any issues scrolling with this hack.
I’m talking about 2015-16 when you had to use raster images for components and figma was not even a thing.
But thank you nonetheless.
My current complaint about figma is that even if I take time to set up all the dynamic scaling and layouts I don’t think it as useful for devs as I hoped it would be in my mind. (As in I thought u can just copypaste the code snippet). But i’m not quite sure as I have not done much IC design work in years aside some odd jobs for friends and perhaps they are just shit programmers or I am not using it right.
Most places use consistent patterns for padding, space, etc. But a lot of things need adjusted visually for polish. Tweaking things in devtools is fine for quick things, but can be lost on browser refresh.
Tools like "CSS Pro" make it easier. Saving devtools state makes it easier. But neither quite compare with hitting the arrow keys a few times to see what small adjustments look like. Or dragging a card to a different spot. Or duplicating a component three times with slight variations to see them side-by-side.
I'm a developer that uses Figma occasionally. It's just less frustrating to get the "look" down before jumping into code.
But then I, as a developer, have to argue with the designer why a table containing a thousand rows or more, with no pagination, may not be a good idea :-(
Edit: my actual point was that if a person works along their natural tendencies, they'll probably be faster than if they have to fight their instincts (and take time to organize in this case), mainly because they might fall out of the zone
I'm also surprised we don't see the utilization of some GD&T style language to specify design intent. (https://www.gdandtbasics.com/gdt-symbols/)
For the problem of:
"I have a design I would like produced. Please make it like this please."
I couldn't imagine giving a machinist or welder a drawing containing no annotations. (This would be something an intern does once and the shop calls them up to tell ask them questions about what they actually need for 45min. Probably sending them back to rework it)
Pulling from the mechanical world:
* make 3d models (equivalent to HTML/CSS components)
* put 3d models into an assembly (HTML components together on the page)
* make variations of the assembly to show range of motion (variations on user activity)
* make "drawings" that contain components that are broken down to the smallest practical level (this would map to: modal, tables)
** in software these are usually managed similarly to Spreadsheet tabs
** this would contain a reference to the 3d parts + dimensional annotations. This means updating the assembly/part geometry automatically updates the drawing
* anytime significant changes are made, issue new "Revisions" of those "drawings" are committed, issued, and then sent to the shop
* 3d modeling software has change management systems so you'll automatically know if your proposed changes to a 3d part will break a drawing or assembly that depends on itWe developed an open source plugin that let you go from Figma to tailwindcss + react. Feel free to check it out
https://www.figma.com/community/plugin/1178847414663679049/B...
Unfortunately, the product designers don't seem to want to let go of Figma. I understand that this helps them think and organise the layout so perhaps it's not really a problem.
That's why I really like working in true cross-functional teams. A Product Manager, a Product Designer and a handful of engineers. Do standups and all ceremonies together.
Ideally this "product team" is also empowered to solve a problem instead of tasked to build a feature.
I certainly can understand stand the move fast method of quickly changing things, when I'm doing concept work this makes more sense here.
Long term though, if you actually care about your work you should be making copies or different boards to show how and when you made some decisions. Especially mayor design changes.(Granted I could just be a bad designer that just can't come up with a better workflow)
The missing link, often, is then formalizing the design in some form that both developers and designers can use.
At the job I mentioned in my anecdote, we had a guy who lead our design system team. He had string design experience and was also a front end developer. He acted as the interface between the dec Org and the design team to create and develop a component library that was actually used in production and documented on an internal site.
Devs had real code they could use and design could focus on future products and reducing existing things.