Figma

  • Started
  • Last post
  • 59 Responses
  • Al_dizzle

    Not sure how many of you are using Figma, but I know a lot more teams are adopting it as the go to tool.

    I'm building a new design team and because were an early stage startup, Im considering going full Figma since it seems to encompass a lot of the features that Sketch +Invision/craft+Zepplin used to provide.

    The only thing that seems to be missing is version control.

    Curious if any of you old heads are using Figma, and whats your experience with it when it comes to version control/branching.

  • akiersky0

    Not quite a full git-style solution like Abstract, but looks like it does have some basic version control built in: https://help.figma.com/hc/en-us/…

    Really wish our team had switched to Figma over the cobbled together Sketch+Cloud+Zeplin+Invision+Abs... ... so many places to update everything and it all half-works-together

  • Al_dizzle0

    ^ yeah they have version history... but not quite version control.

    I can probably get away with not having robust version control in the first 3 or 4 months... but im worried about future state... if I get the team to 4 + people. Is updating a master design system going to be a manual process?

  • nb0

    Have you looked at Figma Master Components? And Libraries?

    I ask because I'm not sure what you meant by "manual process"

  • utopian0

    Figma vs Sketch vs Adobe XD: Which Is the Better Design Tool?
    https://www.codeinwp.com/blog/fi…

  • Al_dizzle0

    ^
    Well even with master components and libraries, there needs to be some governance around those.

    Designers need to be able to play with those without fear of effecting all the other dependencies. Which is where automated branching comes in handy.

    You could manually duplicate artboards for that type of exploration, but eventually you'll have to take the new and approved components back to the original "master" library for everyone to use. And that seems like a lot of manual work if you have multiple contributors making changes on the fly.

  • zarkonite0

    You can use draft mode to fiddle around and then update the components in your team's assets when you're ready. All of it is recorded in the version history. What exactly are you missing as a feature?

    • are personal drafts visible to other team members?Al_dizzle
    • Yup, that's what they made them for. Before that you had to create a seperate page or project and it was a mess.zarkonite
    • err that should be NO the team can't see them.zarkonite
  • Al_dizzle0

    ^ that could work actually...

    ...Im just used to using abstract, I built my last team's workflow off of that... so Im trying to wrap my head around a new way of controlling the process.

    • It looks like abstract is smoother for branching out a design, it's closer to a dev environment. You could checkout invision's DSM too, it's pretty solid.zarkonite
    • Figma is constantly evolving too so I'm sure they'll catch up to abstract in a couple of versions.zarkonite
  • maquito5

    Ok, so after 14 years of Adobe, I’ve had one month using Figma as the one and only tool onboarding my new position (Sr. Product Designer).

    During this process, I felt just a bit nostalgic with photography as a key component of my design thinking. However, I must admit Figma is one of the tightest design tools I’ve ever used. Sssso intuitive, like, damn! Also, the features re: components, variables, etc., is insane.

    I think they could really enhance their product with some pixel-editing features; but I’ve been checking on their plug-ins daily, and they are absolutely insane.

    Never thought I would be able to make such a big trip re: my MAIN workspace at my age. Stoked.

  • zarkonite1

    A single Mario Bros screen made in Figma.
    (Press spacebar to jump)

    https://www.figma.com/community/…

  • kaiyohtee1

    Finally started a gig where I too get to use Figma. It's nice to feel excited about design again.

  • oey_oey0

    Ma che Fig(m)a

  • whatthefunk0

    Question about presentations.

    Figma is great for UX & Design folks as well as devs, but I'm experiencing some challenges presenting with product folks and stakeholders. Everyone loves the presentation layer of Invision (it's like a PDF, can toggle back and forth between screens, and it's easier for those who just want to see all the screens in a flow view compared to either a prototype or a link so some random collection of screens) but there's no Invision for Figma.

    I've read that some agencies/companies introduced a presentation layer that is a page within the Figma file either exported as a PDF per rounds of feedback including components of all app screens or shared directly. This way design/code can still collaborate in the 'messy' area, but a cleaner presentation can be exported for stakeholders.

    Any thoughts on how to do this for a large app project? I'm describing some projects that have ~30-40 screens and trying to get stakeholders to get into a figma screen is proving difficult - thoughts? Thanks

    • Don't you create a final prototype in Figma for the deck?
      OR you can easily export a .PDF and present that...
      grafician
    • Are you saying Figma's Presentation View doesn't cut it? I find it almost identical to Invision's minus the ability to pull up that drawer that shows all screenduckseason
    • You can also create multiple separate flows which can be toggled between if you need to focus on a specific set of actions.duckseason
    • https://www.figma.co…
      This looks like the way to do it, no?
      whatthefunk
  • jaylarson0

    Hi QBN, I need your help!

    I have a frame that I want to function as a live mockup. Inside that frame I want to have fields where I can enter text and see it render live 1:1 in a mockup.

    I can make this work using Components and Instances—UNTIL I want to make the whole frame a Master Component itself (like a master slide). These form fields functioning as Master Components (MC) to populate Instances in the mockup.

    What I've seen is that I can't have MCs nested within other MCs. And when I duplicate MCs they become Instances and my functionality breaks.

    Is there another way I can do this? Maybe with variants? Plugins (although I'm concerned they may break)? Am I just missing something basic?

    • Figma app or Figma mirror could work and then you don’t really need the master components at all...nb
    • Or, don’t worry about everything being a component. Just make a master component out of your parent frame, and put an instance on the device.nb
    • I’m not sure exactly what you’re trying to do but it seems very easynb
  • duckseason1

    @jay

    Let me know if I'm understanding this correctly...
    You want the 4 frames on the left (body, graphic, URL, CTA) to populate the mockup on the right, and you want to be able to edit those 4 frames and have the updates reflect in the mockup?

    If so, you need to think of Main Components as the source of truth in your designs. Meaning that you typically wont be building with them directly, rather you set them up and use the instances of each to construct the larger whole. This way if you reuse your CTA in 50 places, but want to change the font, color, corner radius etc, you can do it once on the Main Component and see the changes reflected in all 50 places at once.

    I took a stab at rebuilding what I *think* you're trying to achieve. I setup individual components for each part. And then combined the instances of those parts into a new component, which I then dropped into a mock-up. Red arrows show instances being used.

    If I missed the mark, ignore me, but happy to continue and try to help you figure it out if needed :D

  • jaylarson0

    Yep, that's exactly how I have it set up and it works. (and thank you for your effort!, srsly, i had a laugh a yr copy!)

    My problem is I want to have this on a on another frame to function as a template so designers can just create a new file, pull in this as one large component, and save it out without having to place any fields—they're already on a page—and just enter copy.

    When I try and put these on a separate frame or separate out, The functionality breaks and I need to manually reconnect the components and instances.

    I'm still wrapping my head around in Figma... I really appreciate all the comments, thanks guys!

    • sauce:
      https://www.figma.co…
      jaylarson
    • Try using a design library? Be sure to drag instances from the assets panelnb
    • And if you’re trying to move a master component you need to CUT+paste. Copy breaks the connectionnb
    • Yeah, if you wanna use across files, publish the components to your team libraryduckseason
  • duckseason1

    My company does something sorta similar to streamline creation of our more generic social/banner ads.

    We set up our base assets each quarter and are able to quickly swap out messaging by entering it into the Main Component and having it populate a couple dozen sizes automatically. From there just export and reset.


    • itsn't all this component stuff the same as symbols in Flash back in the day? I'd make empty text symbols, that then read data to be populated.shapesalad
    • If Figma had AS1, or some ability to code and export to web... would be nice, a step back perhaps to flash days, but nice.shapesalad
    • < Thanks, this is very similar to what we want to do. Ideally my team wants to NOT have to reset, but that may be the option. to make this work.jaylarson
    • Yeah, components are essentially the same idea as Symbols. There is an API that some folks have done some interesting stuff with.duckseason
    • eg. Uber used it to create an internal web repo for assets that folks can access that uses the Figma file as its source.duckseason
  • bocadeets0

    Old-school designer here....Do you guys use Figma only for website and app designs and prototyping? Or do you use it for everything (social media graphics, layouts, pitch decks, etc) nowadays?

    • For me, just web/app products mostly.nb
    • A jr designer did a huge digital book in Figma & then gave it to me: “How do we make this a physical book?” Kids these days.nb
    • Only digital projects.grafician
    • and yes, decks and social media, ads, all includedgrafician
    • Thanks! lol @ nb.bocadeets
  • duckseason1

    @boca

    We're using it more and more as our tool for all things digital – web, product, social, decks, and even white boarding. Illustrations are still mostly done in AI and dropped in; however, Figma is capable of handling it should you wanna put it the time to adjust your workflow. It's got a free "starter" version if you're ever interested inn kicking the tires.


    • Seeing this...I kinda miss Freehand :/grafician
    • Interesting, just trying to figure out why it might make sense (as a freelancer) to fit it into my workflow. I've recently abandoned Adobe for Affinitybocadeets
    • And do most stuff in Affinity Publisher and Designer right now. Mostly layouts for print and social media stuff.bocadeets
    • nice.utopian
    • @boca actually Designer is very very good for this kind of illustrations with tons of layers and effects
      and being optimised for Mac, runs very smoothly too
      grafician
    • but I guess ppl do this kind of illustrations in Figma cuz it's free and cuz they can :)grafician
  • bocadeets0

    Cool to see how everyone is using it (for stuff I never even imagined, like illustration below)

  • bocadeets0

    Is it better to use the web version or the app? or does it not matter at all?

    • There are a couple minor features in the desktop app that don’t show up in the browser. But mostly it doesn’t matter.nb
    • The desktop app is basically a browser they made to wrap itnb
    • desktop version is bettergrafician
    • I prefer the desktop. I use the track pad to move around and on the browser some gestures are the same as the back button.Chimp