19 ms·

Making Figma better for developers with Dev Mode

549 points by emilsjolander 3y ago

pininja 3y ago
I’m also really happy they didn’t pounce on the AI bandwagon before figuring out the right thing to make. At the same time, I’m excited about the Diagram acquisition to jump-start whatever they’re going to build!
kubenqpl 3y ago
Now I need to switch between design and dev mode to get all the information I need. Typography style name is accessible in Design mode only, and margins are visible in dev mode only
yewenjie 3y ago
I hate when figma just always gives me CSS for absolute positioning. Is there any way around that?
- replygirl 3y ago
  Supposedly the codegen is more useful now, erring on the side of using flex
- emilsjolander 3y ago
  Emil from Figma here! We have made a ton of improvements to the generated CSS code, and while we still sometimes provide absolute positioning we now separate it from the styling & flexbox code that you might actually want to pull into your codebase. 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 :)
  - jt_b 3y ago
    An option for TailwindCSS classes would be really clean too.
    - luyuanxin1995 3y ago
      Hello, 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/Bricks---AI-Powered-Design-to-TailwindCSS-Code https://www.figma.com/community/plugin/1178847414663679049/B...
    - andruby 3y ago
      Yes! Absolutely. I've been looking for best practices around Figma + Tailwind.
ryanSrich 3y ago
Seems interesting, and admittedly I might have missed this, but grabbing icons as individual SVGs is probably what takes me the longest when going from design to code. I have to click on each asset, name it properly, and then export it. Over, and over again. All from different layers, and pages. 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.
- wetpaws 3y ago
  [dead]
- JusticeJuice 3y ago
  There is 100% that. Any frame can have an 'export' set on it, where you specificy the format (svg, png ..), suffix, pixel density etc. The name will be set by the name of the frame, and '/' creates nested folders. Then on any page can go file->export to export all assets at once. 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.
- pininja 3y ago
  Maybe the vscode plug-in can autocomplete an SVG? That’d be helpful.. setting up every export takes a lot of time.
  - emilsjolander 3y ago
    Kinda! It will auto-detect icons in a design, highlight them at the top level, and allow you to import it into your VS Code workspace :)
- uxamanda 3y ago
  Right Click the icon > Copy/Paste as > Copy as SVG 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.
zui 3y ago
2023: available for all user 2024: separate license for Dev Mode I guess Figma trying to get more paying customers Edit: feel a bit Adobe vibe
- taylorlapeyre 3y ago
  It's free for all paid plans even after 2023. The only pricing change is that you can add "developer" role users who have access only to dev mode for a cheaper price than an editor.
  - geekrax 3y ago
    ...which actually feels "not" very Adobe like :)
  - 542458 3y ago
    Right, but the pitch previously was that you paid for designers, and everyone else can view for free. Now it looks like they're locking all future view-only features behind a paywall.
pininja 3y ago
Super excited for the vscode plug-in with code autocomplete coming from the deisgn file I’ve opened up!
deleted 3y ago
[deleted]
emilsjolander 3y ago
Hey all! Emil here from the Figma team that brought you Dev Mode and Figma for VS Code today! Really interested to hear what you think and also here to answer your questions. We are super excited to invest more into developers in the future, today is just the start of that!
- yewenjie 3y ago
  How has the release of giant LLMs and other LLM-powered design apps influenced your product roadmap in the last couple of months?
  - trafnar 3y ago
    They bought an AI design tool company today https://twitter.com/jsngr/status/1671561341893742592 https://twitter.com/jsngr/status/1671561341893742592
    - uxamanda 3y ago
      I can't wait until that feature is available on a sites, so that I as a user can AI design my own interface and it hooks it all up to the API for me.
  - kleneway1 3y ago
    I've been experimenting with using LLMs to map Figma designs directly into a working production-level codebase. There's quite a bit of compression you need to do in order to convert the raw Figma JSON into a format that an LLM can understand, but overall it actually performs quite well. Here's a quick demo: https://www.youtube.com/watch?v=s9JRBw7kR9g https://www.youtube.com/watch?v=s9JRBw7kR9g
- beanaroo 3y ago
  This looks really awesome. Are there any plans to support teams that do not use VS Code or GitHub?
- raphaelschaad 3y ago
wdb 3y ago
Interesting, looks promising. I wonder what the status of the Adobe-Figma merger is. Personally, I hope it gets blocked to avoid more dominancy of Adobe
- pcurve 3y ago
  DOJ is planning to sue, but who knows. 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/64523aa4faf4aa0012e13208/Notice_Commencement.pdf https://assets.publishing.service.gov.uk/media/64523aa4faf4a...
csmeder 3y ago
Wow, this is an amazing update! Here is an overview of all the features + screenshots: https://twitter.com/Chris_Smeder/status/1671565267145748480?s=20 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 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 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 https://youtube.com/watch?v=-44qrQDnLMM
obeid 3y ago
Figma remains a vector design tool that can export raster images.
roflyear 3y ago
Has anyone else worked with teams where their entire idea of "product" was to create 100s of designs in Figma, and then just hand them to developers? What started this mentality?
- obeid 3y ago
  Unimaginative leadership that didn't trust their teams. Prototyping the 'experience' (mostly happy path) in a design tool, gave them 'visibility' into what the product could become.
  - roflyear 3y ago
    I don't think it's a trust thing, but yes - I think leadership not knowing what they want is a big part of it.
- kayodelycaon 3y ago
  Yup. This is far from new. Used to be getting a zip file full of low quality photoshop exports and you would have better luck pulling teeth out of a cranky tiger(1) than getting proper assets (or the raw files) out of the art team. 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.
  - roflyear 3y ago
    I like the PPT - it is more like a wireframe! 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.
    - kayodelycaon 3y ago
      I think you misunderstood. It was a powerpoint with images in it, not a wireframe. It show how site navigation worked, which was a huge improvement... minus having to dig the images out one at a time. :D 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.
1023bytes 3y ago
Videos on the page are not loading for me, seeing a bunch of "Minified React errors" in the console
- emilsjolander 3y ago
  The team is aware and looking into it, thanks for letting us know!
- Vorh 3y ago
  If you click the link in the errors it tells you what they mean. - "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.
parentheses 3y ago
Timed perfectly with their conference. Bravo!
- cratermoon 3y ago
  I'd love to have been a fly on the wall during the planning and development of this deadline-driven functionality. How many compromises were made to hit the conference date? What was left out? How much overtime or death march work did the team suffer? Did the team eat their own dog food?
  - dmalik 3y ago
    Hopefully for their sake not too much. It's still in beta with full launch in 2024.
view 3y ago
A plugin for React Native would be nice!
- emilsjolander 3y ago
  I would love to see this as well! The APIs are live so give it a shot and tell us about any API feedback you have
- theultdev 3y ago
  Just added support for the inspect panel and codegen to my React Native -> Figma plugin. You should see it in the From Community list or you can find it here: https://www.figma.com/community/plugin/821138713091291738 https://www.figma.com/community/plugin/821138713091291738
  - theultdev 3y ago
    Figma -> React Native* Can't seem to edit my post. Feedback welcome btw.
    - view 3y ago
      That's awesome! Thanks for sharing. I'll definitely use that from now on, great work. 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.
robertoandred 3y ago
I just want to be able to download the original, full quality, uncropped version of an image. And to have built-in options for compressing images. 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.
- KnobbleMcKnees 3y ago
  I miss Sketch. Something I thought I'd never say
  - Andrew_nenakhov 3y ago
    Why? It is still around and it is better than it ever was.
    - a1o 3y ago
      I don't think one can own a sketch license anymore can? I believe they switched for a subscription model.
      - Andrew_nenakhov 3y ago
        You can, actually. See "Mac-only license" in their pricing [0]. Just as before, you get one year of updates. 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. [0]: https://www.sketch.com/pricing/ https://www.sketch.com/pricing/
        andrewmcwatters 3y ago
        This must be very recent. I was looking at their marketing collateral in May, and it was simply no longer an option at all to buy a Mac-only license. You could only renew at the time.
arecurrence 3y ago
Really looking forward to this progressing to automatic React component generation and onto bidirectional sync; prompting automatic pull requests on Figma changes for affected components. 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 :)
- nopeYouAreWrong 3y ago
  I'm going to have to look into this because while that sounds like an incredible future, I don't see it. we have thousands of custom classes and dozens of material themes, can Figma work with that and then generate a component using our core custom styles?...
  - arecurrence 3y ago
    Tailwind simplifies part of that problem since you don't need to map to the myriad of custom class names in use, rather you solely need to preprocess off the tailwind config. Companies like Bifrost (YC W22) are working on this problem and already automatically generate React components from Figma autolayout designs.
karaterobot 3y ago
As a designer who was a front end developer in previous roles, I am very excited about both Dev Mode and the addition of variables, expressions, and conditional logic.
- jjcm 3y ago
  PM for variables here as well! Happy to answer any q's you have regarding variables and conditional logic!
  - karaterobot 3y ago
    No questions yet. 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.
  - dsmmcken 3y ago
    Can I import variables from an existing css file? Can I export variables back?
nocontextpls 3y ago
[dead]
seanwilson 3y ago
I found this link explains what it is better: https://www.figma.com/dev-mode/ https://www.figma.com/dev-mode/
pcurve 3y ago
I ran a design team, and many really struggled with Sketch -> Figma transition, and took a long time. 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.
- jozzy-james 3y ago
  > I do wonder how non-technical designers are going to feel. The learning curve is definitely going higher. 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
  - pcurve 3y ago
    "how would this impact them? just use figma as usual i would assume" 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.
    - butlerm 3y ago
      Designing a user interface of all things is a technical job, and non-technical folks who are asked to do that should probably study those things to do their jobs well.
      - pcurve 3y ago
pirsquare 3y ago
Webflow need a mode for this. I struggle dealing with "icons" over raw code.
throwaway20222 3y ago
We already used this feature set today in a cross-team/cross-company collaboration and it was very helpful. We are doing design work for another firm that is doing the build and being able to communicate more easily what work is ready to move to what stage etc… improved our workflow, at least from the first glance. I am not sure how much long term efficiency there is to gain, but I suspect for us there will be a meaningful amount.
rco8786 3y ago
Is there like a TLDR or something? This is an enormous amount of text.
- shaan7 3y ago
  And a weird looking mouse cursor
pineapple_sauce 3y ago
From the Nim programming language community, this project is this feature: https://github.com/treeform/fidget https://github.com/treeform/fidget
jhatemyjob 3y ago
great. it has a VScode plugin, and exporting to CSS or swiftUI. that's all anyone will ever need. definitely worth fully buying into. im sure this will stand the test of time
- jhatemyjob 3y ago
  btw this is sarcasm
Kiro 3y ago
The VS Code extension looks cool but I don't understand Dev Mode. Are you saying you could not click on elements in Figma to see the properties before? How do you edit things? Considering my question I'm obviously not a Figma user so maybe I've misunderstood it.
spandrew 3y ago
Taking away the INSPECT tab and then charging me $25 per seat to use its replacement is insane to me. I love the integrated feel of having these things in Figma, but these paywall barriers are becoming a big adoption issue for my design and eng team. 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.
karaterobot 3y ago
Having autolayout items wrap is huge for my use case, and having min/max dimensions is a really useful addition too. Both features feel like steps on the way to having prototypes with responsive breakpoints, which is a long-requested feature too.
bgribble 3y ago
As a developer, the "one big bulletin board" visual model that Figma promotes is one of the worst steps backwards in UX I have ever had to deal with. I am constantly zooming in and out and scrolling around trying to find anything. I hate it so much.
- dangom 3y ago
  Name your frames and the problem is solved. I for instance love the model because I no longer have to be tracking down millions of filenames - just one for each project.
  - facorreia 3y ago
    As a developer, I don't "name" anything on Figma. The UX designer might. I have to work with what I get. I agree with OP that in general it promotes placing a lot of components side by side on a huge surface and you have to keep zooming out and in, scrolling, etc. It's a terrible experience.
    - brandall10 3y ago
      In my last job designers would put “in progress” in the title. But occasionally would make minor updates on final designs that would need to be communicated.
- zackmorris 3y ago
  I rarely use Figma but wanted to add that your experience isn't universal. I maintain one giant notes.txt file which I treat as my mental palace, finding sections within it by searching for "# keyword". This allows me to work as a 10x or 100x developer by avoiding bookkeeping chores like categorizing my notes, so more like a search engine. Figma might be targeted at designers who want to work fast also. 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!
grishka 3y ago
For me, as an Android developer, this is a huge improvement. 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.
- codethief 3y ago
  Interesting, I'm not an Android developer myself but at least our Android teams seem to really really like Compose. In fact yesterday I overheard one of the guys say, "Almost everyone in the industry is switching to Compose these days". (Not sure that's true but still.)
  - grishka 3y ago
    I'm personally on the opposite end of this spectrum. My projects don't use neither Kotlin nor even AppCompat. The AndroidX libraries that I need (because Google can't be assed to ship them as part of the system) like RecyclerView I use as my own fork that doesn't depend on anything else. I wholeheartedly despise what Google does to the Android development ecosystem. Google is not a good steward of Android. Other developers I know approach Compose with caution and mostly use it for experiments, not in their real apps.
    - fidotron 3y ago
      I'm commenting here to agree, and because what you say is so specifically similar to my outbursts a good number of my colleagues would mistakenly believe I am you from this comment, and they regularly accuse me of being the only one! 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.
novok 3y ago
Since figma devs are looking at this thread, could you please add proper p3 color space support? Everyone’s phone supports p3 at this point, especially iphones and the gap prevents mobile designs from looking the best they can be because there is too much friction to use it. Sketch supports it!
- aabhay 3y ago
  Seconded!
joanne123 3y ago
[dead]
logicchains 3y ago
What's figma?
nateroling 3y ago
The problem with these kind of pixel-perfect, inspectable design tools, is that there's no distinction between important details and unimportant details. 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.
- maroonblazer 3y ago
  In my experience the designer and the developer need to be co-located, either physically or virtually. There's just too many questions that come up during implementation of a design that can't be expressed in the design doc (or it's inefficient to do so) and so the feedback/communication loop between these two needs to be fast and high-fidelity. I.e., the dev can't be offshore while the designer is onshore. I've tried it a number of times and it never worked.
- sethgoodluck 3y ago
  That's a problem with your communication between dev and design - not the tool
  - nateroling 3y ago
    Absolutely is is. But the tool itself is a medium for that communication. What is Figma for, if not communicating design decisions?
- zarzavat 3y ago
  When writing CSS for a Figma design, I first try to match the Figma as exactly as is reasonable, then I do a visual diff to make sure I haven’t missed any important details, then I clean up the CSS and relax some of the constraints until the (S)CSS is maintainable e.g. if I have padding of 19 and 21, lifting that out into a $padding: 20px constant.
spacebacon 3y ago
A designer using Figma is equivalent to a developer using no code solutions. The design is compromised and potential to do something great is capped. I prefer an illustrator art board over Fisher Price my first UI apps. Wire-framing UX is best done with the freedom of a large art board to play in. Extra points if you design UI completely with vector. God mode if you build your own components.
- jjcm 3y ago
  Do you have an example of something you can’t do in Figma that you’d like to do for web design? 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.
  - spacebacon 3y ago
    Figma is “web design” exclusive. Putting yourself in the web design bucket trades creativity for utility. Design snobs that have pushed the envelope for decades (26 years for me) depend on not being in a preconceived bucket to redefine what web design actually is. Figma is great for rapid prototyping but rapid is not a priority when reinventing the web. Most big leaps in design are born from the tension of designer and medium. For example, a designer and the printing press or in our case here the healthy tension between a designer and a developer.
metalrain 3y ago
While I'm happy Figma exposes layout as CSS rules, one does not copy paste styles directly into project. 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.
mercurialsolo 3y ago
This is an outright Zeplin killer. This does make Figma even more enterprise and team first rather than simpler design tools. I would love to see an emergent design tool alternative really which is simpler in its philosophy.
balaji1 3y ago
Framer [1] seems mind-blowing for small product teams. Or at least the idea of it if Framer can be adopted successfully by a small team. I tried it briefly on a small project, it felt powerful, but big disclaimer we never went to "prod" on that project. Also I am not sure about performance, etc. Any thoughts or anecdotes? [1] https://www.framer.com/ https://www.framer.com/
jsncbt 3y ago
Hypothetically speaking, if all designers could code at the level of a Snr Front End Engineer, would Figma exist? 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.
- mejutoco 3y ago
  I am a software engineer and I still use Figma to be in design mode. Messing around with how a gradient/shadow looks or moving elements around is way quicker graphically than with code. It helps me not default to things that are easy to implement, but might be worse despite of it. Still, I think your approach would work. I would probably find myself sketching on paper now and then in that situation though :)
- maigret 3y ago
  I don't think so. While there are some scenarios that are better coded (where lots of different paths open up quickly, typically Excel-like), in many cases good designers are incredibly fast with Figma and I know no coder who can be that fast. 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.
  - azangru 3y ago
    > It would be very challenging nowadays to both be a great UX designer and be current with the latest CSS evolutions. 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?
_betty_ 3y ago
I see you can start linking things to urls/files, curious as to if this will unlock developers adding more metadata to designs which might eventually be nicely displayed in Figma. 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.
Vinnl 3y ago
I understand that this is attractive for Figma because it broadens their market and allows them to sell developer-specific plans, but honestly, what I need is not so much tools for myself, but for Figma to nudge my designers to make things more easily consumable by engineers. So that means nudging them to specifying a colour and font palette once and defaulting to using and re-using those, with straying from them being an exception. It means getting them to specify how different elements should flow, rather than them all being absolutely positioned at some particular X and Y coordinates. And just in general have them draw the design with tools that work more closely to the way CSS works. I believe penpot.app is supposed to work like this, but unfortunately I haven't been able to try that yet.

549 points by emilsjolander 3y ago

I’m also really happy they didn’t pounce on the AI bandwagon before figuring out the right thing to make. At the same time, I’m excited about the Diagram acquisition to jump-start whatever they’re going to build!

kubenqpl 3y ago

Now I need to switch between design and dev mode to get all the information I need. Typography style name is accessible in Design mode only, and margins are visible in dev mode only

yewenjie 3y ago

I hate when figma just always gives me CSS for absolute positioning. Is there any way around that?

replygirl 3y ago
Supposedly the codegen is more useful now, erring on the side of using flex
emilsjolander 3y ago
Emil from Figma here! We have made a ton of improvements to the generated CSS code, and while we still sometimes provide absolute positioning we now separate it from the styling & flexbox code that you might actually want to pull into your codebase. 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 :)
- jt_b 3y ago
  An option for TailwindCSS classes would be really clean too.
  - luyuanxin1995 3y ago
    Hello, 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/Bricks---AI-Powered-Design-to-TailwindCSS-Code https://www.figma.com/community/plugin/1178847414663679049/B...
  - andruby 3y ago
    Yes! Absolutely. I've been looking for best practices around Figma + Tailwind.

ryanSrich 3y ago

Seems interesting, and admittedly I might have missed this, but grabbing icons as individual SVGs is probably what takes me the longest when going from design to code. I have to click on each asset, name it properly, and then export it. Over, and over again. All from different layers, and pages. 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.

wetpaws 3y ago
[dead]
JusticeJuice 3y ago
There is 100% that. Any frame can have an 'export' set on it, where you specificy the format (svg, png ..), suffix, pixel density etc. The name will be set by the name of the frame, and '/' creates nested folders. Then on any page can go file->export to export all assets at once. 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.
pininja 3y ago
Maybe the vscode plug-in can autocomplete an SVG? That’d be helpful.. setting up every export takes a lot of time.
- emilsjolander 3y ago
  Kinda! It will auto-detect icons in a design, highlight them at the top level, and allow you to import it into your VS Code workspace :)
uxamanda 3y ago
Right Click the icon > Copy/Paste as > Copy as SVG 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.

zui 3y ago

2023: available for all user 2024: separate license for Dev Mode I guess Figma trying to get more paying customers Edit: feel a bit Adobe vibe

taylorlapeyre 3y ago
It's free for all paid plans even after 2023. The only pricing change is that you can add "developer" role users who have access only to dev mode for a cheaper price than an editor.
- geekrax 3y ago
  ...which actually feels "not" very Adobe like :)
- 542458 3y ago
  Right, but the pitch previously was that you paid for designers, and everyone else can view for free. Now it looks like they're locking all future view-only features behind a paywall.

pininja 3y ago

Super excited for the vscode plug-in with code autocomplete coming from the deisgn file I’ve opened up!

deleted 3y ago

[deleted]

emilsjolander 3y ago

Hey all! Emil here from the Figma team that brought you Dev Mode and Figma for VS Code today! Really interested to hear what you think and also here to answer your questions. We are super excited to invest more into developers in the future, today is just the start of that!

yewenjie 3y ago
How has the release of giant LLMs and other LLM-powered design apps influenced your product roadmap in the last couple of months?
- trafnar 3y ago
  They bought an AI design tool company today https://twitter.com/jsngr/status/1671561341893742592 https://twitter.com/jsngr/status/1671561341893742592
  - uxamanda 3y ago
    I can't wait until that feature is available on a sites, so that I as a user can AI design my own interface and it hooks it all up to the API for me.
- kleneway1 3y ago
  I've been experimenting with using LLMs to map Figma designs directly into a working production-level codebase. There's quite a bit of compression you need to do in order to convert the raw Figma JSON into a format that an LLM can understand, but overall it actually performs quite well. Here's a quick demo: https://www.youtube.com/watch?v=s9JRBw7kR9g https://www.youtube.com/watch?v=s9JRBw7kR9g
beanaroo 3y ago
This looks really awesome. Are there any plans to support teams that do not use VS Code or GitHub?
raphaelschaad 3y ago

wdb 3y ago

Interesting, looks promising. I wonder what the status of the Adobe-Figma merger is. Personally, I hope it gets blocked to avoid more dominancy of Adobe

pcurve 3y ago
DOJ is planning to sue, but who knows. 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/64523aa4faf4aa0012e13208/Notice_Commencement.pdf https://assets.publishing.service.gov.uk/media/64523aa4faf4a...

csmeder 3y ago

Wow, this is an amazing update! Here is an overview of all the features + screenshots: https://twitter.com/Chris_Smeder/status/1671565267145748480?s=20 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 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 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 https://youtube.com/watch?v=-44qrQDnLMM

obeid 3y ago

Figma remains a vector design tool that can export raster images.

roflyear 3y ago

Has anyone else worked with teams where their entire idea of "product" was to create 100s of designs in Figma, and then just hand them to developers? What started this mentality?

obeid 3y ago
Unimaginative leadership that didn't trust their teams. Prototyping the 'experience' (mostly happy path) in a design tool, gave them 'visibility' into what the product could become.
- roflyear 3y ago
  I don't think it's a trust thing, but yes - I think leadership not knowing what they want is a big part of it.
kayodelycaon 3y ago
Yup. This is far from new. Used to be getting a zip file full of low quality photoshop exports and you would have better luck pulling teeth out of a cranky tiger(1) than getting proper assets (or the raw files) out of the art team. 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.
- roflyear 3y ago
  I like the PPT - it is more like a wireframe! 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.
  - kayodelycaon 3y ago
    I think you misunderstood. It was a powerpoint with images in it, not a wireframe. It show how site navigation worked, which was a huge improvement... minus having to dig the images out one at a time. :D 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.

1023bytes 3y ago

Videos on the page are not loading for me, seeing a bunch of "Minified React errors" in the console

emilsjolander 3y ago
The team is aware and looking into it, thanks for letting us know!
Vorh 3y ago
If you click the link in the errors it tells you what they mean. - "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.

parentheses 3y ago

Timed perfectly with their conference. Bravo!

cratermoon 3y ago
I'd love to have been a fly on the wall during the planning and development of this deadline-driven functionality. How many compromises were made to hit the conference date? What was left out? How much overtime or death march work did the team suffer? Did the team eat their own dog food?
- dmalik 3y ago
  Hopefully for their sake not too much. It's still in beta with full launch in 2024.

view 3y ago

A plugin for React Native would be nice!

emilsjolander 3y ago
I would love to see this as well! The APIs are live so give it a shot and tell us about any API feedback you have
theultdev 3y ago
Just added support for the inspect panel and codegen to my React Native -> Figma plugin. You should see it in the From Community list or you can find it here: https://www.figma.com/community/plugin/821138713091291738 https://www.figma.com/community/plugin/821138713091291738
- theultdev 3y ago
  Figma -> React Native* Can't seem to edit my post. Feedback welcome btw.
  - view 3y ago
    That's awesome! Thanks for sharing. I'll definitely use that from now on, great work. 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.

robertoandred 3y ago

I just want to be able to download the original, full quality, uncropped version of an image. And to have built-in options for compressing images. 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.

KnobbleMcKnees 3y ago
I miss Sketch. Something I thought I'd never say
- Andrew_nenakhov 3y ago
  Why? It is still around and it is better than it ever was.
  - a1o 3y ago
    I don't think one can own a sketch license anymore can? I believe they switched for a subscription model.
    - Andrew_nenakhov 3y ago
      You can, actually. See "Mac-only license" in their pricing [0]. Just as before, you get one year of updates. 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. [0]: https://www.sketch.com/pricing/ https://www.sketch.com/pricing/
      - andrewmcwatters 3y ago
        This must be very recent. I was looking at their marketing collateral in May, and it was simply no longer an option at all to buy a Mac-only license. You could only renew at the time.

arecurrence 3y ago

Really looking forward to this progressing to automatic React component generation and onto bidirectional sync; prompting automatic pull requests on Figma changes for affected components. 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 :)

nopeYouAreWrong 3y ago
I'm going to have to look into this because while that sounds like an incredible future, I don't see it. we have thousands of custom classes and dozens of material themes, can Figma work with that and then generate a component using our core custom styles?...
- arecurrence 3y ago
  Tailwind simplifies part of that problem since you don't need to map to the myriad of custom class names in use, rather you solely need to preprocess off the tailwind config. Companies like Bifrost (YC W22) are working on this problem and already automatically generate React components from Figma autolayout designs.

karaterobot 3y ago

As a designer who was a front end developer in previous roles, I am very excited about both Dev Mode and the addition of variables, expressions, and conditional logic.

jjcm 3y ago
PM for variables here as well! Happy to answer any q's you have regarding variables and conditional logic!
- karaterobot 3y ago
  No questions yet. 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.
- dsmmcken 3y ago
  Can I import variables from an existing css file? Can I export variables back?

nocontextpls 3y ago

[dead]

seanwilson 3y ago

I found this link explains what it is better: https://www.figma.com/dev-mode/ https://www.figma.com/dev-mode/

pcurve 3y ago

I ran a design team, and many really struggled with Sketch -> Figma transition, and took a long time. 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.

jozzy-james 3y ago
> I do wonder how non-technical designers are going to feel. The learning curve is definitely going higher. 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
- pcurve 3y ago
  "how would this impact them? just use figma as usual i would assume" 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.
  - butlerm 3y ago
    Designing a user interface of all things is a technical job, and non-technical folks who are asked to do that should probably study those things to do their jobs well.
    - pcurve 3y ago

pirsquare 3y ago

Webflow need a mode for this. I struggle dealing with "icons" over raw code.

throwaway20222 3y ago

We already used this feature set today in a cross-team/cross-company collaboration and it was very helpful. We are doing design work for another firm that is doing the build and being able to communicate more easily what work is ready to move to what stage etc… improved our workflow, at least from the first glance. I am not sure how much long term efficiency there is to gain, but I suspect for us there will be a meaningful amount.

rco8786 3y ago

Is there like a TLDR or something? This is an enormous amount of text.

shaan7 3y ago
And a weird looking mouse cursor

pineapple_sauce 3y ago

From the Nim programming language community, this project is this feature: https://github.com/treeform/fidget https://github.com/treeform/fidget

jhatemyjob 3y ago

great. it has a VScode plugin, and exporting to CSS or swiftUI. that's all anyone will ever need. definitely worth fully buying into. im sure this will stand the test of time

jhatemyjob 3y ago
btw this is sarcasm

Kiro 3y ago

The VS Code extension looks cool but I don't understand Dev Mode. Are you saying you could not click on elements in Figma to see the properties before? How do you edit things? Considering my question I'm obviously not a Figma user so maybe I've misunderstood it.

spandrew 3y ago

Taking away the INSPECT tab and then charging me $25 per seat to use its replacement is insane to me. I love the integrated feel of having these things in Figma, but these paywall barriers are becoming a big adoption issue for my design and eng team. 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.

karaterobot 3y ago

Having autolayout items wrap is huge for my use case, and having min/max dimensions is a really useful addition too. Both features feel like steps on the way to having prototypes with responsive breakpoints, which is a long-requested feature too.

bgribble 3y ago

As a developer, the "one big bulletin board" visual model that Figma promotes is one of the worst steps backwards in UX I have ever had to deal with. I am constantly zooming in and out and scrolling around trying to find anything. I hate it so much.

dangom 3y ago
Name your frames and the problem is solved. I for instance love the model because I no longer have to be tracking down millions of filenames - just one for each project.
- facorreia 3y ago
  As a developer, I don't "name" anything on Figma. The UX designer might. I have to work with what I get. I agree with OP that in general it promotes placing a lot of components side by side on a huge surface and you have to keep zooming out and in, scrolling, etc. It's a terrible experience.
  - brandall10 3y ago
    In my last job designers would put “in progress” in the title. But occasionally would make minor updates on final designs that would need to be communicated.
zackmorris 3y ago
I rarely use Figma but wanted to add that your experience isn't universal. I maintain one giant notes.txt file which I treat as my mental palace, finding sections within it by searching for "# keyword". This allows me to work as a 10x or 100x developer by avoiding bookkeeping chores like categorizing my notes, so more like a search engine. Figma might be targeted at designers who want to work fast also. 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!

grishka 3y ago

For me, as an Android developer, this is a huge improvement. 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.

codethief 3y ago
Interesting, I'm not an Android developer myself but at least our Android teams seem to really really like Compose. In fact yesterday I overheard one of the guys say, "Almost everyone in the industry is switching to Compose these days". (Not sure that's true but still.)
- grishka 3y ago
  I'm personally on the opposite end of this spectrum. My projects don't use neither Kotlin nor even AppCompat. The AndroidX libraries that I need (because Google can't be assed to ship them as part of the system) like RecyclerView I use as my own fork that doesn't depend on anything else. I wholeheartedly despise what Google does to the Android development ecosystem. Google is not a good steward of Android. Other developers I know approach Compose with caution and mostly use it for experiments, not in their real apps.
  - fidotron 3y ago
    I'm commenting here to agree, and because what you say is so specifically similar to my outbursts a good number of my colleagues would mistakenly believe I am you from this comment, and they regularly accuse me of being the only one! 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.

novok 3y ago

Since figma devs are looking at this thread, could you please add proper p3 color space support? Everyone’s phone supports p3 at this point, especially iphones and the gap prevents mobile designs from looking the best they can be because there is too much friction to use it. Sketch supports it!

aabhay 3y ago
Seconded!

joanne123 3y ago

[dead]

logicchains 3y ago

What's figma?

nateroling 3y ago

The problem with these kind of pixel-perfect, inspectable design tools, is that there's no distinction between important details and unimportant details. 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.

maroonblazer 3y ago
In my experience the designer and the developer need to be co-located, either physically or virtually. There's just too many questions that come up during implementation of a design that can't be expressed in the design doc (or it's inefficient to do so) and so the feedback/communication loop between these two needs to be fast and high-fidelity. I.e., the dev can't be offshore while the designer is onshore. I've tried it a number of times and it never worked.
sethgoodluck 3y ago
That's a problem with your communication between dev and design - not the tool
- nateroling 3y ago
  Absolutely is is. But the tool itself is a medium for that communication. What is Figma for, if not communicating design decisions?
zarzavat 3y ago
When writing CSS for a Figma design, I first try to match the Figma as exactly as is reasonable, then I do a visual diff to make sure I haven’t missed any important details, then I clean up the CSS and relax some of the constraints until the (S)CSS is maintainable e.g. if I have padding of 19 and 21, lifting that out into a $padding: 20px constant.

spacebacon 3y ago

A designer using Figma is equivalent to a developer using no code solutions. The design is compromised and potential to do something great is capped. I prefer an illustrator art board over Fisher Price my first UI apps. Wire-framing UX is best done with the freedom of a large art board to play in. Extra points if you design UI completely with vector. God mode if you build your own components.

jjcm 3y ago
Do you have an example of something you can’t do in Figma that you’d like to do for web design? 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.
- spacebacon 3y ago
  Figma is “web design” exclusive. Putting yourself in the web design bucket trades creativity for utility. Design snobs that have pushed the envelope for decades (26 years for me) depend on not being in a preconceived bucket to redefine what web design actually is. Figma is great for rapid prototyping but rapid is not a priority when reinventing the web. Most big leaps in design are born from the tension of designer and medium. For example, a designer and the printing press or in our case here the healthy tension between a designer and a developer.

metalrain 3y ago

While I'm happy Figma exposes layout as CSS rules, one does not copy paste styles directly into project. 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.

mercurialsolo 3y ago

This is an outright Zeplin killer. This does make Figma even more enterprise and team first rather than simpler design tools. I would love to see an emergent design tool alternative really which is simpler in its philosophy.

balaji1 3y ago

Framer [1] seems mind-blowing for small product teams. Or at least the idea of it if Framer can be adopted successfully by a small team. I tried it briefly on a small project, it felt powerful, but big disclaimer we never went to "prod" on that project. Also I am not sure about performance, etc. Any thoughts or anecdotes? [1] https://www.framer.com/ https://www.framer.com/

jsncbt 3y ago

Hypothetically speaking, if all designers could code at the level of a Snr Front End Engineer, would Figma exist? 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.

mejutoco 3y ago
I am a software engineer and I still use Figma to be in design mode. Messing around with how a gradient/shadow looks or moving elements around is way quicker graphically than with code. It helps me not default to things that are easy to implement, but might be worse despite of it. Still, I think your approach would work. I would probably find myself sketching on paper now and then in that situation though :)
maigret 3y ago
I don't think so. While there are some scenarios that are better coded (where lots of different paths open up quickly, typically Excel-like), in many cases good designers are incredibly fast with Figma and I know no coder who can be that fast. 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.
- azangru 3y ago
  > It would be very challenging nowadays to both be a great UX designer and be current with the latest CSS evolutions. 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?

_betty_ 3y ago

I see you can start linking things to urls/files, curious as to if this will unlock developers adding more metadata to designs which might eventually be nicely displayed in Figma. 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.

Vinnl 3y ago

I understand that this is attractive for Figma because it broadens their market and allows them to sell developer-specific plans, but honestly, what I need is not so much tools for myself, but for Figma to nudge my designers to make things more easily consumable by engineers. So that means nudging them to specifying a colour and font palette once and defaulting to using and re-using those, with straying from them being an exception. It means getting them to specify how different elements should flow, rather than them all being absolutely positioned at some particular X and Y coordinates. And just in general have them draw the design with tools that work more closely to the way CSS works. I believe penpot.app is supposed to work like this, but unfortunately I haven't been able to try that yet.