"In June 2024, we introduced a redesigned Figma-called UI3. With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content. - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI - Learn more about images in Figma: help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-design-files"
Nice short video. Note that the UI has since changed slightly: There's now a graphical selection for types of fills (including images) vs the old long text menu. Some other UI elements have been simplified and have a different look. But the basic functions are the same.
6 років тому+14
"Think of images as shapes with an image as the fill instead of a color" Niiiice...
I just want to command on how well done you did very good job on this video. It is very clear presentation. You introduced in the beginning what you are going to teach. In the end of video, you wrapped up what you taught. I also notice that you break up the video in different sections for audience to have a better search when we need to go back to watch again certain function. Last, your tone of speak was also perfect, no drag or extra wording. I am very impressed your presentation on this video. Good job! Thank you again.
I strongly miss some sort of "image library" because I use a lot of Copy & Paste for placing images and there is no way how to browse pasted images. If you want to change the images only way how to do it is to save them on the hdd. Would be nice to have some option to be able change the images also while using clipboard.
I have even more suggestions if you are interested :) One request was from developers, they are missing simple measure tool, to easily read spacings between objects. And me as a designer, I am missing simple "line" tool to create flows. Something like line tool to connect artboards. You can do it manually but would be nice to have a tool directly for that. Anyway, figma team already did a great job, and it's a pleasure to use figma! Thank you.
Thanks for the suggestion as well. While we don't have a line tool that connects frames for low-fi wireframes that you might see in a flowchart tool, we do have a prototyping tool that you could use as well ua-cam.com/video/-sAAa-CCOcg/v-deo.html Alternatively, you could use our line tool and create components out of them so they can be reusable and you can override attributes like their color etc.
Yes. Choose crop. Disselect the shape boundaries and select the image inside the shape by clicking it. You can move it in any direction. Take your mouse to the corners of the image and you can resize the image too.
When I first copy and paste my image in I could resize the image but after a while I can only resize the image box and not the image. The image would resize with the box but I can’t see the whole image. What I’m saying is the image has a very high resolution and I want the entire image shown in a smaller frame and not just part of it shown. Should I resize the image in Photoshop and then import it?
Hey CanalSemVinheta, the easiest way is probably to use the "Crop" fill mode from the Color Picker. Change that to Crop, and then you can click and drag on the canvas to move the image. Hope that helps! Be sure to join our Community Forum over on Spectrum here: spectrum.chat/figma
Hey Molly, you can't "crop" a vector shape, but you can try using a Mask, or a subtraction Boolean Operation to see if that fits your use case. If you're still stuck maybe you can give some more details or post your question on our Community Forum here: spectrum.chat/figma
But how would I change the color of an image? Say I have a white image, like an icon, and I want to make it colored, so I can have one white icon and simply set its color. Cannot find how to do that.
Hi fafase, you can always adjust your images using Image Adjustments, however you can't find and replace colors on a bitmap. If that's what you're looking for, you may want to work with a bitmap editing tool. If you have an SVG, you can adjust the fill of that from the Properties Panel.
Hi thanks for all these Tutorials . i have a question , how is it possible to import (a shape that includes an image ) to another program like Axure ? i have problem because when i copy my shape and image as SVG and then i paste it in Axure , i see just my shape and the photo has not been copied.
There doesn't appear to currently be a feature for such editing image wise. I know with text you can select multiple fields and change all of them to a different color simultaneously but doesn't look like the same application exists when dealing with images... it greys out and doesn't allow you to change the features of all selected images... just one at a time. HOWEVER if they're all the same image file, then it will allow you to select multiple images at once and tile them or fill, or whatever, buuuuut not the best functionality for most cases where we like to have different images. gl Definitely correct me if I'm wrong because I'd like to know that too.
Hey Sebastian, when you import an image into Figma, it doesn't maintain any links or connections to the original File, which means that it won't be updated automatically if you change the original source file. You can completely replace the Image in Figma just like you could with any other Image, straight from the Color Picker in the Properties Panel (Click on the Image Fill)
Hi Sabrina, a few things have changed about our UI over the years, but the functionality to use Image as a fill is still available if you click on the swatch, and change the dropdown menu at the top of the popover menu from solid to image. You can also paste directly into a shape, or use Place Image which we show in video 2 of our brand new "Figma for Beginners" series ua-cam.com/play/PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4.html
No offense but I think Figma is overrated. It is very easy to drag and drop images to any shape in adobe xd and you can easily adjust the image as well. And if you want to add multiple images you have repeat grids
![[Older version] Figma Tutorial: Auto Layout](http://i.ytimg.com/vi/NrKX46DzkGQ/mqdefault.jpg)
"In June 2024, we introduced a redesigned Figma-called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.
- Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI
- Learn more about images in Figma: help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-design-files"
Nice short video. Note that the UI has since changed slightly: There's now a graphical selection for types of fills (including images) vs the old long text menu. Some other UI elements have been simplified and have a different look. But the basic functions are the same.
"Think of images as shapes with an image as the fill instead of a color" Niiiice...
That was such a great tutorial, thank you!
I strongly encourage Figma to enable the drag and drop image into shape, like XD
I just want to command on how well done you did very good job on this video. It is very clear presentation. You introduced in the beginning what you are going to teach. In the end of video, you wrapped up what you taught. I also notice that you break up the video in different sections for audience to have a better search when we need to go back to watch again certain function. Last, your tone of speak was also perfect, no drag or extra wording. I am very impressed your presentation on this video. Good job! Thank you again.
Thanks for the feedback, Patricia! We're glad the video helped you!
I strongly miss some sort of "image library" because I use a lot of Copy & Paste for placing images and there is no way how to browse pasted images. If you want to change the images only way how to do it is to save them on the hdd.
Would be nice to have some option to be able change the images also while using clipboard.
Cool! Thanks for the suggestion.
I have even more suggestions if you are interested :) One request was from developers, they are missing simple measure tool, to easily read spacings between objects. And me as a designer, I am missing simple "line" tool to create flows. Something like line tool to connect artboards. You can do it manually but would be nice to have a tool directly for that. Anyway, figma team already did a great job, and it's a pleasure to use figma! Thank you.
Thanks for the suggestion as well. While we don't have a line tool that connects frames for low-fi wireframes that you might see in a flowchart tool, we do have a prototyping tool that you could use as well ua-cam.com/video/-sAAa-CCOcg/v-deo.html
Alternatively, you could use our line tool and create components out of them so they can be reusable and you can override attributes like their color etc.
I'm unable to drag and drop into shape like in XD or any other application with drag and drop support.
this is just the professional content -- nice video
thanks for the video. is there an option, like in XD to manually select the image section inside the shape - like a mask, but non-destructive?
Yes. Choose crop. Disselect the shape boundaries and select the image inside the shape by clicking it. You can move it in any direction. Take your mouse to the corners of the image and you can resize the image too.
this was driving me crazy trying to figure this out, god damn adobe XD spoilt me 😅 Thank you
Thank you!
Great tutorial. Thank you.
hi, is figma can copy image from google search and just paste in the shape like sketch??
please do it as it's in Adobe XD, much quicker and easier :)
Is there a way to scale free transform? So it doesnt stay proportionate to box?????
Thank you so much man!
When I first copy and paste my image in I could resize the image but after a while I can only resize the image box and not the image. The image would resize with the box but I can’t see the whole image. What I’m saying is the image has a very high resolution and I want the entire image shown in a smaller frame and not just part of it shown.
Should I resize the image in Photoshop and then import it?
Hello, will changing the image settings to "Fit" work for you?
how to copy color corrections (exposure, saturation) and paste to other pictures?
thank you
Hi, Can you show me how to add a watermark in the image using Figma?
Trying to find how to move the image inside the shape. Failling hard.
How to load an image placement gun similar to InDesign - and then paste/place to fit in each frame?
How can I just move an image inside a shape without moving the shape?
Hey CanalSemVinheta, the easiest way is probably to use the "Crop" fill mode from the Color Picker. Change that to Crop, and then you can click and drag on the canvas to move the image. Hope that helps!
Be sure to join our Community Forum over on Spectrum here: spectrum.chat/figma
@@Figma I mean who thought it was a good idea in the first place? The best way to resize without fucking the image up is holding the shift button
background image pixels issue occur in figma? how resolve this issue????
So thank you 🙏
Hi ,
I just like to know that is there any possibility to export a Original image used inside the shape ? How to export that?
what is the short cut for crop? so many clicks and dropdown
really wish you could drag and drop the image in the shape from windows explorer like in XD
Why can't I Cmd + C and Cmd + V to copy paste image on my macbook?
Nice
YO tengo una... ¿por qué no puedo ver mis imágenes en figma a la hora del prototype?
Very thanks!!!
Is there a way to open a photo from a Figma file and see its meta-data?
Is there a way to crop it into a shape, like a circle?
Hey Molly, you can't "crop" a vector shape, but you can try using a Mask, or a subtraction Boolean Operation to see if that fits your use case. If you're still stuck maybe you can give some more details or post your question on our Community Forum here: spectrum.chat/figma
thanks
But how would I change the color of an image? Say I have a white image, like an icon, and I want to make it colored, so I can have one white icon and simply set its color. Cannot find how to do that.
Hi fafase, you can always adjust your images using Image Adjustments, however you can't find and replace colors on a bitmap. If that's what you're looking for, you may want to work with a bitmap editing tool. If you have an SVG, you can adjust the fill of that from the Properties Panel.
Hi thanks for all these Tutorials . i have a question , how is it possible to import (a shape that includes an image ) to another program like Axure ? i have problem because when i copy my shape and image as SVG and then i paste it in Axure , i see just my shape and the photo has not been copied.
I still don't understand how to just squish an image inside figma along just one direction
How do you change image settings (fit, fill, etc) on multiple images at the same time?
Thats my question. Did you figure it out?
There doesn't appear to currently be a feature for such editing image wise. I know with text you can select multiple fields and change all of them to a different color simultaneously but doesn't look like the same application exists when dealing with images... it greys out and doesn't allow you to change the features of all selected images... just one at a time. HOWEVER if they're all the same image file, then it will allow you to select multiple images at once and tile them or fill, or whatever, buuuuut not the best functionality for most cases where we like to have different images. gl
Definitely correct me if I'm wrong because I'd like to know that too.
How image can place in actual size?
Is there any way to update de image i have already imported but modified outside Figma?
Hey Sebastian, when you import an image into Figma, it doesn't maintain any links or connections to the original File, which means that it won't be updated automatically if you change the original source file. You can completely replace the Image in Figma just like you could with any other Image, straight from the Color Picker in the Properties Panel (Click on the Image Fill)
Podia ter legendas em PT-BR.
Obrigada por compartilhar o conteúdo.
I am not offered the "image" option on my shape
Hi Sabrina, a few things have changed about our UI over the years, but the functionality to use Image as a fill is still available if you click on the swatch, and change the dropdown menu at the top of the popover menu from solid to image. You can also paste directly into a shape, or use Place Image which we show in video 2 of our brand new "Figma for Beginners" series ua-cam.com/play/PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4.html
i cant drag and drop all of a sudden.
so i cant just drag and drop an image into a circle? Damn that sucks...
Hi Dukez, you can use Place Image or select the circle and paste the image into it. But yes, you cannot just drag and drop.
No offense but I think Figma is overrated. It is very easy to drag and drop images to any shape in adobe xd and you can easily adjust the image as well. And if you want to add multiple images you have repeat grids
Ligma
thank you so much 😊
Nice