[HN Gopher] Making Figma better for developers with Dev Mode
___________________________________________________________________
Making Figma better for developers with Dev Mode
Author : emilsjolander
Score : 347 points
Date : 2023-06-21 16:31 UTC (6 hours ago)
(HTM) web link (www.figma.com)
(TXT) w3m dump (www.figma.com)
| emilsjolander wrote:
| 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!
| sebazzz wrote:
| How does this compare to Zeplin? We currently use this for both
| design commenting by clients but our devs love it too.
| yewenjie wrote:
| How has the release of giant LLMs and other LLM-powered design
| apps influenced your product roadmap in the last couple of
| months?
| kleneway1 wrote:
| 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
| trafnar wrote:
| They bought an AI design tool company today
| https://twitter.com/jsngr/status/1671561341893742592
| uxamanda wrote:
| 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.
| zyang wrote:
| Does figma have an external bug tracker. While developing a
| figma plugin I ran into a CSP issue for loading UI web workers
| as blobs. Not sure if I should go through standard figma
| support channels or is there a dedicated channel for plugin
| developers.
| actuallyakbar wrote:
| Hey, Akbar here (Dev Advocate for Figma). We have the Friends
| of Figma discord that has dedicated channels for plugin
| developers - https://discord.gg/xzQhe2Vcvx. When you join -
| get the @Developers role in #interest-roles and @Developer
| Announcements in # general-roles if you want to talk plugin
| development!
| raphaelschaad wrote:
| Great work!
| emilsjolander wrote:
| Thanks Raphael <3
| beanaroo wrote:
| This looks really awesome. Are there any plans to support teams
| that do not use VS Code or GitHub?
| cbovis wrote:
| As a developer consuming design files in Figma on a regular
| basis something that bugs me often is not being able to drop
| images into comments.
|
| 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?
| megaman821 wrote:
| Is there some way to export Figma's local variables to a CSS
| custom properties?
| actuallyakbar wrote:
| Hey, Akbar here (Dev Advocate for Figma) - variables are
| surfaced in CSS code snippets.
|
| 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!
| ypeterholmes wrote:
| Hi Emil. My question is about the prototyping. The proto
| tooling is improving but still pretty limited. Right now the
| approach seems somewhat disjointed, meaning some interactions
| utilize variants for state change, while others work across
| frames with the "onclick" interaction. But that could get
| really messy as this grows. Question: have you considered using
| a "dynamic panel" approach similar to what Axure does? That
| model was my favorite among the proto leaders.
| welder wrote:
| Myself and a ton of other devs & designers need the ability to
| run plugins without having to select them from a menu first.
| For ex: Run a plugin when a design is opened, or when Figma
| launches.
| Domenic_S wrote:
| Tip to future folks who jump on HN after releasing something:
| don't announce that you're here to answer questions and then
| answer only 2 questions (as of 5 hours after Emil's comment was
| posted).
| novok wrote:
| 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!
| spandrew wrote:
| 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.
| arecurrence wrote:
| 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 wrote:
| 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 wrote:
| 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.
| wdb wrote:
| 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 wrote:
| 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/64523aa4faf4a...
| karaterobot wrote:
| 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.
| pineapple_sauce wrote:
| From the Nim programming language community, this project is this
| feature: https://github.com/treeform/fidget
| csmeder wrote:
| Wow, this is an amazing update!
|
| 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
| bgribble wrote:
| 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.
| Akronymus wrote:
| We use figma quite extensively as a reference for our current
| project. The disgners constantly move stuff around, so the
| links to them, in tasks, break and point to nothing. Which is a
| major pain in the ass indeed.
|
| So yeah, 100% agree that the "big bulletin approach" is a
| negative.
| ShadowBanThis01 wrote:
| And this M.O. would seem to make zero steps toward
| recognizing the tedium of their platform:
|
| "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
| noizejoy wrote:
| I suspect, that the main problem is inconsistency in the
| underlying mental model, because there's multiple individuals
| doing that and/or over longer periods of time.
|
| 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.
| dangom wrote:
| 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 wrote:
| 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.
| zackmorris wrote:
| 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!
| seanthemon wrote:
| Hah, i'll be honest I thought you were kidding about the
| notes.txt - are you following some kind of standard? Or just
| spill everything into one big document?
| jckahn wrote:
| I do something similar and just dump everything into a
| giant chaotic document. It works well because I intuitively
| understand my own personal brand of chaos, so I know how to
| easily find everything.
| nonethewiser wrote:
| > This allows me to work as a 10x or 100x developer
|
| 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?
| sublinear wrote:
| I think they mean 100x better than they'd be without it,
| not 100x better than a "1x developer" (whatever that means
| anyway).
| RussianCow wrote:
| It's still hard to believe that a note-taking trick makes
| you 10-100x better as a dev, for any definition of
| better.
| mattwad wrote:
| a private notes text file is completely different content,
| let alone UX, from a visual board that everyone uses
| susanthenerd wrote:
| Have you ever considered going for Markdown? # is used for
| defining headers in markdown.
| prollings wrote:
| I think they're essentially using "hashtags", so they could
| have many for one note.
| revskill wrote:
| As a MacOS user, zooming on a touchpad is painful.
| RussianCow wrote:
| I'm not sure if this is related to your gripe, but FYI, you
| can use the pinch to zoom gesture on the trackpad in Figma. I
| find that it works quite well.
| obeid wrote:
| Figma remains a vector design tool that can export raster images.
| zui wrote:
| 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 wrote:
| 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.
| 542458 wrote:
| 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.
| geekrax wrote:
| ...which actually feels "not" very Adobe like :)
| pirsquare wrote:
| Webflow need a mode for this. I struggle dealing with "icons"
| over raw code.
| grishka wrote:
| 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(tm) 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.
| roflyear wrote:
| 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?
| kayodelycaon wrote:
| 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 wrote:
| 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 wrote:
| 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.
| andrekandre wrote:
| i would consider even powerpoint lucky compared to an
| excel file with a bunch of images or even the design
| being made out of cells, rows and columns... yes, you
| read that correctly lol.
|
| for all that trouble it still beats getting `design.jpg`
| CSMastermind wrote:
| I'm curious what you'd prefer, a requirements document?
| Powerpoint slides? Photoshop files with a grid layer?
|
| 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.
| jmuguy wrote:
| Yes, and this made me hate Figma. Literally my only
| interactions with it have been getting dropped into some file
| with dozens of screens and maybe if I'm lucky they've zoomed it
| to the thing I'm implementing. I have no idea how its supposed
| to work but that was awful.
| wildrhythms wrote:
| Yes, I find frequently it's hard to know exactly what people
| are linking me to. Usually it's to some arbitrary view in a
| file. Our designers have had to make their own bespoke,
| inconsistent labeling systems (literally dropping text
| elements around the designs to describe them). There needs to
| be a better way.
| gedy wrote:
| What's worse is treating engineers like "just implement the
| mockup _eyeroll_ " but then the logic of the mockup makes no
| sense with real data or product.
|
| 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"
| deckard1 wrote:
| they _always_ use text that is ideally sized in mock-ups but
| completely falls over when real data is used in a responsive
| web app.
|
| 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.
| gedy wrote:
| > responsive web app
|
| 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"_
| cratermoon wrote:
| That's one of the few things done right at my previous
| consulting gig. They were mobile first, and didn't even
| start putting up a desktop web version until they had the
| core functions of mobile working they way they wanted.
| kitsunesoba wrote:
| My favorite is when the designer doesn't have a good idea of
| what's feasible to implement on the target platform and just
| designs whatever, leading to a boatload wasted time.
|
| 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.
| progmetaldev wrote:
| One of my favorites was when a designer decided to use a
| grid system completely independent of what was going to be
| used in development. No time left to redesign, so the
| designers had to live with whatever the devs could make
| happen in the time allotted.
| birthdaywizard wrote:
| I feel like that might be an organizational problem. At my
| company the designers will present their figma designs to
| engineering and we'll have a meeting to go through them and
| bring up concerns with exactly those sorts of issues e.g.
| "This list may actually have hundreds of entries in practice,
| are bullet points still right?". Then we iterate.
| roflyear wrote:
| Wait, your product people talk to devs?
|
| /s (at my previous company they did not ... lol!)
| progmetaldev wrote:
| Took me years to finally push this culture. The designers
| no longer try to get away with designs that are too
| difficult (read: pricey) to achieve, and developers have to
| keep their skills sharp resulting in less blame and a more
| competent skillset. Then the designers and developers who
| thought it was part of the culture to never work together
| nicely were immediately noticed and shown the door.
| roflyear wrote:
| I agree with these points. Someone mentioned the PPT method -
| and I like it for your reasons! It's like a wireframe.
| devmor wrote:
| Yes, I had a freelance client for a website like this somewhat
| recently. The best part was whenever we had to spend extra time
| to make something look right, I was told that "it should be
| fast and easy, just follow the figma exactly" - which of
| course, did not work, because css does not render in browsers
| the way the figma designer looks.
| obeid wrote:
| 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 wrote:
| 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.
| cratermoon wrote:
| > Has anyone else
|
| 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.
| karaterobot wrote:
| 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 wrote:
| PM for variables here as well! Happy to answer any q's you have
| regarding variables and conditional logic!
| karaterobot wrote:
| 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.
| jhatemyjob wrote:
| 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
| 1023bytes wrote:
| Videos on the page are not loading for me, seeing a bunch of
| "Minified React errors" in the console
| Vorh wrote:
| 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.
| emilsjolander wrote:
| The team is aware and looking into it, thanks for letting us
| know!
| nocontextpls wrote:
| [dead]
| robertoandred wrote:
| 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.
| shlubbert wrote:
| I realize you specified "built-in" but just in case you weren't
| aware, plugins exist to download ("Export Original Images") and
| compress ("Downsize") images in Figma, and both work well.
| KnobbleMcKnees wrote:
| I miss Sketch. Something I thought I'd never say
| Andrew_nenakhov wrote:
| Why? It is still around and it is better than it ever was.
| KnobbleMcKnees wrote:
| It's around but has been edged out by Figma in many
| workplaces, such as mine.
| a1o wrote:
| I don't think one can own a sketch license anymore can? I
| believe they switched for a subscription model.
| Andrew_nenakhov wrote:
| 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/
| yewenjie wrote:
| I hate when figma just always gives me CSS for absolute
| positioning. Is there any way around that?
| replygirl wrote:
| Supposedly the codegen is more useful now, erring on the side
| of using flex
| emilsjolander wrote:
| 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 :)
| pininja wrote:
| Super excited for the vscode plug-in with code autocomplete
| coming from the deisgn file I've opened up!
| seanwilson wrote:
| I found this link explains what it is better:
|
| https://www.figma.com/dev-mode/
| throwaway20222 wrote:
| 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.
| pininja wrote:
| 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!
| pcurve wrote:
| 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.
| riedel wrote:
| > though enterable input fields would be nice. So funny you say
| this. I could actually not believe that you really need to use
| another tool like protopie on top of figma if you need that
| simple functionality eg. for a mock-up.
| jozzy-james wrote:
| > 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 wrote:
| "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 wrote:
| 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.
| dsgnr wrote:
| Right now I can let devs with free accounts view files with the
| inspect tab and leave comments. If it works like that it
| shouldnt increase costs.
| Xt-6 wrote:
| It will require a license
| https://twitter.com/Chris_Smeder/status/1671566245190303744
| minorninth wrote:
| If I understand correctly dev mode access is $25/month
| instead of $45/month for a designer.
|
| That doesn't sound like a bad deal to me. They're not
| taking away anything from free mode.
| [deleted]
| jononomo wrote:
| How do you differentiate between a developer and an engineer?
| samstave wrote:
| Networking.
|
| Send the ENG a SYN packet, and if they ACK They are an
| engineer... if they /dev/null your packet, its a DEV.
| karaterobot wrote:
| Fairly sure they mistyped, and "engineers" should be
| "designers". Otherwise that is indeed a very confusing
| statement.
|
| 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.
| pcurve wrote:
| Yup, I meant to say there are more engineers than
| designers. Figma was great because we didn't have to worry
| about seat count cost for engineers.
| dahwolf wrote:
| I know quite a lot of non-technical designers and many aren't
| too happy about what one might call design engineering.
|
| Design systems, tokens, modules, over the top
| consistency/reuse, the programmatic approach to design is
| experienced by some as a major buzzkill.
| pcurve wrote:
| One of the lead designers on my team called Figma "production
| tool" when I rolled it out to the org a few years ago (and
| replaced Sketch)
|
| 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
| forkbomb123 wrote:
| I doubt it's adobe flexing its muscle, afaik, the DOJ is still
| looking into the Adobe/Figma merger. Currently Figma and Adobe
| are operating independently.
| steveklabnik wrote:
| It's US, British, and EU antitrust regulators, yes.
| mortenjorck wrote:
| One under-appreciated effect of the announcement last year
| has been the attention and resources that have been directed
| toward Figma's upstart, open-source competitor Penpot. I
| tried Penpot back in the fall, and while it was impressive
| for an open-source tool, I definitely didn't see it
| challenging Figma anytime soon.
|
| 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.
| pcurve wrote:
| I love Penpot!!!
|
| They had Wrap before Figma. They have Flex and Grid!
|
| https://www.youtube.com/watch?v=VchMDD0PrZE
| Kiro wrote:
| 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.
| parentheses wrote:
| Timed perfectly with their conference. Bravo!
| cratermoon wrote:
| 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 wrote:
| Hopefully for their sake not too much. It's still in beta
| with full launch in 2024.
| view wrote:
| A plugin for React Native would be nice!
| emilsjolander wrote:
| 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 wrote:
| 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
| theultdev wrote:
| Figma -> React Native*
|
| Can't seem to edit my post.
|
| Feedback welcome btw.
| ryanSrich wrote:
| 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.
| pininja wrote:
| Maybe the vscode plug-in can autocomplete an SVG? That'd be
| helpful.. setting up every export takes a lot of time.
| emilsjolander wrote:
| 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 :)
| wetpaws wrote:
| [dead]
| JusticeJuice wrote:
| 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.
| pelagic_sky wrote:
| As a designer, all my icons are symbols and you can find the
| symbol artboard on another page with all the icons sized
| consistently with consistent naming conventions. You can select
| all and export as you please. Nothing drives me crazier than
| icons that are not properly formatted in both size and name.
| uxamanda wrote:
| 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.
| [deleted]
| Destiner wrote:
| Or even better, cmd + /, type "svg", press enter, done
| uxamanda wrote:
| Excellent! Thanks for the tip. I always forget that quick
| menu is there.
| toddmorey wrote:
| Hero!
| kijin wrote:
| I would also love to be able to select an arbitrary set of
| components and export them as a single SVG.
|
| 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.
| [deleted]
| rco8786 wrote:
| Is there like a TLDR or something? This is an enormous amount of
| text.
| shaan7 wrote:
| And a weird looking mouse cursor
___________________________________________________________________
(page generated 2023-06-21 23:00 UTC)