Figma is free to use. Sign up here: https://bit.ly/3msp0OV
Happy Lunar New Year! Let’s learn how to make red envelopes in Figma!
1. Start with 4 elements: envelope-lip, card with the holiday message, envelope-front, and envelope-back. Arrange the elements so they form a red envelope.
2. Select them all and create a component by right clicking and select “Create component” from the menu.
3. Rename the component to “red-envelope” and create a new variant by clicking on the “Add variant” icon from the top of the menu bar. Update the property name to “state” and the variant names to “closed” and “opened” accordingly.
4. Add a third variant and rename it to “card-pop-out”. Select the card layout of the variant, and drag it out of the envelop so that the holiday message card is revealed in this state. Then, select the envelope-lip layer of the same variant and send it to the back of the variant.
5. Next, select the envelope-lip layer of the “closed” variant. Click and drag the layer so that it is flipped, making the envelope looks sealed. *Tip: Make sure the height of the lip is still the same with the one in the “opened” variant. This is very important for smart animate to work smoothly.*
6. Now switch to prototype view (Shift+E). Connect the “closed” variant to the “opened” variant. Set the interaction to “on click”, animation settings to “smart animate”, “ease out” and duration to “400ms”.
7. Then, connect the “opened” variant to the third variant. Set the interaction to “After delay” and the delay time to “1ms” , animation settings to “smart animate”, “ease in and ease out back” and duration to “600ms”.
8. Copy the “closed” variant, paste it in your design. Then, present it in presentation view and test it out! Happy learning!
____________________________________________________
Find us on ⬇️
Twitter: https://twitter.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #shorts #lunarnewyear #tutorial
source
