RTN - select parent level, RTN drops one-level at-a-a-time

\ (Backslash) raises drops one-level at-a-a-time.

Jump straight to inner element - CMD click.

Choosing siblings - use TAB to select through layer orders.

Select all ON SCREEN - Select parent frame > RTN

Re-arrange layer items - use [ = Bottom (Send Backwards) | ] = Top (Bring Forward) or CMD [ = Down 1, CMD ] = Up 1

Right click > Select layer > reveals all layers | CMD + Right click > reveals all layers

Nothing selected (press ESC) OPT L = Layer collapse

Open ALL - Select layer > CMD click ▾ (down arrow) > Reveals all inner layers

Hide/Unhide - CMD SHF H | Inverse (Hide/Unhide other layers) - Select anything > CMD P > Hide other layers

Lock/Unlock item - CMD SHT L . Unlock all CMD P > Unlock all items

Search - regular > Find and Replace | settings | Filter chips | > CMD R (Balk renaming) > icon ascending/descending using a Regualr expressions

Group icons with / (folder) - Select many > CMD R (Balk renaming) > type icon/ Current name

Switch ◇Instances - Make Frame f > click Resources SHF I > type what your looking for ‘heart’ > drag/drop x2 > leave one / vertically stretch the other. Then SHF I > 'pencil' > drag/drop over hold OPT > leave one then vertically stretch > the alternation is preserved. Use CMD OPT for individual nested items. Use 🎯 Target to select similar.

Select a complex ◇card, or ◇module > CMD P > Detach all nested instances

[Component Properties] Create ❖primary_instance swap (reg AL button w/ an icon, set as an ◇instance) > select ◇instance > right side bar, click Apply Instance Swap Property (right arrow into ◇instance diamond)

Apply Instance Swap Property

[Component Properties - Text] Start with a button, ❖primary_text > add another property (1st was the icon) , select Text > right sidebar, next to your text box, click right arrow diamond (right arrow into ◇instance diamond) > dialog box Create component property > name | value all good, Create property > check text pill or chip is now visible >

[Component Properties - Boolean] On/Off True/False. Start with a two button, ❖primary_variable + boolean and ❖primary_boolean > add 3rd property >

Traditional Method with ❖primary_variable + boolean

Select ❖primary_boolean1 > Add variant > Hide icon SHT CMD H > name, select Component Set > change Property (default) to Icon > select properties settings > change Values to Yes and No (i.e. this is a Boolean, therefore all it’s ◇instances will have a toggle) >

Boolean Properties with ❖primary_boolean button > Add variant select the thing we want on/off, i.e. the icon, or Pencil 1 > on this Layer, select Create boolean property icon >

Create boolean property

Note: Instance swap isn't Yes/No

[Component Properties - Input Fields] Create an input box f (frame) > 8 rad | with Sample text | button label label | Helper text > ensure all three elements are outside the frame > select all > make ❖Input Field > then…>

On/Off

Boolean asterix - select the thing we want on/off, i.e. mandatory asterix * > on this Layer, select Create boolean property icon

Boolean Helper text - select the thing we want on/off, i.e. Helper text layer > on this Layer, select Create boolean property icon > click Create property > Name: Show Helper Text | Value True >

Text

Text Label - select a text layer > on this Layer, next to that layers input field, click right arrow diamond > Name: Label | Value Label

Repeat for Sample Text and Helper Text. 📌 Pro Tip: Re-arrange Properties on the ❖Component using three little dots on the left of the property

Add Error State

Rename the original frame ‘field’ > drag out and create 2 copies, Create Multiple Components; ❖Field - Default | ❖Field - Error > CMD SHT R to replace frame with an ◇Instance of ❖Field - Default. Create and instance swap on ❖Field - Default | select the thing we want swap, i.e. ◇ Field - Default > under Parent component > click right arrow diamond > select Field - Default and Field - Error as Preferred Values

Can AL solve this?

[Variants + Component Properties] Create a button w/ an icon > convert to ❖Variant + Component Properties > create variant (right side bar) Properties > + > Variant > rename State | Default / Hover > change Hover to darker

📌 Pro Tip: Component Properties CANNOT change colour, must be accomplished with Variants

Apparently ‘Component Properties’ CANNOT change colour, must be accomplished with Variants. How is this better than selecting > changing fill manually

Colour change (states). Make a temporary iPhone frame, SHF I > drag/drop ◇Variant + Component Properties > SHF E > Link up | Set to Hover | Dissolve

Size change (sml > lrg buttons). Add 2 more Variants to ❖Variant + Component Properties > select both, duplicate > type +16/+8 to Horiz and Vertical Padding under Auto Layout > get component set to wrap (4-arrows-in-icon) > with component set selected Properties > + > Variant > Size | Default > Create Property

Select default|large + hover|large variant in your component set > right side bar, pull down size Value > Add new > type 'Large' .

Select default|large > State | Default

Select hover|large > State | Hover

[Show text] Add Text on/off. Select text > Use target icon to select all similar > Layer > click right arrow diamond > Create property > Create component property > Name: Show Text | Value: You/No > Create property

[Icon Instance Swap] Change icon instance to icon swap. Select the icon ◇instance > Use target icon to select all similar > Layer Parent component, locate the icon ◇instance > click right arrow diamond > Create Instant Swap property

[Bulk Changes] Refactor button Size | Text | State | L R Icons. Search merve gurler > open in Figma. Select L M S | all states | with icon L (add both later) > break apart CMD OPT B to AL > CMD OPT K (create componenets) Create component set > copy left chevron > select button > RTN > CMD V > left arrow x2 < to position > repeat for remaining 12 variants

For bulk; Select Component Set > Only Properties > + > is visible …>

Boolean #1 - ‘Icon Left’ > Create property

Boolean #2 - ‘Icon Right’ > Create property

Text #1 - ‘Button Text’ > Create property

Variant #1 - ‘State’ > Create property

Variant #2 - ‘Size’ > Create property

Select icon parent > ◇instance swap > in the Layer section select Apply boolean property > Icon Left. Repeat for Icon Right

Select text box > ◇layer swap > in the Text section select existing 'Text' Varaint > Icon Left

Select horizontal all Small states > Add new State > Label 'Large'. Repeat for 'Small'

[Simplify all Instances] Hide layers without properties (fils, effects, AL…) . Select Component Set > Settings . Note: Show more properties is still available,

[Exposing nested instances] Check to allow parent level access to all. Select ❖Card Lower parent > Properties > + > Expose properties from Nested Instances > select Price Slug > now it is exposed in the wrapper