So yeah, 100% agree that the "big bulletin approach" is a negative.
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.
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.
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 it"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
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.
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.
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
My soul resonates with this
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.
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
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 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.
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!
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?
Makes it way easier.
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.
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.
They had Wrap before Figma. They have Flex and Grid!
Design systems, tokens, modules, over the top consistency/reuse, the programmatic approach to design is experienced by some as a major buzzkill.
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.
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.
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
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
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.
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?”
That doesn't sound like a bad deal to me. They're not taking away anything from free mode.
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.
Send the ENG a SYN packet, and if they ACK They are an engineer... if they /dev/null your packet, its a DEV.
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?
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!
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.
What started this mentality?
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.
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"
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.
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.
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.
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.
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.
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)
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.
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.
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.
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.
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.
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.
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!)
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.
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.
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.
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?
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.
Still, I think your approach would work. I would probably find myself sketching on paper now and then in that situation though :)
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.
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.
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)
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.
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 :)
We 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...
You should see it in the From Community list or you can find it here:
Can't seem to edit my post.
Feedback welcome btw.
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.
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.
Other developers I know approach Compose with caution and mostly use it for experiments, not in their real apps.
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.
2024: separate license for Dev Mode
I guess Figma trying to get more paying customers
Edit: feel a bit Adobe vibe
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.
- "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.
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.
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 :)
Companies like Bifrost (YC W22) are working on this problem and already automatically generate React components from Figma autolayout designs.
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...
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
Considering my question I'm obviously not a Figma user so maybe I've misunderstood it.
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.
I believe penpot.app is supposed to work like this, but unfortunately I haven't been able to try that yet.
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.
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.