The Fun of Iterating
The Fun of Iterating
  • 10
  • 158 544
How can transparent palettes change your UI designs — Alphredo.app
Alphredo - alphredo.app/
🆕 Alphredo for Figma - www.figma.com/community/plugin/1139249018997247390/Alphredo
Twitter - AdamPrzewoski
In this video, we talk about how transparent palettes can make your designs more vivid and your life easier. Then we go through Alphredo.app, an online tool allowing you to create transparent palettes within seconds, based on the colors you already have.
มุมมอง: 10 451

วีดีโอ

Developers: Inspect & play with components without edit access
มุมมอง 1.2K3 ปีที่แล้ว
Inspect components in Figma faster by playing with them just like designers. Surprise: you don't necessarily need to be an editor on the file to be able to that. Twitter - AdamPrzewoski
Responsive & Interactive Tables in Figma - Part III: Row components
มุมมอง 14K3 ปีที่แล้ว
Figma Community File - www.figma.com/community/file/986157598643454637/Powerful-Tables-in-Figma Twitter - AdamPrzewoski Interactive, responsive, and powerful tables in Figma. Control all your rows through a local component and populate your table with data easily using plugins. Google Sheets Document: docs.google.com/spreadsheets/d/1daRzVxqd2PlPuYvB6JjP_int7X38h4o1hNhoR_j5lbc/edit?u...
Responsive & Interactive Tables in Figma - Part IV: Assembling a table
มุมมอง 16K3 ปีที่แล้ว
Figma Community File - www.figma.com/community/file/986157598643454637/Powerful-Tables-in-Figma Twitter - AdamPrzewoski Interactive, responsive, and powerful tables in Figma. Control all your rows through a local component and populate your table with data easily using plugins. Google Sheets Document: docs.google.com/spreadsheets/d/1daRzVxqd2PlPuYvB6JjP_int7X38h4o1hNhoR_j5lbc/edit?u...
Responsive & Interactive Tables in Figma - Part V: Populating with data
มุมมอง 9K3 ปีที่แล้ว
Figma Community File - www.figma.com/community/file/986157598643454637/Powerful-Tables-in-Figma Twitter - AdamPrzewoski Interactive, responsive, and powerful tables in Figma. Control all your rows through a local component and populate your table with data easily using plugins. Google Sheets Document: docs.google.com/spreadsheets/d/1daRzVxqd2PlPuYvB6JjP_int7X38h4o1hNhoR_j5lbc/edit?u...
Responsive & Interactive Tables in Figma - Part I: Introduction
มุมมอง 21K3 ปีที่แล้ว
Figma Community File - www.figma.com/community/file/986157598643454637/Powerful-Tables-in-Figma Twitter - AdamPrzewoski Interactive, responsive, and powerful tables in Figma. Control all your rows through a local component and populate your table with data easily using plugins. Google Sheets Document: docs.google.com/spreadsheets/d/1daRzVxqd2PlPuYvB6JjP_int7X38h4o1hNhoR_j5lbc/edit?u...
Responsive & Interactive Tables in Figma - Part II: Cell components
มุมมอง 22K3 ปีที่แล้ว
Figma Community File - www.figma.com/community/file/986157598643454637/Powerful-Tables-in-Figma Twitter - AdamPrzewoski Interactive, responsive, and powerful tables in Figma. Control all your rows through a local component and populate your table with data easily using plugins. Google Sheets Document: docs.google.com/spreadsheets/d/1daRzVxqd2PlPuYvB6JjP_int7X38h4o1hNhoR_j5lbc/edit?u...
Draggable Windows - Overlays that you can actually click and hold to move
มุมมอง 18K3 ปีที่แล้ว
Figma Community File - www.figma.com/community/file/968396781657552704/Draggable-Windows Twitter - AdamPrzewoski Draggable windows (or other kinds of overlays) in Figma? No problem, thanks to frames' overflow behavior property, which we can access under the Prototype tab.
Boilerplate Components - Editable components with a default content in Figma
มุมมอง 8K3 ปีที่แล้ว
Figma Community File - www.figma.com/community/file/964867602466264946 Twitter - AdamPrzewoski In the previous video, I explained the concept of Placeholder Components - an easy & powerful way of avoiding detaching by making a place for your custom content to be “injected” later. But with components such as dropdowns, in general, you might be okay with having some “default” content ...
Placeholder Components - Editable components without detaching in Figma
มุมมอง 39K3 ปีที่แล้ว
💡 Be sure to check out a follow-up bonus episode on Placeholder Component's younger cousin: a Boilerplate Component - th-cam.com/video/kVZw-97tklA/w-d-xo.html Figma Community File - www.figma.com/community/file/963783690783191844/#1-Placeholder-Components-—-The-Joy-of-Iterating-with-Figma Twitter - AdamPrzewoski Editable components without detaching? This is possible thanks to Place...

ความคิดเห็น

  • @stepanstepan0101
    @stepanstepan0101 29 วันที่ผ่านมา

    Alphredo is exceptionally helpful. Thank you for your work.

  • @RyanVarley-h9n
    @RyanVarley-h9n 4 หลายเดือนก่อน

    Hands down the best figma tutorial I've ever seen. You're an absolute gem!

  • @NovaAquarius
    @NovaAquarius 5 หลายเดือนก่อน

    What is this pledge.up tool? Unable to find it. It looks cool

  • @almaslac
    @almaslac 5 หลายเดือนก่อน

    Thanks, very useful video!! What tool are you actually using to draw on the screen as you present?

  • @samislam2746
    @samislam2746 5 หลายเดือนก่อน

    It's insane figma does not support child components and I had too look for this

  • @Dalairen
    @Dalairen 5 หลายเดือนก่อน

    Figma still lacks some necessary functionality. :(

  • @vasavihema
    @vasavihema 5 หลายเดือนก่อน

    THANK YOU FOR THE TUTORIAL AND THE FIGMA FILE

  • @_borgeslais
    @_borgeslais 6 หลายเดือนก่อน

    Thank you so much!

  • @bl_int
    @bl_int 6 หลายเดือนก่อน

    the second key on 7:16 , you can hack for the content can be parent on nested component.

  • @blackshirtdesign
    @blackshirtdesign 6 หลายเดือนก่อน

    Just way too much rambling with no value, blah blah blah painful

  • @tjfigma6525
    @tjfigma6525 9 หลายเดือนก่อน

    Please come back! Love your videos <3

  • @fenrisares
    @fenrisares 10 หลายเดือนก่อน

    Thank you for such insights, was very useful information!

  • @bogdandjordjevic9947
    @bogdandjordjevic9947 10 หลายเดือนก่อน

    Bro, slow down! We can't follow you at this speed :D Please update it with the latest version of Figma so it is easier to follow along :) Keep up the good work! Cheers!

  • @tomashudolin7197
    @tomashudolin7197 11 หลายเดือนก่อน

    And please. Will it work when I would like to add a new column? Because it looks like solution for fixed amount of columns only, so if I would like to make one table with 5 columns and another one with 15 columns I have to make two components. And if I have 10 tables with different amount of columns...

    • @tomashudolin7197
      @tomashudolin7197 11 หลายเดือนก่อน

      I've found a solution.

    • @TheFunofIterating
      @TheFunofIterating 11 หลายเดือนก่อน

      @@tomashudolin7197 Yes, that's the thing about this approach: for each table you create one local component that controls it. This local component should be just a simple horizontal Auto Layout frame with no styling, no states, nothing. It just stracks your cell components. And then you put that local component into a Row Component that gives it a styling, hover states, etc.

    • @tomashudolin7197
      @tomashudolin7197 11 หลายเดือนก่อน

      @@TheFunofIterating Thank you for your answer. I've made a row component with layers contains 20 columns and I can enable/disable columns when I use this component and then just adjust complete width of this row.

  • @markovojsovic186
    @markovojsovic186 11 หลายเดือนก่อน

    what are the frames you prepared before and used in the very end of the video? why is it displayed as black "component" in layers list? thanks

    • @TheFunofIterating
      @TheFunofIterating 11 หลายเดือนก่อน

      These are just future component containers that I created ahead of the time. You'll see me putting components we'll create later in the series inside of these containers. The reason it appears as a "black component in layers list" is because I just used the "❖" symbol in the frame layer name.

  • @julialee179
    @julialee179 11 หลายเดือนก่อน

    Pasting the full HSLA value into the figma hex field works! No plugin needed

  • @thiagovilla970
    @thiagovilla970 11 หลายเดือนก่อน

    Super handy.

  • @celestelim867
    @celestelim867 ปีที่แล้ว

    can you populate the data from google sheet into different frames instead of table? I created a frame and made it a component, and i want the variants to pick up data from the google sheet.

  • @ThereseSherman
    @ThereseSherman ปีที่แล้ว

    BRAVO!

  • @rollandvarghese1064
    @rollandvarghese1064 ปีที่แล้ว

    Thank you so much for this tutorial. I have tried this and it works. However when I close and reopen this draggable window, it opens at the last close location. Any clues on how to revert to the starting position before dragging the window?

    • @palaje
      @palaje 11 หลายเดือนก่อน

      On the screen, before the transition to the draggable element screen, set the transition state management to "Reset scroll position"; this should reposition the draggable element to the original state.

  • @virajyesudas8662
    @virajyesudas8662 ปีที่แล้ว

    Could you maybe make a video that explains this practical application in a real use-case situation? Great Stuff!

  • @quangkhuedinhdo
    @quangkhuedinhdo ปีที่แล้ว

    Thank you. Your video is very helpful, and your explanation is concise.

  • @faranakvn3976
    @faranakvn3976 ปีที่แล้ว

    This was amazing! well explained! I was having this problem and looking at so many videos and didn't understand what they did or said! Thanks to you and your video my problems is solved!

  • @mfucek_
    @mfucek_ ปีที่แล้ว

    Great video! Just one question though, in the beginning you showed a drag-and-drop action from the assets sidebar into the component to replace the slot. I couldn't get this to work in my files, any tips how I could recreate this?

  • @good6894
    @good6894 ปีที่แล้ว

    Was this recorded in a tiny room? lol Crazy reverb sound! But great video none the less! Thank you for it :)

  • @KaueLima
    @KaueLima ปีที่แล้ว

    I have been designing products for over a decade now and, despite some improvised solutions here and there, I always had the worst time with tables. This video made me think about creating them differently and changed my design process ever since. I have never thought of the concept of local components like you use here and boy, they are wonderful! Thank you for making my daily life at work better :). Your content is great!

  • @alissonsantoro
    @alissonsantoro ปีที่แล้ว

    Developing an interface to be programmed in React makes a lot more sense when using components. The purpose of "componentization" of system elements makes no sense when the user disconnects the variant from the main component, especially for a change within the component.

  • @ecila89
    @ecila89 ปีที่แล้ว

    I'm having an issue with the hover and selected states messing things up in the prototype. It removes the overrides and makes the height different, and sometimes the width also. I don't think Figma supports that many levels of nested components with interactivity.

    • @pabliche85
      @pabliche85 ปีที่แล้ว

      I have the same issue. Any solutions?

  • @lisamariecalvet
    @lisamariecalvet ปีที่แล้ว

    This was great. Thank you. Have you ever done a draggable component into a tree hierarchy? That's my task for this week and I cannot seem to fake it. :)

  • @lachicaSVT
    @lachicaSVT ปีที่แล้ว

    I'm still leanring Figma, great video but a little to fast for me to keep up.

  • @Introvernauta
    @Introvernauta ปีที่แล้ว

    6:10 Windows shortcut?

  • @SachinGawas
    @SachinGawas ปีที่แล้ว

    Awesome.

  • @lukasemory4476
    @lukasemory4476 ปีที่แล้ว

    In the beginning of the video, you said that you are still able to interact with elements beneath the window, though that wasn't part of the demonstration. do any additional steps need to be taken so that the page below the window can still be interacted with?

  • @azu0609
    @azu0609 ปีที่แล้ว

    is it possible to apply this to overlay? (i tried but can't move)

  • @FredrikParker
    @FredrikParker ปีที่แล้ว

    Easy to understand tutorials !

  • @vadymkot3974
    @vadymkot3974 ปีที่แล้ว

    I admire your channel

  • @RamizAzhar
    @RamizAzhar 2 ปีที่แล้ว

    How do you draw the screen while you are explaining?

  • @autorevolutionHQ
    @autorevolutionHQ 2 ปีที่แล้ว

    The only problem with the color scemes that every screen displays the content differenty. My main monitor on default settings darken the colors while my main screen is aesthetic

  • @kiastorm8641
    @kiastorm8641 2 ปีที่แล้ว

    This is exactly what I was looking for - thank you!!!

  • @lucsidebo123
    @lucsidebo123 2 ปีที่แล้ว

    This is so cool, thanks so much! This will be obvious but one thing I don't understand. At 5:30 when you duplicate the body row component, what setting makes it duplicate downwards? When I duplicate other things (and my body row) they duplicate on top.

  • @DustinYoung-dr4df
    @DustinYoung-dr4df 2 ปีที่แล้ว

    Well conceived video - great information, no wasted time. Thank you.

  • @chandima94
    @chandima94 2 ปีที่แล้ว

    Guess the video may need to be updated with the new Figma updates. Some things turn out a little different from your video.

    • @sarafutago5993
      @sarafutago5993 ปีที่แล้ว

      Are you referring to the ability to add a 2nd property to the set of components? As I don't seem to have that option, only 'create a new variant'...did you find a new note on this?

    • @sarafutago5993
      @sarafutago5993 ปีที่แล้ว

      I think I found one if not.

  • @MStrika1
    @MStrika1 2 ปีที่แล้ว

    Thanks for the video! I have found an issue in Figma, which transparency is not working well when you have components of two or more objects. Make objects with different colours and transform them into components. Create one single component with all three components of different colours. Change the transparency of those object components to mix the colours. Now, if you try to change the colour of any of the main component, the colour changes are not affecting inside join components.

  • @j.k24
    @j.k24 2 ปีที่แล้ว

    ghehe, it feels like i am on an airplane, great tut man, keep it going

  • @alexlapland
    @alexlapland 2 ปีที่แล้ว

    I really appreciate your videos - short, clear, and full of useful tips. Awesome work!

  • @alexlapland
    @alexlapland 2 ปีที่แล้ว

    This is the best tutorial on Figma Tables. Thank you very much.

  • @alexlapland
    @alexlapland 2 ปีที่แล้ว

    This is awesome!

  • @ameenoahmad
    @ameenoahmad 2 ปีที่แล้ว

    Thank you so so much for this video

  • @kathrynburruss5567
    @kathrynburruss5567 2 ปีที่แล้ว

    It would be amazing if this video could be updated with the recent Figma release of component properties

  • @gxramirez
    @gxramirez 2 ปีที่แล้ว

    is there a way to make the movable frame snap to the grid for alignment?