Showcase Your Work

figma.to.website Design and publish websites without leaving Figma! No code, no extra tools required. I would love to have your feedback 🤗 📐 Use all your favorite Figma features, they’re supported! Autolayout Components and variants Interactions (Prototype) Variables Animations ⚡ Get a high performance website Delight your visitors with a blazing fast website Code generation optimized for best Web Core Vital scores Hosted on a global CDN with 300+ edge locations around the world Automatic image optimizations, keep your high resolution images in Figma and don’t worry about the performance of your website on any device Brought to you by ‹div›RIOTS

Hey designers and developers!Tired of wasting time exporting your Figma variables and rebuilding your tokens in code? I've created a little plugin to make your life easier. With it, you can export your colors, fonts, and spacing while keeping their aliases and hierarchy, easily manage light/dark modes, and even generate ready-to-use W3C Design Tokens.You can choose the format that suits you best: JavaScript, TypeScript, CSS, SCSS, or JSON, and everything can be previewed in real time. The plugin allows you to quickly copy or download your exports, while keeping your collections organized and your references intact.In addition, it provides a detailed analysis of your variables: number of tokens, types, modes used, and other useful statistics to give you a clear overview of your design system even before exporting. No more hours spent checking that everything is consistent between Figma and the code.The plugin is available here: https://www.figma.com/community/plugin/1566133735926608173/

Hey all, Just wanted to share my plugin + API “Dynogee” which allows you to create images with dynamic content based on template designs created in Figma. After creating a template using the plugin you can access new images with simple HTTP GET requests: https://dynogee.com/gen?id=zizkjxv682b0c71&title=Some+text+goes+here ^ template id ^ parameter What parameters you need can also be set using the plugin and there’s support for text, images & more. Link to plugin: https://go.dynogee.com/plugin Demo Template: https://go.dynogee.com/gatheround-demo Website: https://dynogee.com While this is intended as a commercial software product I’m happy to provide a perpetual free usage for anyone who’d like to use this for personal, low volume projects! Would love your thoughts & feedback 🤗 Best, Martin

Hey everyone,I want to share a little tool I built to solve a recurring pain point in my Figma workflow — re‑creating guides across frames.It’s called Guide Guru, and it basically lets you copy‑paste guides between frames in seconds.Here’s what it does: Copy guides from one frame and paste them exactly where they were in another. Save time on repetitive alignment work. Keep precision — no eyeballing positions anymore. I’m using it daily, and it’s saved me so much time.Figured some of you might find it helpful too!You can try it here: https://www.figma.com/community/plugin/1564880649286871615/guide-guru If you give it a go, I’d really appreciate any feedback — what works, what doesn’t, or what could be better.Thanks for reading, and happy designing!Best wishes,Evgenii 

Hey! For the past year I've been working on a tool to simplify my work process (mostly design reviews), and I decided to take a break and share it with the community so it can help you too! Any feedback would really help me perfect it further. It’s free, it’s called Style Hunter, and it lets you scan your selection or the entire page for every classic style, variable, and raw HEX/text values. It has helpful filters and mass-selection options. It basically does what you expect and helps hunt down unassigned layers, forgotten tokens, legacy styles, lost local variables, etc. I mainly use it to check designs and test new design systems, quickly selecting and swapping tokens.The key idea was simplicity, so I intentionally didn’t add "fixing" capabilities, duplicate/mirror existing Figma tools, or include many buttons and settings. Colors and texts are always in view; with the filters you can set up Style Hunter as a cleanup checklist. Super Selection Panel (at the bottom of the UI) is a po

Hi all,  this is my first post here. I’m Ben, a freelance UX designer. After many years of creating all sorts of deliverables for clients, I decided to create my own design system using Figma. I thought I would share it here to get your thoughts/feedback. All the best.Figma Preview Link Website Blog   

i am creating a website for a local restaurant in japan , called sushizen , this whole project is hypocritical and but i have followed all the ux process from empathy to testing although most of the steps were imaginary but i have learned a lot , i am doing this project alongside doing google ux professional certification , Figma link:-  The problem :-many japanese salaryman and woking class visit the restaurant and during peak hours the restaurant is uable to maintain the customers . many tourists recently are visiting japan and want to experience traditional foods but find it very difficult to read menu and do conversation with the staff due to language barrier . nowadays the restaurant face competition from online food services . The Solutions :-Created a reserve table system in the website so that people can visit and experience it without hassle .Added a languages selector so that tourists can also access and experience the site and the food .Added Order Online services for people

Siter.io provides a platform for constructing and launching complete websites without needing any coding expertise. It allows for a seamless export of Figma design files, eliminating the need to convert your designs into HTML and CSS manually. Once exported, adjustments and modifications can be made directly on Siter, with the added feature of incorporating responsive designs for your pages. Moreover, Siter’s visual editor allows for the integration of HTML code directly into your website. Here’s how to use it: Install the Siter.io plugin. Within Figma, select your website’s art-board. Navigate to “Plugins” and select Export Figma to Websites / HTML by Siter. Connect Siter with Figma. Export your designs with ease! Watch video → https://www.youtube.com/watch?v=BG8rsZdR_SQ

Community link: FigPal KitHey all! In loving memory of FigPals (the temporary Figma Fun Week feature for 2025), I created a set of components that lets you recreate your beloved pals along with the little downloadable photo strip thingy.For fun, I also added in customizable expressions you can apply to your pal, with instructions on how to create new ones if you like. Just wanted to share in case anyone else was interested! File Cover 

As someone who designs primarily in Figma, I often faced the frustrating choice: compromise on print quality or break my workflow to use InDesign. Print Layout plugin solves this dilemma by bringing professional print capabilities directly into Figma. The Real Problem It Solves Here's the situation many Figma users face: You create beautiful designs in Figma, but when it's time to print, you either:Export a basic PDF and hope for the best (often disappointed) Learn InDesign just for print prep (time-consuming and expensive) Outsource the print preparation (costly and slow) Print Layout eliminates this workflow break. What Print Layout Brings to Figma Professional Print SetupFinally, you can create proper print documents in Figma with margins, bleed, and crop marks. Business cards, flyers, and posters now have the same professional setup you'd expect from dedicated print software. CMYK Color ControlThis is the game-changer. See how your RGB colors will actually print, and adjust CMYK va

Turn your ideas into editable Figma designs instantly with Fluvara.ai! Just type a prompt like "modern e-commerce page" and watch our AI generate clean fully editable Figma layers, complete with layouts, typography, and interactive elements like buttons or hover effects. Perfect for designers, developers, and startups to rapidly prototype UI/UX for web and mobile. Save hours on ideation and handoff—try Fluvara free today!https://fluvara.ai/https://www.figma.com/community/plugin/1550163197521237586/fluvara-ai-ai-designer

With the MKitFlow plugin, you can define your workflows directly inside Figma and use a custom dialog to set both fixed and dynamic parameters. You can also pass selected Figma design data into your workflow.It also works the other way around: MKitFlow can receive not only text messages and files, but also direct commands to modify your designs inside Figma.

Hi there Figma community! 👋Really excited to announce Linkit - my new Figma plugin to every design system designer's biggest frustration: library updates that wipe out all your carefully crafted overrides.🔗 https://www.figma.com/community/plugin/1548366187818108639/linkit 💰 $5 one-time purchase - no subscriptions, own it foreverWhy I made it: As a design system design engineer myself, I constantly dealt with detached instances and had no way to reconnect them to parent components without losing overrides. Our entire design chapter shared this pain point.The Solution: Linkit reconnects your instances and frames to target components while preserving your overrides - padding, text, corner radius, and fills (variables now, styles coming soon). I built this as an affordable, straightforward fix for a universal problem we all face. Try Linkit and let me know your thoughts - excited to build more features with community feedback!

Text styles and typography variables are powerful - but setting them up takes time, is error prone and repetitive. Text Styles Namager simplifies the handling of typography and takes over all the heavy lifting for you.Create text styles with variables in one click, replace or merge text styles with each other (including external styles), generate variables for your existing text styles and apply to your entire document - don’t skip a node in largest library files.There are more features I an imagine to add in future - but I don’t want to get ahead of myself.The plugin includes a free tier and I would be happy if you give it a try and provide me your valuable feedback!https://www.figma.com/community/plugin/1548356533090301637/text-styles-manager

I designed a Productivity Workspace in Figma Make to bring structure, focus, and a little fun into daily work. It’s a space where individuals and teams can stay productive while enjoying customizable environments.✨ Features: ⏱️ Pomodoro Timer – focus with structured 25/5 cycles 🎶 Music Player – ambient tracks to set the mood 🌟 Custom Modes – switch between Rainy Day, Anime, or Animal Mode to match your vibe 💬 Team Chat & Invite – collaborate in real-time, set timers together, and keep each other motivated 👉 Explore the live site: Productivity Workspace👉 Figma file: Figma CommunityI’d love to hear your feedback and ideas! Would you like to see more modes added in the future? 

I was looking for a plugin that could:  Export multi-page PDFs Preserve internal links from prototype mode (so they work in the PDF, e.g. as a Table of Contents for ebooks)  I found a few options, but they were paid. So I built my own - completely free. Today I published v2.0, which adds the ability to export PDFs in High / Medium / Low quality. If anyone has feedback, I’d love to hear it! Link to plugin: https://www.figma.com/community/plugin/1535371360850075397/figma-to-pdf-with-links-and-multiple-pages Figma to PDF with links and multiple pages 

I've been working on an iOS app recently, and there's been an issue that's been bothering me for a long time - Figma's preview window can't be detached from the main window. After some research, I discovered that I could use Xcode Simulator to achieve this purpose, and I eventually succeeded. If you have the same need, feel free to check out my blog post.https://blog.heronhq.com/en/how-to-preview-your-mobile-designs-outside-the-main-figma-window/  

Hi, Figma Fam! It’s been less than a week since I got hook with figma and declared that I will become a UI designer by 2026. This is my first recreation of mobile app screen. It feels good that I know I’m getting the hang of this. Wish me luck. 

Over two years ago, I launched the Quick Commands plugin — a tool that lets you run powerful shortcuts right from the action bar. Type “pt10” to set padding top to 10px, or “rb20” to set bottom radius to 20px. It quickly became a favorite among power users who value speed and precision — and I received tons of great suggestions along the way. Now, thanks to a bit of help from AI (which made maintaining the plugin way more efficient), I finally had the time to ship a major update! Two highly requested features are now live:  Fuzzy Search: Can’t remember exact commands? No worries. Just type what you want and let the plugin figure it out. Custom Command Aliases: Create your own shortcut names that match your workflow and memory style.  Give it a spin and let me know what you think!👉 https://www.figma.com/community/plugin/1078657295141928162/quick-commands  New settings panel: Custom Aliases:Fuzzy search demo:  

This is the first website I've built using Figma Site. You can visit it at www.meridesign.cn. Compared to Frame, I find Figma Site more stable and better in terms of compatibility. Unfortunately, many of the interactions and animations available in Prototype can't be used here. For now, only adaptations for mobile and PC ends, as well as preview functions for Chinese and English languages, have been made. 1、Build the framework using figma stie： 2、Draw the illustrations I like using figma draw： 3、Let my website be previewed on mobile devices： 4、Bind the domain name I like： 5、Open the browser to check out the website I published：www.meridesign.cn

In the past when building components, the hover and tap targets where always the same size as the component itself.For example, in a list where the hover or tap area should span the full width of the page, the component itself needed to be full-width.So to improve the life of our developers we wanted to transitions from using components with built in margin to allow setting the margin externally. However, the challenge was how to ensure the component would still have a hover/tap target that spanned the full width.I couldn’t find any suggestions online, but after a lot of fiddling and hacking, I discovered a surprisingly simple solution.I wanted to share it here in case others have faced similar challenges:Solution Step 1: Create a layout using auto layout so that the component can scale as needed based on the content. Add the state as it’s own layer and set the position to absolute.For each variant you can change the state as you would normally change the background. Step 2: Set the la

Hello Figma fam! I created my first mock up design and please offer any feedback.  The app is the first iteration to solve a big huge problem in our society; pain.  The mascot is supposed to be a neutral character from Greek mythology Aceso who is the goddess of healing.  The user will speak to a customer AI system which will then develop an exercise routine and can have follow ups with point reward and community sharing.  

Hi, Figma Fam! It’s been less than a week since I got hook with figma and declared that I will become a UI designer by 2026. This is my first recreation of mobile app screen. It feels good that I know I’m getting the hang of this. Wish me luck. 

When designing digital experiences, we often focus on UI/UX—but what about security? At Avolute Technology, we believe that secure systems are the foundation of great design.Explore how Avolute Technology approaches cybersecurity with design thinkingTheir work blends functionality with security through:- **Secure UI Components**: Intuitive login flows, with built-in protections (e.g., input validation, MFA prompts, adaptive layout for warnings).- **Transparent Feedback**: Real-time visual indicators that alert users about risky behavior in a subtle, approachable way.- **Smart Defaults**: Settings like auto-logout or privacy-first configurations that align with best practices—without sacrificing ease of use.- **Iterative Testing**: Usability tests that include edge-case threat scenarios to see how users react under pressure.This synergy between design and cybersecurity inspired us to rethink how we craft user flows and messages. Let’s discuss: what are your best practices for incorporat