Figma的动态

We continue to update the PRESENTA service with further capabilities. Now the API endpoint can generate PNG files too. As a reminder, the whole suite allows you to: – Convert Figma documents into dynamic, reusable, data-driven templates – Have a live preview in Retool for last-mile checks – Use a multipage PDF document generator API – Use a PNG image generator API If you want to elevate the quality of your generated documents, give me a shout. #pdf #png #generator #api #retool

Yesterday, Framer introduced plugins that unleash an entirely new set of superpowers. But one plugin stood out to me. When you have a Figma project and the same project in Framer, changes in one don't automatically sync with the other. This is very tedious and tiring. But no more... Framer/Figma Sync is a Framer plugin that allows you to import/sync color styles from Figma. It is worth noting that this is also a paid plugin, so the Plus version allows you to automatically create and sync light/dark modes and text styles. With Plus Unlimited, you can use the plugin across unlimited projects, receive priority support, and have a say in the plugin's roadmap. --- P.S. If you enjoy this type of content, hit the follow button and turn on notifications as I share something new daily.

Want quicker text editing in Framer like in Figma? Let’s make it happen! Check out my feature request and upvote if you agree. #request #framer #productdesign #makeiteasy #figma Framer

I've created a website to share something very simple: free code for Framer. (I’m not Robin Hood, but I come pretty close…) https://lnkd.in/d7YCK_C5 Here’s what I do: Platforms usually sell components and profit from them. I, on the other hand, recreate them and offer the code for free. Example: Want a Number Counter that goes from 0 to any number with an animated effect? On my website, you can see it in action, copy the code directly, and use it in Framer. All with just one "copy-paste." But this is just the beginning. ?? My plan is to gradually expand the library and keep publishing more components. If you have your own code and would like to share it, I’m open to collaboration. What kind of components would you like to see in the library? ?? #Framer #FreeCode #UIUXDesign #DesignResources #WebComponents #WebDesign #WebDevelopment #CodeForDesigners #CustomCode

Simple and cool way to make your CTA stand out. When you have a card, you can add a gradient that I call "sunset". It's really subtle, but looks so nice and may have different variations (e.g. you can use ellipse, not circle). Not hard to implement with pure HTML/CSS I believe, since you can make a div, turn it into a circle by using border-radius and apply blur. Or use clip-path for complicated figures. Or just paste the SVG from Figma.

They finally did it, Vercel. A dream LLM coming to life. https://v0.dev/ can now generate React components using Tailwind and shad/cn! The generated code is a great starting point and can be installed with a simple npx / bunx command. Benefits of using Tailwind and shad/cn? Figma Design System can be exported into a nice Tailwind theme css, replacing all defaults - this still needs to be done manually to work.

I'm going to share with you a visual trick that I?you will love.??? In two ways, with code snippets. Figma and SVG First, draw a random closed path. Then, simply apply a layer blur with a high value. After that, you can export the SVG and insert it into your HTML, making any necessary adjustments. ?? Here is a code sample: https://lnkd.in/dba4_iak CSS only Another method is to use the?clip-path?property. You can play around with it using?Clippy (https://lnkd.in/dt6FUJsv) The idea is to create an absolutely positioned div that fills the card and then clip parts of it so that only some parts are visible. By combining background color, opacity, and blur, you can achieve the same effect. ?? Here is another code sample - https://lnkd.in/dTvDxhXM Check both the HTML and CSS tabs, and try hiding the code to extend the card.

It's going to be in the future

I was trying to build an interactive visual on the web, I tried D3.js but my data is huge (around 190,000 points) and using SVGs via D3 was not good at all and clingy ... Am I using it wrong? Would appreciate any tool suggestion to build web-based visuals that are interactive combining a huge dataset other than using HTML canvas. #webdevelopment #d3 #canvas #art #build #visuals

Convert Figma to HTML Easily with AIforUI : Transform your Figma designs into HTML with just a few clicks using AIforUI. Here's how simple it is: 1. Copy the URL of your Figma file and paste it into the designated text box on our site https://aiforui.com/. 2. Preview your design and click the 'Confirm' button to initiate the download of your code file. 3. Download the code file, unzip it, and you're ready to use it! Say goodbye to manual coding and let AIforUI handle the heavy lifting. Try it now at https://aiforui.com/