What are
/r/FigmaDesign's
favorite Products & Services?
From 3.5 billion Reddit comments
The most popular Products mentioned in /r/FigmaDesign:
The most popular Services mentioned in /r/FigmaDesign:
Figma
Notion
Loom
STUDIO
Product Hunt
Rive
Asana
Google Fonts
Gofile.io
InVision
freeCodeCamp
ProtoPie
unDraw
GraphCMS
Buy Me a Coffee
The most popular reviews in /r/FigmaDesign:
Sup,
here's a workaround without using an actual brush tool, just duplicate the file and play around with it.
https://www.figma.com/file/pA1oR9fmFNbfs0FtuwkDIl/Untitled?node-id=0%3A1
Hope you find it useful.
That's right! I created a single component called "Table Column" that has 11 variants. That allows me to quickly swap the data type by just changing the variant. You can preview the file here to see how things are built. It's on the Data Table page :)
I have actually been thinking of doing something like this lately… and created a discord server for it as well, but haven’t really hit go yet as I have been toying with the idea of making a Udemy course on creating design systems for a bit.
For reference, I made this Zelda BOTW kit a couple of months ago and have been wanting to start another one, but also try and collaborate and teach others as well.
Heck, here is a link to the discord to the channel I made called Figma Mentors. Maybe it can become something, but I have ADHD and love starting projects and then stopping them once I realize I am starting too many to keep up in the air haha.
Anyways, I am happy to discuss. And also happy to meet other designers to expand my community.
Hmm. This is interesting, because I honestly have thought of something like this, but from the other end. I have a lot of experience with Figma, setting up design systems, designing, etc, and have always wondered how I could share in a way that helped others. (Have thought of videos, teaching, courses, etc… I really don’t know) but I am happy to help others.
They did an update in copying and paste this week you can explore this file and I think it will answer all of your questions https://www.figma.com/proto/MBZXtqRnnzqDOqFjlLvDhu/Copy-and-paste-playground-Community?page-id=0%3A1&node-id=58%3A1476
You are probably looking for a tilable image:
https://www.figma.com/best-practices/working-with-images-in-figma/manipulating-images/
​
​
Also, I've seen plugins that simplify creating new patterns.
I'm pretty sure you can.
Someone even remade the entire Breath of the Wild interface in Figma (though probably used other stuff for designing as well)
BOTW UI Kit: https://www.figma.com/community/file/965825767811358609
Awesome! Great job! Now I’d like to see you do it using components! :)
I did a similar case study: Figma Community - Spotify mobile ui
I think you’re misreading the documents linked. Also, Figma has done some wonderful work on general security (especially if you’re on the organization plan). You can read more about it here
If you’re also providing the technology solution, you can propose the breakpoints and design around that. If your client already has a solution, go with whatever breakpoints they already have.
This is also a great article when it comes to what frame sizes you should aim to have.
You can find the file here and duplicate it, don't hesitate to subscribe to my profile on Figma community if you want to, have fun:
https://www.figma.com/community/file/1044950288766440991/GET-JINX
Okay, after viewing your file I think I understand better what you're trying to do.
Short answer: This isn't how components work, unfortunately. It simply won't work.
Long answer: The reason this doesn't work is because the purpose of master components isn't to be edited with new information/text for it to be propagated out to the instances. They're more of a placeholder so that the instances can be created for quick prototyping and editing.
As you discovered, you can't put master components inside of components because that's simply not how they're designed to work. You'd need master components for each new slide you create which simply defeats the purpose of the components as a rapid prototyping tool.
That said, you can create multiple slides with their own master components and instances. The slides will just have to stay frames and not components.
https://www.figma.com/file/HLhaQy0TA6gdWIZxTcAdAU/slide3-(Copy)?node-id=0%3A1
I agree with your second paragraph, but not the first. I don't think there's any problem with OP using Figma's free plan for this project.
From Figma's FAQ page:
>Starter plan
The Starter plan is designed for individual and very small teams to get started with Figma. You get unlimited files in the Drafts space, which you can share with unlimited viewers. Additionally, you can co-edit with unlimited editors in the Team space on up to 3 files (limited 3 pages per file).
Check this plugin called Style Organizer. Let's say your H1 is Lato, size 30 (and you saved it as a text style) it finds all Lato, size 30s and you can easily merge them as H1. Not sure if this is exactly what you are looking for but it is pretty good, works with color styles too.
Leverage and existing front end framework.
Have the designer and developers work from the same library.
For Example:
https://chakra-ui.com with https://www.figma.com/community/file/971408767069651759
For reviews I use a combination of IBMs playbacks
And thankfully Figma makes PowerPoint like presentations possible so any information you have collected and synthesised from research can be reused in a quick presentation...
Try these cool templates from femke.design
Hope this helps
This is the link. I just called it "Test Fill"
https://www.figma.com/file/OcqXFYiwK1ihGhxfVCYe0x/Test-Fill
EDIT: So I can now see the red when I click through the link. It must have been a bug after all.
You can create an arc from an ellipse.
Then create 2 triangles. Union the right, subtract the left.
Now you can duplicate it 3 more times to get an entire circle..
​
Here's an example I created quickly.. it's rough around the edges, but I hope you'll get the idea: https://www.figma.com/file/OFiiPprfAMYYyQgnKNOIw6/Untitled?node-id=1%3A29
I'm not sure about exporting a gif from Figma, I kinda doubt it? but I use a screenshot/screencapture app called ShareX ( https://getsharex.com/ ) and you can do a screen record of any part of your screen/specific windows/apps that captures straight to a gif (or mp4). That might be a way to achieve the same result? ShareX is for windows but I'm sure there is a Mac alternative. Plus it has tons more useful functionality and is super customizable.
So you want a master slide component and have the nesting but retain the inherited overrides in the example on the right.
I don't see how you'd achieve this without 4 unique masters (body, master, site link, cta) PER slide, and that isn't supported. Probably due to complexity and limited use case. Maybe you could join waitlist for the Automator plugin as this could be automated process?
https://www.figma.com/community/plugin/1005114571859948695/Automator
Just did a test. So much faster and easier to use than https://www.figma.com/community/plugin/856651176156241740
It generates so much code though. It could be that our designers are adding a lot of boxes in boxes instead of adding padding. Like 5 times the amount of code that is actually needed.
I'm blaming my designers 😄
It's kind of a mess and needs cleaning up, but try this out. The top border, button text, and bottom border form a 3-layer vertical autolayout, and the top and bottom borders are their own horizontal 3-layer autolayouts to form the border and gap. The left and right borders are just inner shadows on the text layer.
A quick search and found this plugin that should take care of you!
Edit: I should say I haven’t used this, so not sure how effective it is.
Hey there, we built a Figma plugin called CopyDoc to help make this workflow a bit easier. It lets you export your text from Figma to a CSV file (with custom columns for each language/variation), allowing you to edit the spreadsheet externally, then automatically re-import any of the updated columns back into your Figma designs via the plugin again. Hope it's helpful!
I’ve been looking for something similar and came across Ditto just last week. Haven’t tried it yet, but I’m curious if anyone has experience with it.
You need to either use a mask or a frame with clip content. Here is a quick demo with animation on drag: https://www.figma.com/file/nukBHoDFglZInp4Qd8yOCP/Parallax-Demo?node-id=2%3A22
Also, check out this design system example:
for sure possible! i use a variant randomizer plugin for random data visualisation (graphs and such), and could definitely work for your case as well : D
Instead of designing for a particular size you should test your designs across all the popular viewport sizes. I had the same problem, so I created a plugin to help me with that. It is called ... well.. Viewports! Sorry for the shameless plug, but I believe it would help you.
If I understand you correct, you can try this trick:
Create a 0.1 width/height frame and name it BG, move BG frame into parent auto layout frame, disable clip content for BG frame and edit background in it. You can inspect here:
https://www.figma.com/file/JAxJplGW7LHlZoZW32GLZS/Auto-Layout-BG?node-id=0%3A1
Browse for mockups in the Figma's community section (or google them & cut them as u/Eightarmedpet suggests), create the shadows using shapes with layer blur (maybe masks as well) and the background can be achieved combining gradient fills with shape blurs or look for a gradient generator plugin.
Here, duplicate the file and play around with it:
https://www.figma.com/file/OXkXfkdE69x2f9V9Rc0ZNk/Mockups?node-id=0%3A1
Hope you find it useful 🤙
That's digital black+white noise with a radial gradient over the top. (at least for the basic dark background). There's a nice Noise plugin: https://www.figma.com/community/plugin/752558325552095625/Noise
u/Geiras alright man. I did it.
I built a plugin to change the distribution mode. I just submitted it to be published in the figma community. If it's available, it'll show up here:
https://www.figma.com/community/plugin/990663129955266740
cool.
Auto Layout is definitely accessible from API
https://www.figma.com/plugin-docs/api/properties/nodes-layoutmode/
might be me to make that
You can get free mockups of devices of your choice online. Apple's Human Interface Guidelines have great apple device mockups. Personally, I prefer to make my own mockups, its pretty easy. Remember you don't need to show the exact device, the form of the device is good enough i think.
To make an artboard into 3D I use this Figma Plugin Isometirc
Hope this helps.
- Auto Layout. It will do a lot of the heavy lifting for you.
- Fixed Aspect Ratio (https://www.figma.com/community/file/873125264217713781) will allow you to have complex component that scale beautifully, with a little prep work.
- Auto Layout. Can’t stress it enough, proper set up of components, as well as running through them again once you place them in new containers to makes sure things like ‘full width’ are properly set will allow you to go from desktop to mobile fairly easy.
See file below. There are many different ways to achieve this look, this is personally how I would do it. It uses 3 auto layout frames (one for each text, and one which houses the two frames.
Three key settings needed:
- the mother frame is set to "space between"
- the right frame height is set to fill container and the content is aligned to bottom right.
- the left frame height is set to fill container and the content is aligned to top left.
https://www.figma.com/file/eCjAi6xb0FjtGxdlIvJUJp/Untitled?node-id=0%3A1
Since you want to have a selection alongside it, you'll likely want to just fake the overlay using two frames instead of native prototype overlay feature. I put this rough example together for you:
https://www.figma.com/file/hXPizXsde9fpghqDusdruI/Overlay-Scroll-lock?node-id=0%3A1
ok, I think I figured it out:
https://www.figma.com/file/oyQN2n86NPaKaZZpPznXj1/Vertical-Align?node-id=0%3A1
So text box must be an auto layout.
The text box itself must be 'fill container' horizontally and 'hug contents' vertically.
Auto layout frame (which will have the white fill+blue stroke+padding) must have a fixed width with constraints set to 'left and right', while having the height set to "hug contents" and constraints sticking to the center.
The background box only needs to be set to stick to 'left and right' AND 'top and bottom'.
EDIT: Feel free to duplicate the file to your drafts!
umm so u can't exactly code the ui u hav to look at the ui n make ur own code for the app/web u designed ,if u don't wanna code but want the app to be functional u can always prototype it
I always like to have fixed gutters with flexible column widths. I used to do this a lot with layout grids but now I just use Auto Layout when possible.
You can do this using the space between items property on a frame with auto layout and setting all of the elements for each column as "fill container" and it will keep a fixed gutter and the column widths will be flexible.
An example:
https://www.figma.com/file/NjBUnHLUvN20RV0l3YUKyr/columns-with-auto-layout?node-id=0%3A1
Looking through the plugin library, I found this, which may help you...
https://www.figma.com/community/plugin/886379932197117140/Restore-Image-Dimensions
You can try this plugin
https://www.figma.com/community/plugin/754404293457940119/Component-Master-Manager
Let us know if it helps
There are ways to do that, maybe not as clean as fluid as you'd like but by making the circles one thing and the flexible length pill another you can do it - https://www.figma.com/file/v119sMRpObKoAEo8l0aJl5/Test?node-id=23%3A44
Take a look at the relationship between the Master component and its children.
​
https://www.figma.com/file/iP2i0zzoHkzncHd5GAVJss/Master-Components?node-id=0%3A1
​
Added some notes and organized the layers for you. Cheers!
I was able to create it using a gradient fill on an autolayout frame. It sizes to the text content horizontally but only works on one line.
Here's the figma file: https://www.figma.com/file/GHwKYfZkrABHCNjKRqbFTo/Untitled?node-id=0%3A1
add a small transparent box to the auto layout and put it above the text. take a look here:
Are you trying to name them via the layers panel or properties panel? I highly recommend using the properties panel. You should be able to add all of your properties, select all of the variants you want to have the same property, and then type in the value. Recorded a little loom to show you what I mean: https://www.loom.com/share/9b9f9e6e3cb740b881146fafd4bd08b7
I recommend using 1200px as your "extra-large" breakpoint size and making your margins 24px or 48px. This article explains why 1200px is a good size - https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/
This is one of the most beginner friendly and comprehensive resource on learning Figma. It's a course created by students of UC Berkeley product design program.
Course is hosted on notion and all videos are on their YouTube channel.
https://www.notion.so/Introduction-to-Figma-Decal-1af70b8891634923bed87bdda4d64640
And, if you are want to take your skills to the next level, then watch tutorials by Javier Alaves on YouTube. He has covered almost everything you need to know about Figma.
There is this gem mine which I found when learning UI/UX which was a complete game changer for me
https://www.notion.so/The-Vault-Nguyen-s-Design-Resource-stash-b6b411b7f66549d09b505348472cd593
This has all the resources and articles if you wanna learn anything 💯
Designs on Figma can be exported as SVG files and imported to the app. I am planning to implement a feature which will allow you to import design directly from figma.
Feature requests and bug reports will be very much appreciated! You can do so in r/vector_editor
Try it out here: Android / iOS
Thank you very much!
Yep, that is definitely possible. Nothing in there that the plugin API doesn't allow.
https://www.figma.com/plugin-docs/api/api-reference/
Alternatively, is probably also be possible with the REST api. Not as familiar with that one.
Sure, here you go
- Click the first one. Variant Interaction.
- Click the second one. Prototype interaction, no Variant Interaction.
If you don’t mind your inner elements of the parent frames can be decimals, give this plugin a try. Scale
Select all the frames you want
Open plugin
Enter Width!
Everything will get scaled
You can add auto-layout on the switch component and change the padding values in the instances. Looked interesting, gave it a try: https://www.figma.com/file/OSIVGEDmjdE1rj2qiKAgRl/Switch?node-id=0%3A1
Feel free to duplicate if this solved your problem 🤝
Hi there, we built a Figma plugin called CopyDoc to help with this.
The "Sync Spreadsheet Content" feature lets you sync text and images from a Google Sheet URL (or a local Excel/CSV file) to your selected Figma layers. This is pretty similar to how Google Sheets Sync works, where you essentially name your Figma layers the same as the column titles in your spreadsheet to sync the content into Figma.
There's a video tutorial on our YouTube channel with a walkthrough of how this feature works, too. Hope it helps!
Figma is a thinking and communicating tool. This page gives a good hint at how it can be used throughout the entire design process: https://www.figma.com/design-process/
It’d be helpful for you to get to know common design methods besides prototyping screens: journey maps, information architecture maps, style tiles, and more.
By far the most valuable use for Figma for me as a designer and researcher is designing multiple concept approaches, sharing those designs with the team, and iterating on those designs. Then we turn those screens into interactive prototypes to test them with users, and use user feedback to iterate yet again. Another useful thing for you might be to read some articles on design feedback :)
Thanks for having an open mind and seeking to understand!
thanks, you are correct in the way i've built it.
looks like i need to investigate interactive components more...
here is the link: https://www.figma.com/file/6FWdgwHWiKUOj2MJZlPd7W/Demo-Page-2022-(Copy)?node-id=0%3A1
Without anything selected hit F or A and on the right panel you'll find several frame templates, and there you can find the Social Media ones.
If you want to create your own templates, install this plugin: https://www.figma.com/community/plugin/822721538784122690/Custom-Frame-Presets
🤙
Hey there! We built the Emailify Figma plugin that the commenter mentioned above. Just wanted to clarify how it can help with designing and exporting HTML emails in Figma.
In terms of design, The plugin comes with a bunch of common, pre-configured email components that you can add to your email frame and customize the design and content of in Figma. You can also create custom component layouts using a component builder feature included in the plugin.
You mentioned that you're using SendGrid, so you'll be able to export your design from Figma to HTML and paste that code into SendGrid when you're creating a new email template; or if it's going to be sent via the SendGrid API, you'll be able to use the same HTML as part of the body in your API request when you send your triggered emails.
You can check out some of our video tutorials and detailed documentation for the plugin here to get a better idea of how it works, too. I hope that helps, and feel free to message me if you have any questions!
I appreciate the comment but I am still having trouble & the others that offered help never bothered to actually help.
Do you mind joining in & checking out my work? Im stuck.
https://www.figma.com/file/JSas1VRkbV03oL7hcVMcVR/Untitled?node-id=26%3A45
This will be pretty obvious, but if you want to know how those components are actually built in Figma, I highly recommend browsing the Figma Community - UI Kits category.
Here's a plugin where you can restore the original size of the image. Not exactly what you're looking for, but at least you know the maximum size you have to work with without upscaling your raster image.
Well I couldn't figure it out myself, but luckily someone else has already figured it out for me!
I found this community file that has what I'm looking for. I still don't really understand how it works even looking at the file structure...
Thrilled to launch our first Figma plugin.
A library of auto layout UI elements and blueprints.
https://www.figma.com/community/plugin/1060213973572396708/Figit---Auto-Layout-UI-Components
For sure, here's the link: https://www.figma.com/proto/sUDv4dNvAfOD2GYTjDyP1Q/Untitled?page-id=0%3A1&node-id=2%3A128&viewport=241%2C48%2C0.53&scaling=min-zoom&starting-point-node-id=2%3A110
You can recreate the error by navigate between About and Home (home icon) in the nav
I've stepped away from adobe. But there premiere pro or after effects work great. But are paid and expensive (in my opinion).
Nowadays I use Da Vinci Resolve. It's free (for 90% which has all the features ypu want), contains extensive tools for video cutting and editing, audio editing, visual effects, colour grading. Tons of tutorials and with a little knowhow visuals fpr clients can be easily created.
Alternativeto.netalternativeto.net is a great resource for searching for alternative programs.
i was trying to imitate this , but it has a scroll down on click and component visual change, which are things figma can't do at the same time even with interactive component
Hi u/B-lovedWanderer, sure!
It's a new concept, alike a landing page + pitch deck, which you can publish instantly from your Figma mock-ups, and share it with folks publicly. Viewers can upvote/rank features, subscribe to updates, share it, and possibly even purchase the product (at a steep discount) before it's built.
A similar, light-weight example is what ProductHunt is doing with Ship: https://www.producthunt.com/ship
The value is half in getting feedback, and half in growing an audience before the product is released.
What do you think?
Many tools use Gifski to create GIFs, such as ScreenToGif. Basically Gifski is just an encoder. I use ScreenToGif to create GIFs of screen recording. It has a simple graphic interface. You can record screen or even import existing video. Do some basic editing. Export it (It knows more than just GIF).
Otherwise, I use https://ezgif.com/ whenever I need to do something with GIF (create GIF, optimize, crop, add text…).
Place an image in Figma via SHIFT + CMD (⌘) + K, or Press CMD (⌘) + / and enter Place Image… If you choose multiple images, click to place them on the canvas or click on top of another image to replace the image.
Double-click the image to view some editing optons - Exposure, contrast, saturation, etc.
You can change the Image's Blend Mode, like Photoshop. You can also change the image Fill to Fit, Crop, Tile.
To export the image, click on it, then choose Export and make your selections.
You might want to give Paste to Fill a try, from the Figma Community:
https://www.figma.com/community/plugin/740097744539225981/Paste-to-Fill
Using Paste to Fill, you could edit in Photoshop, and export your image to an accessible server and then use the URL to place the image in your Figma file.
I highly recommend that you use Squoosh to reduce the image file size for faster web performance and better SEO. Squoosh reduces JPGs, etc. by 90% with no loss in quality.
We tried embedding Figma into Storybook, which did not work well. Then Storybook lost momentum for other reasons.
There was another solution to use JSON to send/receive content in Figma, which may work.
There are a lot of community plugins, such as https://www.figma.com/community/plugin/854338091621516631/React-Figma, but the quality of code or customization may not be exactly what you need.
I am pretty sure AirBnb has move to Figma, so they may have something in the works aside from their previous Sketch solution.
I gave it a quick search, but everything sounds a bit more involved.
Animating in figma... well, it's really "prototyping" as you're not setting key frames or anything. It's pretty easy. Video 1, Video 2. You just get into Prototype mode (top right, next to Design), select the layer you want, drag the blue dot to the next frame or state, and define the interaction.
For example, the first IG press, you'd have the phone home screen as a frame and the pressed IG state as another.
- You select the un-pressed IG layer and
- drag the blue dot to the pressed IG state,
- then define the interaction as "On Press, instantly open overlay, in a manually defined location."
It's done in a GUI so it's not as lengthy as me typing this. Takes maybe 2 - 10 min to get it right.
But then you gotta add a follow up where the IG app opens after a brief delay, which would be another frame to serve as overlay...
And with the lottie plug in, it might be easier than than the whole export to AE situation.
I just built a Figma plugin <strong>FrameSearch</strong> to solve this problem. It helps you to search for any frame across all the pages by its name, jump and zoom into any frame you are looking for. Similar to but better than (hopefully) the search option we are missing in Sketch.
Hope it is helpful!
Auto Layout is very powerful but a bit confusing at first. Figma has some great autolayout tutorials if you can learn from videos.
Try out this file to play around and see if it help. https://www.figma.com/community/file/784448220678228461
I'm not sure if I'm still struggling with the effects of my booster jab and can't read properly but it doesn't sound very complex what you're asking.
I think the confusion is using the word frame but it's absolutely fine to have a frame within a frame.
Is this what you want to achieve?
There are two flows there, Flow 1 is two frames linked with the clicking interaction. Within each of the frames is another frame - the green box. When No is clicked the box has a pass through value of 0%, when yes is selected it's 100%.
Flow 2 uses interactive components as a sort of _overlay_
Thanks for all the love. Here's the link. Feel free to duplicate and play around.
https://www.figma.com/community/file/1054810236273824596/lolsys-%E2%80%94-DAW
It’s a grain texture. A layer of noise that is on top of the image. Use a blend mode to blend it with the underlying image.
You can generate a noise layer with this plugin https://www.figma.com/community/plugin/752558325552095625/Noise
This plugin renders a random noise pattern as an image. Copy this image and paste it as a fill layer on top of the image (or any other layer). Choose a blending mode that suits the desired effect and tweak the opacity to balance the result.
It’s cool because it gives an “analog” feel to the image. As if it’s printed on paper.
Made a community file + walkthrough video specifically for this case…
It’s an approach I’ve refined that helps establish a scalable form system without variant overload.
I think you might find it helpful! Obviously there are many ways to do this. But I think this approach will definitely spark some ideas — https://www.figma.com/community/file/946766673072149394
That’s about how I do it as well. There are occasions when things feel over-nested, but I like treating each piece of a field separately (label, field, caption).
You can dig into my design system to see how I set up components. There’s lots in here!
https://www.figma.com/file/5faUrKVB8SwysKS6obonBQ/?node-id=29320%3A42198
Here's a great support article on this straight from Figma, basically you should look into Figma design system organizing to get some ideas on how you can go about it.
Remember that you can have view-only projects in teams so that you can have component/style files that everyone can see and use but only people with edit access can update.
Whether to have separate files or components or variants for different sizes is really context-dependent and ultimately a choice you should make based on what makes most sense and is most straightforward. Ideally involve others in the process.
I commented on a different comment in this same thread with some of the things, but overall in a nutshell… it just works better, faster, the company is very agile with new features, haven’t ever had a crash, works on any computer not just Mac, easier developer handoff, better community features and connectivity, and overall… just great to work in. It carry’s over so much of what XD and Sketch do well with interface design, but also lets me create (easier anyway) things like this, which was a fun project a couple months ago. (Any anyone can download for free)
You can write to them on the Figma Forums, it may help to get this issue solved.
Otherwise, you can use a plugin that will resize the image you use, it may help with performance:
https://www.figma.com/community/plugin/869495400795251845/Downsize
Have you watched tutorials? That way you wouldn't have to just guess. For example the two main ways of grouping things are groups and Frames, watch a video on that to learn about the difference. And learn about contraints so that you can understand how to resize components properly. As for fonts, yeah there's no preview which is annoying but what truly makes figma great are all the resources you can find in Community, such as the plugin Better Font Picker, which will give you fonts previews.
I understand you're frustrated but there's so many great videos or articles from Figma themselves (on their website or YouTube channel) or from other creators that will explain all the basics. Once you've understood them it'll be much easier to use the program and you'll discover more things by yourself.
In the Community, figma also sometimes has these "playground files" meant to teach you about new features. For example, try out this one about interactive components, it's a really useful feature: link here
It sounds like you either need to organise your pages under one project with some clear nomenclature to distinguish the different parts or create styles and components which you share across all relevant projects, which apparently is possible when using a pro account.
https://www.figma.com/best-practices/components-styles-and-shared-libraries/
I’m new to Figma, so this is purely my understanding but if any seasoned user has guidance, I’d love to know as well!
Aha! That's an awesome workaround! Thanks so much, learned something new about resizing an element inside autolayout itself this way to get it to behave! Huge thanks for the video!
Normally this would solve the problem, but in this case the alert will sit as part of larger vertical auto-layout (most of the page, inside another parent) with stretch to both sides set so once I put it into the page layout I'll break it and the workaround with it. I'm so sad that a text box version of text tool doesn't behave how I would expect it to and doesn't respect the padding :/
I think the default shadows that tailwind provides are decent. If you need help translating the CSS to Figma just let me know! I'm sure there's a Figma community file that has them as well.
You can also try protopie. It does support passing data. And it allows for far richer interaction design and prototyping that figma. Axure could also perform this.
Personally I find protopie much friendlier than axure, even though I have used axure much more in the past.
today is my turn to give back to this sub-reddit which gave me much in the past 🙌
Across the years I’ve shipped hundreds of product releases, and consistently faced problems with measuring the quantitative impact for our releases. So a colleague and I decided to fix that! 💪
It's called "Figma tracking", what it does is that it makes your product tracking transparent inside your favorite design tool: https://www.producthunt.com/posts/figma-tracking
Would love to get the community feedbacks on it! 🙏
cheers
It's not perfect, but the closes working thing I've found for the same use-case is the "HTML to Figma" plugin (https://www.figma.com/community/plugin/747985167520967365/Figma-to-HTML%2C-CSS%2C-React-%26-more!)) Sometimes it has problems with getting fonts and some padding, but it has saved me hours of work. Maybe it's useful to you as well
I'm working on a project focused on this problem: https://www.figma.com/community/plugin/1031998871372194709/Rendition%3A-Figma-%3EReact-Components-in-one-click
We just launched a few weeks ago, so would be awesome to hear your feedback!
disclaimer: react only right now, not react native.
> $3/month is pennies to a professional. Given that >90% of my design time is spent in Figma, and that the small additional cost will help fund development of future FigJam features, I'm totally fine with it.
I mean, it's pennies if it's only the designers who are using it. But to really get any benefit from FigJam you need to be regularly collaborating with product and engineering teams. And getting a license for everyone in those teams is a much harder sell, especially when they are already using diagramming and charting tools that they're more familiar with.
I think it's a much easier sell if it's just for you and any designers you work alongside with -- but I'm just not convinced it's that it's very useful as just an internal design team tool. I could be wrong on this, but I just feel like the real value comes from other with other teams and stakeholders outside of a design team.
There is some promise with the open sessions concept, which in theory could mean that only designers need to have editor access. But having trouble seeing how this would be useful for anything other than occasional, one-off workshops that have remote attendees.
Thank you! I'd love to hear your thoughts. You can give it a try here: https://www.figma.com/community/plugin/991438050654881175/Makers-%E2%80%A2-From-Figma-to-Site
This is an explicit use case for Figma’s branching feature. Create a branch and share the link to the branch. Then keep doing whatever you want on the main file/trunk.
I haven't tried this out with 6 yet (we're still on 5), but it sounds like it should for you. It's the best compromise I've used so far in dealing with Font Awesome in Figma - the variable size was killing me in components, and I didn't want to have to manually build a fixed-size version of each icon, at all the sizes I may need.
https://www.figma.com/community/file/994237671938398148
I'm not sure if it works with gradients, but you could try using Similayer to select all the layers that use the same gradient across multiple icons. Then swap them with a monochromatic version. If you try it, let me know if it works.
You want to make the interactive component switch between the states on hover/click and then navigate on click to a new frame? Simply make the variant states toggle within the component and then add a click event to the instance of button: https://www.figma.com/file/jneMb2NJeW7VYBusWh3nmn/Prototype-Example?node-id=0%3A1
FYI - here's a working example of a generated site from this Figma file
It's a "Health App" - you cam create workouts, meditations and meal plans. It has reviews, discussions and you can log activity - like gym workouts.
We wanted to illustrate some common CRUD patterns, menus etc - so can really apply the concepts.