<meta charset='utf-8'><meta charset="utf-8"><span data-metadata=""></span><span data-buffer=""></span><span style="white-space:pre-wrap;">Import<br>New File<br>Docs<br>Copy Link<br>Invite<br>Pages<br>Layers<br>Assets<br>Home<br>Code_block.tsx<br>Edited<br>Preview<br>Code_block<br>Components<br>1<br>// Welcome to Code in FramerÊ<br>// Welcome to Code in FramerÊ<br>Project<br>2<br>// Get Started: https://www.framer.com/developers<br>3<br>Code_block<br>4<br>import { addPropertyControls, ControlType } from "framer"<br>Framer<br>5<br>import { motion } from "framer-motion"<br>6<br>7<br>/**<br>Styles<br>8<br> * These annotations control how your component sizes<br>9<br> * Learn more: https://www.framer.com/developers/#code-components-auto-sizing<br>Desktop<br>1200<br>Breakpoint<br>Tablet<br>1199<br>Breakpoint<br>Text<br>10<br> *<br>11<br> * @framerSupportedLayoutWidth auto<br>1395<br>h1<br>Heading 1<br>60 / 1.4<br>12<br> * @framerSupportedLayoutHeight auto<br>h2<br>Heading 2<br>28 / 1.4<br>13<br> */<br>h3<br>Heading 3<br>22 / 1.4<br>14<br>export default function Code_block(props) {<br>15<br>const { tint } = props<br>p<br>Body<br>18 / 2.0<br>16<br>17<br>return (<br>18<br><motion.div<br>Code<br>19<br>style={{<br>20<br>...boxStyle,<br>Code_block.tsx<br>21<br> backgroundColor: tint,<br>22<br>}}<br>23<br>animate={{ scale: 1.25 }}<br>24<br>whileHover={{ rotate: 90 }}<br>25<br>/><br>26<br>)<br>27<br>}<br>28<br>29<br>addPropertyControls(Code_block, {<br>30<br> tint: {<br>31<br> title: "Tint",<br>32<br> type: ControlType.Color,<br>33<br> defaultValue: "#09F",<br>34<br>},<br>35<br>})<br>36<br>37<br>// Styles are written in object syntax<br>38<br>// https://react.dev/reference/react-dom/components/common#usage<br>39<br>const boxStyle = {<br>40<br> margin: 25,<br>41<br> width: 125,<br>42<br> height: 125,<br>43<br> borderRadius: 25,<br>44<br>}<br>Use ⌘S to save your code and apply changes<br>Dismiss<br>45<br>Brought to you by<br>Listen<br>Up!<br>Duplicate more designs<br>When ever you’re ready,<br>Centralize<br>feedback.<br>Understand with<br>real AI<br>Reduce your time to insight, so you can focus on cool visionary sh*t.<br>Get started - it’s free<br>1/2,401 insights<br>Open<br>Wake up to an inbox <br>full of new feedback<br>Reports<br>Reports<br>Agency<br>Agency<br>Web version<br>The second I open 4-5 tabs in Figmoon, my computer is getting very very slow... <br><br>I check my RAM, and it’s taking 14 GO!<br>It's very important for me to show people that we are working on their feedback, kinda integrate them in the process by making <br>It's very important for me to show people that we are working on their feedback, kinda integrate them in the process by making <br>Annette<br>October 30, 2021<br>Annette<br>October 30, 2021<br>Josh<br>October 30, 2021<br>Mobile version<br>Mobile version<br>Sharing<br>The mobile application is pretty limited but I expect that - I just want to quickly check progress over our projects. <br><br>The problem is that it takes really ages to load...<br>Web version<br>Prototyping<br>The mobile application is pretty limited but I expect that - I just want to quickly check progress over our projects. <br><br>The problem is that it takes really ages to load...<br>Want more value? Follow the team on LinkedIn<br>Users are complaining about the load speed when multiple files are open<br>I don’t understand why I can’t put my auto-layout frame as fixed in the prototype, it’s frustrating.<br>But today, it’s not seamless, I need to open a new tab, and wait for the Figmoon file to load. It would be a game changer just to be able to use a real embed version of our Figmoon file in Notion.<br>Follow on LinkedIn<br>Marie<br>December 3, 2023<br>+909<br>January 3, 2022<br>Emillie<br>December 4, 2021<br>Annette<br>December 1, 2021<br>Marie<br>December 3, 2023<br>Prototyping<br>I don’t understand why I can’t put my auto-layout frame as fixed in the prototype, it’s frustrating.<br>Emillie<br>December 4, 2021<br>Reports<br>Agency<br>It's very important for me to show people that we are working on their feedback, kinda integrate them in the process by making <br>Annette<br>October 30, 2021</span>

No items found.

Ready to use in Figma

Open Figma and paste (cmd/ctrl + v) anywhere

What's next?

Find the right inspiration

Find real life design inspirations and duplicate them in your Figma using the yellow button on this page.

Craft the perfect solution

Find real life design inspirations and duplicate them in your Figma using the yellow button on this page.

Collect your users’ feedback

Understand how it helps you ship value to your users. This is where ListenUp! can help you.

How does it work?

Capture feedback automatically

Centralize feedback

Connect your favourite apps to automatically receive text, image and video feedback.

Automated with AI

Sync. to your users

Know exactly who gave you each feedback. Access all your user's up to date information.

Automated with AI

Transcribe videos (with accurate AI)

Transcribe user interviews with multiple speakers in any language.

Automated with AI

Get started for free

Identify value much much faster

Automated with AI

Automated with AI

Automated with AI

Find patterns for you

Get real time pattern suggestions when you receive new feedback from users.

Automated with AI

Enrich existing patterns

New feedback gets added to existing patterns to enrich your knowledge.

Automated with AI

Validate hypothesis instantly

Take product decisions much faster and get help to act on them.

Automated with AI

Get started for free

Cut through the noise

Highlight all the key information.

Advanced filters

Use ListenUp!’s custom AI to get relevant AI patterns.

Monitor your qualitative data

Use ListenUp!’s custom AI to get relevant AI patterns.

Create unlimited pattern

Create as many pattern layers as you need