Skip to main content
Solved

πŸ”₯ Biscuit's Figma Design Challenge S02


Mr.Biscuit

πŸ‘‹ Welcome to Biscuit Design Challenge Season #2!

It has been some time since the release of Auto-layout version 3, and I am sure you all are pretty familiar with it and want to try out its limits.

Well, today, I have four practical scenarios for you to tackle. All of which are frequent use cases from my personal experience. Each challenge has specific criteria you need to meet to succeed. Beyond that, you can design them however you want. There is also a video example for each challenge showcasing my best implementation for them so far, but yours can be utterly different as long as it solves the same problem.

These challenges are meant to improve your Figma skills, learn from other lovely Figmates and grow together as a community. No code or plugin, or external software is required for any of these challenges.

How to participate?

Please respond with a video recording of your best practices to each challenge; they can be incremental as you will get more inspiration the more you try, which results in better implementation.

Give it your best shot and see what happens, and above all, let’s get our hands dirty and have fun. πŸ₯°

This challenge will result at the end of March, and hopefully, by then, the top 5 participants will be announced here, and the best implementation for each challenge will be forever memorialized.

Challenge #1: Carousel Infinito

Let’s start with something simple: An infinitely looping carousel, typically used as banner imagery on websites and mobile.

Success:

  • Never runs out of items to display (bidirectional infinite loop)
  • Users can flip through each item with a swipe gesture or click
  • Editable images and text contents
  • Aesthetically pleasing.

Exceed Expectations(Critical Success):

  • Has clickable slick dots along with swipe gestures.
  • Adjustable width and height.
  • Portable and extendible, and can be used anywhere (easy to use for other designers)

Challenge #2: Inline Tags

A block of text with inline trailing tags.

Success:

  • Tags always follows the last line of text.
  • Users can edit the text and tags reposition themselves accordingly on the fly.

Exceed Expectations(Critical Success):

  • Adjustable width and height.
  • Portable and extendible, and can be used anywhere (easy to use for other designers)
  • Controlled complexity, the interface won’t become sluggish and unbearable while making changes to its contents.

Legendary Masterpiece:

  • Mild layer complexity.
  • Tags auto wraps to the next line before hitting the right side of the text box
  • Works on a single line as well

β†“πŸ–±Scroll down for Challenge #3 and #4

Best answer by Mr.Biscuit

With the end of March came the conclusion of this season of Biscuit’s Challenge, and the Winner and Champion of Biscuit’s Challenge Season 2 goes to β€” πŸ† Andre Barbero from Santiago, ChileπŸ‡¨πŸ‡± 🎊 πŸ₯³.

@andre have attained the **Legendary Achievement** on both the first and the second Challenge plus a critical success on the third Challenge. The simplicity and responsiveness of Andre’s approach to the 2nd challenge absolutely exceeded my imagination and had made possible the portability of inline tags. Let’s give him praise πŸ‘

Here are the best solutions of this season:
Challenge #1: Infinite Carousel(with Interactive Component)
Challenge #2: A slightly improved version upon Andre’s solution
Challenge #3: Description List From my AntDesignOpenSource
Challenge #4: Mr.Biscuit’s original challenge file (as shown in video)

Thank you to all who have participated in this challenge! We have had a great time learning from each other, and I hope to see you in the next season πŸ˜‰

View original

40 replies

Mr.Biscuit
  • Author
  • 109 replies
  • January 26, 2021

Challenge #3: Responsive Description Table

A description table, commonly displayed on the details page of a product. With grid-based dynamic content resizing.

Success:

  • Row Height is determined by cell content
  • Texts are always centered vertically
  • Label cell and content cell are distinguished
  • Respond to width adjustments

Exceed Expectations(Critical Success):

  • Column grid system is applied
  • Cell width is determined by column grid upon resizing

Legendary Masterpiece:

  • Utilizes column-span system, able to directly specify how many column-grids a cell should span across instead of manually dragging
  • Cell width is determined by column grid upon resizing

Mr.Biscuit
  • Author
  • 109 replies
  • January 28, 2021

Challenge #4: Wrap

Time to bring the css {flex-wrap:wrap;} behavior to Figma!

Success:

  • Overflowing items wrap to new line upon resizing the container.
  • Items are editable.
  • No use of plugins or code.

Exceed Expectations(Critical Success):

  • Breakpoints are dynamic and precise.
  • Items wrap on the fly while editing.
  • Minimum layer hierarchy, easy to understand easy to maintain.
  • Works on any number of items(high extendability).

Legendary Masterpiece:

  • Container’s height is determined automatically.

otto
  • 7 replies
  • January 28, 2021

Is this achieved using text boxes? Can you share your figma so we can learn it?


Gleb
  • Power Member
  • 4706 replies
  • January 28, 2021

This is a challenge to see who can create this, not a shared solution.


otto
  • 7 replies
  • January 28, 2021

get it


Mr.Biscuit
  • Author
  • 109 replies
  • January 28, 2021

This challenge is aimed to inspire people to push Figma’s limitation and conquer obstacles, my solutions won’t be the prettiest, because we have brilliant minds like @Gleb @chudoloo @Vitalii_Sologub @Andrei_Iancu(Winner and Champion of Biscuit Challenge Season #1 and @Chenmu_Wu(Winner and runner-up of last season).

So hopefully, by the end of this challenge, things will be distilled down to the relative best solution, and then it will be the winner’s honor and privilege to decide whether they want it published to benefit the community going forward.

With that said, participants can enquire my current solution, however, doing so will disqualify their further iterations on the challenge.


otto
  • 7 replies
  • January 28, 2021

Where can I go to see the previous challenges?


Gleb
  • Power Member
  • 4706 replies
  • January 28, 2021

Firstly, really great work on the assignments for this challenge! I think the first one will become much easier once Interactive Components are released.

Secondly, I just tried to come up with something for the #2 and #4 β€” I just can’t. I’ll think more about it but at the moment it simply breaks my brain. I even imagined a couple of solutions but once I opened Figma I realized they won’t be feasible. Very hard challenge!


ziyue
  • 1 reply
  • January 28, 2021

I can only do part of it.The first challenge.


Gleb
  • Power Member
  • 4706 replies
  • January 28, 2021

Hey @ziyue it looks like your file wasn’t uploaded properly. Could you try again?


Steven
  • 122 replies
  • January 28, 2021

Topic : Biscuit challenge Season 1

Andrei Lancu (Winner and Champion of S01) : Community file


Andrei_Iancu

I’ll try to find some time to participate in this one as well. 😁

Good luck and have fun! ✌️

Also, good job for videos. I love them. ❀️

Edit:
I found some time and started with the first challenge.

Challenge #1

Song
CTC feat. Muse Quartet & Silviu PaΘ™ca Band - Negru (Youtube Link)

As in the first season, it seems to be easy at the first sight, but it was more challenging because of the β€œportable” factor.
By portable, I understand 1 β€œcomponent β†’ instance” which is not possible right now, then I thought about copy/paste.

Challenge #4 is scary, especially without writing a script. 😬


Elephant_x

I only finished one


Mr.Biscuit
  • Author
  • 109 replies
  • January 28, 2021

Congrats! @Elephant_x has just scored a πŸ’₯Critical Success on Challenge #1
Well done πŸ™ŒπŸΌ


Finch
  • 15 replies
  • January 28, 2021

Are we allowed to write plugins?

I’ve got challenge #4 Done if so.


Mr.Biscuit
  • Author
  • 109 replies
  • January 28, 2021

Awesome @Finch, Challenge #4 is the hardest among these, although usage of plugins doesn’t align directly with the goals of this challenge, we definitely saw the potential of this plugin you are working on, very nifty and straight to the point, huge augmentation to Figma if published.
For the above reason, I’d make one exception and call it a critical success If your plugin works on radio groups, tag groups with icons and button groups, etc. And it will be a legendary success if you managed to think of a way to make it work on nested instances!(I am sick of people detaching instances as well)

After all, Inspiring people to make huge breakthroughs and solving real technical problems is what this challenge is for.
Again, incredible work @Finch high five πŸ™Œ


ntfromchicago

Wow straight up magic here. =)


Mr.Biscuit
  • Author
  • 109 replies
  • January 29, 2021

@Gleb you can do it, we believe in you Gleb!
Π΄Π°Π²Π°ΠΉ, Ρ‚Ρ‹ смоТСшь, Ρ‚ΠΎΠ²Π°Ρ€ΠΈΡ‰ Бабирзянов!


chudoloo
  • New Participant
  • 35 replies
  • January 29, 2021

Ditto. Nice work @Mr.Biscuit! I was stumped for a couple of hours and still didn’t get anywhere. You dropped a hint in the #4 video and it still didn’t help. πŸ˜†


Solo_Cube
  • 7 replies
  • February 3, 2021

Challenge #1: Carousel Infinito


I’ve done it but didn’t spend time placing it into some design because it’s time consuming β€” you need to copy-paste and relink everything… Agree with @Andrei_Iancu:

By portable, I understand 1 β€œcomponent β†’ instance” which is not possible right now…


Andrei_Iancu

@Solo_Cube
I actually made this challenge in 2 ways:

1. Navigate to with Push:

This one is much easier to create, expand the sliders and to change content.
You just have to make the connections on the new layers. (or wait for interactive components πŸ˜… )

2. Swap overlay with Smart Animate

This one can be copy/paste anywhere (or almost anywhere) and use Open Overlay.
On this version I find it harder to increase the number of slides or maybe there is a hack or sorcery there. πŸ˜…


Solo_Cube
  • 7 replies
  • February 3, 2021

Oh… I’ve noticed a hint to the second solution in the original video and only now I got the full idea. πŸ€”
This is a really nice timesaver! I don’t see problems with adding new slides but let’s wait till the end of the Challenge )


Mr.Biscuit
  • Author
  • 109 replies
  • February 3, 2021

Congratulations! 🎊 🎈 We have 3 more participants @ziyue @Solo_Cube @Andrei_Iancu cracked the first challenge, it takes a lot of courage and perseverance, all of you did a great job on this one! πŸ™Œ

And yeah @Andrei_Iancu 's second solution is similar to mine, I used swap overlays as well, and componentized all slides down to the atomic level, so changes to Main can be reflected in all instances.

Although the best solution will be with the upcoming component interaction feature, we still gained a lot from our explorations, most tricks we learned through the experience will be carried into component interaction.


andre
  • 11 replies
  • February 6, 2021

Great challenge @Mr.Biscuit! There’s my take πŸ˜…

Challenge 1: Carousel

Challenge 2: Inline Tags

Challenge 3: Grid

Challenge 4: Wrap
I’m trying to figure out this one πŸ€”


Mr.Biscuit
  • Author
  • 109 replies
  • February 8, 2021

Perfect! Your implementation for Challenge #2 is way smoother than mine, and it also works on a single line. I am so very astonished.

Thus I am pleased to announce :
@andre has achieved the Legendary Success πŸ† on Challenge #2.
πŸ₯³ Congratulations! @andre 🎊


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings