Sandskriti’s Post

Design Tokens on HTML Canvas are here! ❤️ .. Just two days ago, I launched a new design tool that uses canvas technology, and now you can create your custom color styles and more! Check out the video below and give the new styles manager a try: https://lnkd.in/g2hwn3qX .. Initially, I planned to take things slowly, but then I got this crazy idea to enhance canvas elements with a custom API. At first, I was not sure it would work, but after experimenting, I managed to link custom style IDs to canvas elements. This links them to objects outside the canvas, allowing for greater control and customization. I'll go into more detail in an upcoming technical video, so make sure to subscribe to my YouTube channel! https://lnkd.in/gasAvTkK .. Extra kudos to Mateusz Gdaniec for the quick product design brainstorming. We've already implemented some of those ideas, and I look forward to more sessions like these. With that, I’m wrapping up this week’s design and development sprint. See you next time! #reactjs #productdesign #fabricjs #canvas #designtool

"#FrontendDevelopment journey and it's getting more interesting! I've dived into the world of #BrowserPainting today, literally painting my imagination on browser canvas. Also, stepped into the realm of #Bootstrap, an impressive tool for responsive and mobile-first design. It's amazing how these skills are slowly shaping my code and improving my web performance. Being part of this journey is truly exhilarating! #CodingJourney"

Here's my creation of a website using Framer using the # Benjamin Nathan tutorial, such an insightful and interesting one. It is good for easy publishing and updating, the premade components, the stack concept , responsiveness using breakpoints and the animations were time savers of the design Website link: https://lnkd.in/gKasj9gE Tutorial link: https://lnkd.in/gvpTmDeq

🚀 Just Launched a New Project on Framer! 🚀 Thrilled to share my latest project—a website crafted entirely with Framer! This project allowed me to explore Framer’s powerful capabilities, while a DesignCode tutorial guided me through some of the more advanced techniques. Here’s a breakdown of what went into this project: 🌟 What I Loved About Framer: Visual Design Flexibility – Framer’s intuitive interface made it simple to experiment with different layout ideas and make visual tweaks. 3D Elements – This was a game-changer! I was able to bring in subtle 3D touches to add depth and a unique edge to the website. Micro Interactions – I used Framer’s tools to create precise, engaging micro interactions that add a level of polish and make the website feel dynamic. Scroll Animations – Leveraged smooth scroll effects to ensure the site has a seamless and fluid user experience, keeping users engaged as they explore. Responsive Layouts – Ensuring the design looked fantastic on every device was a breeze, thanks to Framer’s built-in responsiveness. 📚 Learning with DesignCode: DesignCode’s tutorial was the perfect guide, breaking down complex features step-by-step, so I could dive deeper into what Framer has to offer! 🔗 Check it Out: https://lnkd.in/d6KGx4Yk ❗❗Also try and interact with elements, there are a lot of micro-interactions in there 😉 This project has been an amazing journey of experimentation and learning. Excited to keep pushing my design and web development skills further! #webdesign #framer #uidesign #frontenddevelopment #microinteractions #scrollanimations #3Delements #learningbydoing

My portfolio site's updated version is now live! 🚀 Check it out here: https://bikiron.in/ (Best on desktop). (Sound on for the video 🔊) Created with Figma and Framer, the video was made using After Effects (Sound on 🔊). Featuring Awesome font, Sk-Modernist, and Basis grotesk pro typefaces. Share your thoughts! #portfolio #webdesign #productdesigner #design #productdesign

Have been trying to catchup on a few of the talks from Figma Config last week... so so many good ones bookmarked to look through. One that caught my eye was 'Pitching accessible design like a pro' with Tregg Frank. As a designer who has a keen interest in accessibility and working to add it into my daily process even if it's just 1% better each time — there were some really good insights in Tregg's talk around how you don't need to transform your designs or team overnight — but just including it in your process and finding the right ways to explain the benefits to others, can gradually make a bigger and bigger difference. Adam King and I run a small side project called 'Beautifully Accessible' where we use learn by doing to improve our knowledge but also try to tackle it from a designers point of view, to prove that accessible design can still be beautiful. Underneath the styling there's lots of little things you can do to make your work more accessible — far past just making colour contrast pass. Something Tregg mentions as well in his talk, essentially good accessible design is just good user experience — and we couldn't agree more. Tregg's talk — https://lnkd.in/esVT2UsF Beautifully Accessible — https://lnkd.in/eSqxBbcJ

🌟 Week 3, Day 4 at Infeanet Digital Solution And Web Media : Mastering Text, Icons, Positioning, and DOM! 🌟 Here's a snapshot of what we learned: 📌 Text Decoration:   - Underline, Overline, and Line-through: Styling text with lines above, below, or through it.   - Text Shadow: Adding shadows to text for a more dynamic effect. 📌 Icons:   - Using Icon Fonts: Integrating icon libraries like Font Awesome for scalable vector icons.   - SVG Icons: Implementing scalable vector graphics for high-quality icons at any size. 📌 Positioning:   - Static: Default positioning; elements flow naturally on the page.   - Relative: Positioning relative to the element's original position.   - Absolute: Positioning relative to the nearest positioned ancestor.   - Fixed: Positioning relative to the viewport, staying in place during scroll.   - Sticky: A hybrid of relative and fixed, sticking to a position based on scroll. 📌 Document Object Model (DOM):   - Understanding the DOM: Learning how the DOM represents the structure of HTML documents.   - Manipulating the DOM: Using JavaScript and CSS to dynamically update content and styles. These concepts are essential for creating interactive, visually appealing, and user-friendly websites. #WebDevelopment #CSS #Icons #Positioning #DOM #InfeanetDigitalSolutions #LearningJourney #WebDesign #TechSkills #WebMedia #CodingLife

🚀 Exploring New Dimensions in Design with Spline 🚀 Just wrapped up a cute Spline tutorial and crafted my first 3D room setup for a landing page! 🌟 Need to work more on the website integration part. Here's a sneak peek of the work-in-progress: 🎨👀 🔍 What’s coming next? Tomorrow, I’ll be posting the final result from my 48-hour design challenge: a minimalist, interactive profile website for an anonymous blog writer—complete with 3D integration! This journey with Spline is just the beginning of blending creativity with cutting-edge web tools. Stay tuned for more updates, and let me know if you’ve explored similar tools in your design projects! 💡 #DesignChallenge #Spline3D #WebDesign #LearningJourney #ComingSoon

Key Features of My Hover Card: Smooth Animations: The card reveals content with a smooth transition, making the interaction seamless and engaging. Responsive Design: Ensures the hover card looks and works great on all devices, from desktops to mobile phones. Customizable Content: Easily adaptable for various types of content, such as user profiles, product details, and more. Modern Aesthetics: Clean and stylish design that can fit into any modern website. #CSS #HTML #HoverCard #WebDesign #CodingProject

We've been quietly making our design tokens manager better for the past year. Now, we're pretty excited about what's possible (and have been for a while). Teams can unify their design tokens from everywhere in zeroheight. That includes your Figma variables and styles, tokens stored in your code repo tool, and even those rogue tokens in a random JSON file. We've also made it easy for anyone to create and edit tokens - no code knowledge required. If you can enter a hex code, you can create a color variable in zeroheight. And we didn't stop there. Getting tokens to code is what we've been heads down on the past few months. You can use our Style Dictionary export option or automate delivery from Figma to code. All of our design tokens features can be used even if you aren't documenting in zeroheight yet. Give them a go and tell us what you think! Learn more: https://hubs.li/Q02YwGMX0