Skip to main content


👋 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




Biscuit Challenge Season 2: Challenge #1



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




Biscuit Challenge Season 2: Challenge #2



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


Challenge #3: Responsive Description Table




Biscuit Challenge Season 2: Challenge #3



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


Challenge #4: Wrap




Biscuit Challenge Season 2: Challenge #4



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.

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

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

get it

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.

Where can I go to see the previous challenges?

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!

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


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

Topic : Biscuit challenge Season 1


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

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. 😬



I only finished one

Congrats! @Elephant_x has just scored a 💥Critical Success on Challenge #1

Well done 🙌🏼

Are we allowed to write plugins?


Iā€™ve got challenge #4 Done if so.



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 🙌

Wow straight up magic here. =)

@Gleb you can do it, we believe in you Gleb!

Š“Š°Š²Š°Š¹, ты сŠ¼Š¾Š¶ŠµŃˆŃŒ, тŠ¾Š²Š°Ń€Šøщ Š”Š°Š±ŠøрŠ·ŃŠ½Š¾Š²!

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. 😆

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ā€¦


@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. 😅

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 )

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.

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 🤔

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 🎊

Reply


Terms & ConditionsCookie settings