Tweets
How Interactive Components were built
Sho Kuwamoto on why it took so long to build and how other smaller features fit in a bigger vision.
I was kind of busy on launch day so I'm a little late to this tweet, but I wanted to share some thoughts on all the prototyping improvements we announced yesterday.https://t.co/DuPbvh3bHx
— Sho Kuwamoto (@skuwamoto) October 28, 2021
1/n
Designing Interactive Components
A first-hand perspective by Nikolas Klein on designing and building Interactive Components.
I dug through some of my old notebooks and found some old sketches that look super similar to interactive components today.
— Niko (@nikolasklein) October 26, 2021
Remember this was while working with @skuwamoto on how we want to support Overlays in Figma's prototyping feature. pic.twitter.com/7e9JWdXrQF
Design tools should uncover ideas you didn’t know you could have
A few more fantastic Interactive Components usage examples from Nikolas Klein.
Design tools are not just there to let you 'do your job'.
— Niko (@nikolasklein) October 26, 2021
Design tools should allow you to venture into the unknown and uncover ideas you didn't even know you could have.
Bravo Studio 3.0
Bravo Studio is a platform for building mobile apps from Figma prototypes without writing code. The new version adds a whole new set of functionalities. See also their new demo video.
The future of no-code is here: Meet Bravo 3.0 🙌
— Bravo Studio 👏 (@Bravostudioapp) October 5, 2021
We’ve revamped Bravo Studio, and we’re thrilled to announce Bravo 3.0 with a whole new set of functionalities.https://t.co/VjABPUAASA
Naming arrow Variants
Bonnie Kate Wolf suggests using Unicode emojis in front of the variant name for a quick preview.
This is an amazing @figmadesign hack from @mattmatize for naming arrow variants. Add the unicode emoji in front of the variant name so folks can quickly see what they are going to be placing without reading. pic.twitter.com/JNEb3tdaGQ
— Bonnie Kate Werewolf (@bonniekatewolf) October 8, 2021
System for keeping a file in order
Anton Lovchikov shares his approach to structuring pages in the Figma file.
It's very difficult keeping a Figma file in order without a system while working in iterations. Here is my system which works pretty well so far.
— Anton Lovchikov (@antiflasher) October 13, 2021
I use functional structuring for pages in the file. Each isolated functionality has its own page with all related mockups. pic.twitter.com/tcTS2I0Eu1
Write changelogs
Jan Toman (see his Schema talk above) with a few recommendations for design system maintainers.
A simple tip for UI kit maintainers in @figmadesign:
— Jan Toman (@HonzaTmn) October 3, 2021
- Release changes in smaller batches
- Add a detailed description of what was changed
- (Optional) Reassure consumers that nothing will break
Write changelogs. Small things like this matter. pic.twitter.com/J6kA16pj1f
Match Variant properties & names with what’s reflected in the code
Joey Banks with an excellent suggestion on how to bring designers and engineers closer.
When it comes to working on design systems, one thing I've learned is how much of a positive difference it can make to match variant properties & names in Figma with what's reflected in code. Any opportunity to bring designers & engineers closer always feels like such a big win. pic.twitter.com/BPsr9zG1Nf
— Joey Banks (@joeyabanks) October 1, 2021
A recent trick/tip that you share with everyone
As always, Rogie’s tweets gather a lot of fantastic replies.
What's a recent @figmadesign trick/tip you've found out that you share with everyone?
— ˗ˏˋrawr-gieˎˊ (@rogie) October 13, 2021
Design tools: usage vs. satisfaction
According to the results of Jamstack Community Survey 2021, 60% of respondents use Figma, and its satisfaction score is 8.8. Look at the chart to see how incredible this score is when compared to other design tools. There is nothing like this in any other category either (except for IDEs, but that’s not a specific tool.)
According to the results of Jamstack Community Survey 2021, @figmadesign is basically in another league in terms of usage and satisfaction, wow
— Aarón García ⚡️ (@aarongarciah) October 7, 2021
Source https://t.co/qPqS8cjCei pic.twitter.com/4PeAAB5REL
Backstage at Schema
Pretty cool to see the backstage of the production. Schema wasn’t a typical Zoom conference.
A quick look backstage at @figmadesign’s #Schema2021 conference.
— Sho Kuwamoto (@skuwamoto) October 6, 2021
Can’t wait until tomorrow!! pic.twitter.com/qcsn32sT5m
Tips shared during Schema
Patrick Banta compiled a list of design system resources recommended during Schema.
If anyone wanted all of the links to the tips shared out during @figmadesign #Schema2021 yesterday, I've compiled the list below - hopefully I didn't miss anything! 🧵
— Patrick Banta (@pbanta) October 8, 2021
Video recordings from Schema
All talks are already available in Schema’s event account. (NB: if you didn’t attend the conference, you’d need to create an account first.) Alternatively, I’ll share the direct YouTube links below with some relevant resources.
Couldn’t make it to #Schema2021 or just want to relive some of your favorite moments?
— Figma (@figmadesign) October 11, 2021
Here’s how you can watch every talk from last week’s conference. https://t.co/kvSXGackkd pic.twitter.com/FToqWm98Qt
The challenges of building branching
Figma’s Director of Product Sho Kuwamoto shares some of the challenges of building branching.
I couldn't be more excited about a feature release than this one.
— Sho Kuwamoto (@skuwamoto) October 12, 2021
Combining branching with realtime multiplayer was a huge technical and UX challenge, and the team has been relentless in their pursuit of a seamless solution.
1/n https://t.co/DH0HEq74Nr
Keep an eye on your resources
Search for “Resource Use” in Quick Action (⌘/) menu to show the status of resources in your file.
Struggling with performance in @figmadesign?
— Denislav Jeliazkov (@DenisJeliazkov) September 24, 2021
By hitting CMD + / and searching for "Resource Use" you can see what is the status of resources in your Figma file. pic.twitter.com/zd7xzeweLU
Fun effects with boolean groups
Boolean groups + vector networks + rounded corners = magic! Don’t miss Miguel’s original thread, and check out where they brought it in the end 🤯
Playing with @figmadesign with @Miggi https://t.co/dOW7sOb4w1 pic.twitter.com/P9xtQQxg1x
— ˗ˏˋrawr-gieˎˊ (@rogie) September 20, 2021
Percent perfect gradient styles
While this is still a hack, I didn’t realize that a big nudge value affects gradient stops. Good to know!
New Figma Tip: CSS ready, percent perfect gradient styles in @figmadesign.
— Miggs in Space (@miggi) September 28, 2021
(Me testing Figma tip on Twitter with @loom.)
https://t.co/t2eHeObDMQ
Baseline grid
Miguel with a tip on setting up a lightweight baseline grid with Layout Grid.
If you want to make a baseline grid in @figmadesign, set the row count to auto and the type to top, you can also set the gutter to zero, or match your baseline value.
— Miggs in Space (@miggi) September 23, 2021
The 'auto' count will grow the rows to fit your frame. pic.twitter.com/5UwBBtg3eb
10 keys to nailing responsive design
Ridd shares great tips on how to make your designs more developer-friendly.
10 keys to nailing responsive design in @figmadesign
— Ridd 🏛 (@Ridderingand) September 25, 2021
Aka: How to become your engineering team's favorite designer 👇 pic.twitter.com/VLJwlEhI9j
It’s time to fix “mixed” values for Auto Layout padding
Mariz brings a great point — the current implementation not only hides the values but also makes you click on another UI control to change them.
Hey @figmadesign, it is time to fix this "mixed" values for autolayout padding... just keep the values with commas or give us an editor for multiple values like you already have for border radius. pic.twitter.com/ISmgwxs6qi
— Mariz (@MarizMelo) September 29, 2021