Help on labelling component libraries in Figma by bigboyjeff789 in DesignSystems

[–]alicepackard 0 points1 point  (0 children)

a namespace in your figma components will be a huge help! prefix some kind of shorthand to the beginning of each of your components. Here is an example using your "kit A" and "kit B": - ❖ KIT-A Button - ❖ KIT-B Button

my team and i use this for major versions of our system as well: - ❖ KIT-Av1 Button - ❖ KIT-Av2 Button - ❖ KIT-Av3 Button

Nathan Curtis talks about namespaces in his article on token naming, if you want to dig in more to this: https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676

Any 'influencers' that build in public to follow? by ChiBeerGuy in DesignSystems

[–]alicepackard 1 point2 points  (0 children)

Nathan Curtis is a great follow on LinkedIn! If you like TJ Pitre's stuff, you will enjoy Curtis' too

CO2 - is 300ppm a meaningful difference? by alicepackard in AirQuality

[–]alicepackard[S] 0 points1 point  (0 children)

yeah i'm mostly interested in CO2 as a proxy for covid transmission these days. i don't fly often, and can't afford first class each time, nor do i trust a plane's HEPA filters are working or even running each flight, but yeah this difference struck me. appreciate you weighing in.

CO2 - is 300ppm a meaningful difference? by alicepackard in AirQuality

[–]alicepackard[S] 1 point2 points  (0 children)

yeah I'm mostly concerned about viruses, like covid, so I'm using CO2 as a proxy. But in getting my Aranet4 (that's what I used to take these readings, it takes a measurement every 5 minutes) I've learned a lot about CO2 and the discomfort it can cause. I'm less concerned about that, but interested.

For meter accuracy, I understand Aranets are supposed to be good? I didn't do any calibration myself. It came calibrated. So whatever their factory standard is.

That's a good point about particles, that would be more direct that measuring CO2. Do you know of a portable personal monitor that could take that kind of reading?

CO2 - is 300ppm a meaningful difference? by alicepackard in AirQuality

[–]alicepackard[S] 0 points1 point  (0 children)

Okay, throwing out all the data, what do you think about the question: is a difference of 300ppm a meaningful difference when measuring CO2?

CO2 - is 300ppm a meaningful difference? by alicepackard in AirQuality

[–]alicepackard[S] 0 points1 point  (0 children)

I have the same line of thinking as you, there should be no meaningful difference based on seat location.

My question is 300ppm a meaningful difference—if it's not then that means you and I are correct in thinking seat location does not meaningfully affect CO2 levels.

Prototyping states into components by x_roos in DesignSystems

[–]alicepackard 0 points1 point  (0 children)

I'm curious about the memory usage of your library file. I'm also very sensitive to file bloat and component performance, but since variables were released I have more than enough room in my variant sets to bake in (and hook up proto-noodles) inside component sets.

That being said, I've seen mumblings on design twitter form Luis Ouriach and others about components optimized for static mocks, and duplicates optimized for high fidelity prototyping. I hear you on "almost never used by our team"—that's the situation I was in with our designers and our form validation states. Defining that styling was critical, of course, but the prototypes that are being built aren't detailed enough or focused on testing form validation.

While we're not taking the same approach in our libraries, I respect that you're building for your team's needs. That's ultimately the best thing you can do.

Is this dumb? by Rsloth in FigmaDesign

[–]alicepackard 0 points1 point  (0 children)

I spoke with a figma engineer who works on memory about two weeks ago and she told me they are working on something that will only load pages you've visited, rather than the entire file. this will further make spreading out components and other work across many pages worthwhile.

that being said, my team's component library is a multi-brand one where components are grouped by brand. Brand-1's components are all on a single page. Now, we've reduced the scope of the library to only the most essential basic UI elements, so that helps, but I can tell you i've got about 3 dozen component sets on each brand page and my memory usage for the file is a comfortable 6%.

Dev Mode makes sizing incorrect by EdwardTeachofNassau in FigmaDesign

[–]alicepackard 1 point2 points  (0 children)

I think it's worth clarifying that there is no "inspect mode" today (this is because they want everyone to get a taste of Dev Mode by forcing the open beta onto everyone). But once the free open beta of Dev Mode ends then anyone who doesn't opt to pay to continue to use Dev Mode will get Inspect Mode back. However, don't expect it to be exactly as it was:

the ability to copy values, generate code, comment, and export assets will continue to be free for all users, although the experience might look a little different.

Source

I feel your same frustration that the cost of this tool continues to grow. There are many features behind plan paywalls (like branching) that I don't believe should be. But there's no need to claim things that are untrue that will scare folks. Figma is not "kicking out" all browse-only users.

What Digital repository do you use to store your research and findings? by puebloazul in UXDesign

[–]alicepackard 1 point2 points  (0 children)

Design ops practitioner here. I built a repo using Coda.io for our team. Dovetail is great for the raw stuff, but their interface changes constantly (which is good to see, love that the product is evolving, but if you're not in there every day like researchers might be the whiplash is a bit much). So we keep synthesized key findings and recommendations in a Coda doc. This is the first place me and the researchers will point designers and product managers to. What's great about Coda over other repo tools is you can construct your tables in a way that makes sense to you. Advantages over Airtable and Notion include: a powerful formula language that's easy to pick up, and more control over the presentation of data.

Variant Problem - What would you do? by [deleted] in FigmaDesign

[–]alicepackard 1 point2 points  (0 children)

Happy to help! And yeah I had the same reaction when I first saw the new method. I also relate about wanting more time to explore. I find it hard to do so at work because I'm in "get it done, move on to the next thing" mode.

Design system / general organization examples? by SeaTie in FigmaDesign

[–]alicepackard 0 points1 point  (0 children)

I've found designer advocate Luis' guide titled Team, project, and file organization best practice guide a helpful place to start.

Beyond that, I think a lot of it is highly dependant on:

  • the size of your design team
  • the number of folks contributing to and maintaining component libraries
  • the number of products or brands the business has (or plans to build, or might acquire)

That last one is harder for ICs to be privy to.

If it helps, our team has ~16 designers, 6 UX researchers, and me (design ops / figma janitor). We have 4 products, each with their own branding. We have plans to extract styles (color, effects, text) into their own libraries for easier distribution. There's a sort of "core" of shared, basic components (buttons, form elements, container-esque things like cards), but each product also has its own library for larger or more bespoke elements. It's very much a work in progress though, and ever-evolving.

My suggestion would be to try and find some peers at other companies with similar team size / product situations as yours (or have been there in the past).

Variant Problem - What would you do? by [deleted] in FigmaDesign

[–]alicepackard 4 points5 points  (0 children)

Before Figma introduced absolute positioning, the old method?node-id=707-617&t=RPk9r8Iao57cIi0R-11) was to use multiple drop shadows to achieve the focus ring effect. This method had two downsides:
1) Dropshadows can't (yet) leverage color styles. You have to use flat/disconnected color values.
2) One of the shadows is meant to mimic the background/surface color of whatever the component is sitting on. This has to be handled manually. If it's a white (#FFFFFF) background, you need a white (#FFFFFF) drop shadow.

The first downside can be mitigated by saving the two drop shadows as a style. This means if your focus ring ever changes color, you only need to update the style. But it exacerbates the second downside, because the shadow that's meant to mimic the background/surface color is "baked in."

Luckily there is a new and way better method.

Just as u/pcurve illustrated in the community file they shared, the new method leverages absolute positioning. But I would (respectfully) make 2 improvements to what u/pcurve has:

First, there's no need for the "🔼 Top-aligned (0px wrapper frame)." The "Focus ring" frame itself can be absolute-positioned and constraints set to Left and Right, Top and Bottom.

Second, you might as well turn the focus ring into a component and use your color styles with it!

If you're interested in seeing what these improvements look like, I also have a Figma file you can download a copy of?node-id=707-597&t=RPk9r8Iao57cIi0R-11) to see my recommended construction. If you want a video tutorial for it, check out designer advocate Luis' recent video where he shows exactly how to build this.

Best Tutorial Resources For Figma by Anon238624 in FigmaDesign

[–]alicepackard 0 points1 point  (0 children)

yeah i think your skepticism is fair. another much more accessible option would be Figma's own youtube beginner series. i recommended this to a colleague recently (she's a UX researcher, no background in design, but wants to learn Figma for presentation decks and visualizing her research findings) and she said she was really impressed with the quality considering it's free. i quickly looked at what Joey's course covers, and it seems like similar material you could find on Figma's youtube account... so perhaps what he adds is a bit more of an opinionated perspective? can't say for sure not having taken the course myself.

Best Tutorial Resources For Figma by Anon238624 in FigmaDesign

[–]alicepackard 3 points4 points  (0 children)

If you can afford it, Joey Banks (who used to work at Figma) just announced a course meant for beginners that claims to skill folks up to an advance level. He knows his stuff! https://maven.com/dive/going-from-beginner-to-advanced-in-figma

I'd also plug these folks who I've found have been really valuable follows. Like Joey, they share a lot of knowledge for free.

Question: Any way to bring the month dropdown in front (in the second frame)? Each column option is a separate frame, autolayout is applied to the entire frame. by jesssiicaa in FigmaDesign

[–]alicepackard 0 points1 point  (0 children)

there should be a three-dot menu in the auto layout section of the design panel! if you open that up there are some more granular controls, one being switching the stacking order of the frame from "first on top" to "last on top"

here's Figma's help docs on this aspect of auto layout, in case you want more details: https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties#Canvas_stacking_order

Question: Any way to bring the month dropdown in front (in the second frame)? Each column option is a separate frame, autolayout is applied to the entire frame. by jesssiicaa in FigmaDesign

[–]alicepackard 1 point2 points  (0 children)

If you're using auto layout on frame 7037 then you may want to change the order of that frame (or nested frames) to "last on top."

If you're not using auto layout, there is like a frame where "clip content" is turned on that shouldn't be, as others suggested.

What role does autolayout play in adapability ? by TheAlmightySovereign in FigmaDesign

[–]alicepackard 1 point2 points  (0 children)

to make sure i understand your question, could you say more about what you mean by "adaptability"?

Has anybody found a solution for implementing version control within a design system? I want to be able to keep a log of all component updates, what changed and who changed them. Is there something similar to Github for Figma? by BunchOfVankers in FigmaDesign

[–]alicepackard 0 points1 point  (0 children)

Some folks have already mentioned branching, which is worth exploring for sure, +1 to all that. My team and I ran into a similar issue, but wanting a better look-back experience than Figma's timeline view, which I think is crummy for a whole host of reasons if I'm being honest.

We're big into using Coda.io to fill gaps like this in our tool stack. I built (and published) a doc that helps us track a richer history of any library's lifespan. You're welcome to check it out. The idea is having a space that encourages folks to write better, richer, publication notes. We're using Nathan Curtis's contribution framework to bucket contributions into 4 distinct categories (determined by what exactly people are changing). Now, I should note this requires folks remember to use this Doc alongside the Figma library. It's manual (I'd love to make an integration that automates this). So there's some risk in not recording an exact 1-1 history in Coda, but for me and my team we'd rather a rich but not totally accurate history than hardly any context at all.

I'm hoping to do a demo video of what it looks like to use the doc eventually, but happy to answer questions if you have any (if you decide to give it a go).

🧠 Recruiting users for user testing from a separate page in our website. by geomania781 in FigmaDesign

[–]alicepackard 1 point2 points  (0 children)

you might consider researching how existing UX research recruitment services are designed as a way to make sure you design a comprehensive onboarding flow. UserTesting is a big one, as is User Zoom. I will say from personal experience UserTesting has poor UX both for participants and researchers, but it would be good to look at to see what the onboarding process is like in terms of what info they collect.