Skip to content

πŸ“Œ [Roadmap] Figma to Web - Missing features #27

Open
Listed in
@You-J

Description

@You-J

Css properties to support

(update 21.10.06)

Global

    • opacity
    • visible
    • rotation ⚠

Fills

    • solid fill
    • image fill as background or background-image
    • width, height (only has group wrapper)
<GroupWrapper>
  // has size // has not size
  <Rectangle1 />
  <Rectangle2 />
</GroupWrapper>
    • linear gradient
    • solid color opacity
    • gradient opacity
    • fill (without stroke) opacity 100%
    • has multi color linear gradient
    • gradient degree
    • gradient stops
    • gradient alpha
    • radial gradient
      gradient center
      gradient radius
    • angular gradient
    • multiple fills
box-shadow: -7px -9px 3px rgba(98, 71, 20, 0.25), inset 9px 9px 12px rgba(40, 22, 4, 0.25);
    • border-radius (all)
    • border-radius (one)
    • opacity zero fill
    • layer (mix-blend-mode)
mix-blend-mode: color-dodge;

stroke

    • single solid border
    • stroke dash (in advanced stroke)
    • stroke dash cap (in advanced stroke)
    • stroke gap (in advanced stroke)
    • stroke end points cap (in advanced stroke)
    • stroke join (in advanced stroke)

boolean operation

    • responsive position (constraint)

masking

    • vector mask
    • rect mas
    • rrect mask
    • ⚠ ellipse mask
    • ⚠ image mask
    • ⚠ text mask
    • fallbacks

vector

    • Responsive position (constraint) (viewbox?)
    • ⚠ Vector on plugin version
    • ⚠ curvy lines

image fill

    • image fill (cover)
    • image opacity fill
    • image fit
    • image crop
    • image tile

ellipse

    • stroke
    • long width oval (shapes/ellipse/Ellipse 11)
    • long height oval (shapes/ellipse/Ellipse 15)
    • deformed ellipse (shapes/ellipse/Ellipse 16)

text

    • align-items
    • frame path
    • letter spacing
    • font family
    • font size
    • font-weight
    • precise font-weight - (e.g. currently ExtraBold gets converted to 700 instead on 800 & so on..)
    • position
    • h1-6 & p tag support
    • mixed text style
    • text shadow
    • line-height undefined when auto (don't 100%)
    • automatize - width
    • line-height percentage calculation error
    • proper text formatting for raw html (vanilla) Escaping text for vanilla html #72

Line ⚠

    • native line support - no fallback
    • rotation 0 / 180 / 360 line as divider
    • rotation n line as vector
<hr />

or

width: 837px;
height: 0px;

border: 1px solid #000000;

Autolayout Frame

    • fixed size

effects

    • background blur
    • layer blur
    • shadow + spread
    • shadow + offset
    • shadow + spread + offset
    • multi-shadow
    • shadow (flutter)
box-shadow: 0px 4px 24px rgba(255, 0, 0, 0.25), 0px 4px 4px rgba(255, 153, 0, 0.25);
    • inner-shadow (no text)
    • inner + outer-shadow (no text)
    • inner-shadow (text)
    • inner + outer-shadow (text)

Polygon

    • polygon

star

    • star

Activity

changed the title [-]not implemented style list in react[/-] [+][Roadmap] Figma to React - Missing features[/+] on Sep 7, 2021
changed the title [-][Roadmap] Figma to React - Missing features[/-] [+]πŸ“Œ [Roadmap] Figma to React - Missing features[/+] on Sep 17, 2021
changed the title [-]πŸ“Œ [Roadmap] Figma to React - Missing features[/-] [+]πŸ“Œ [Roadmap] Figma to Web - Missing features[/+] on Sep 26, 2021
unpinned this issue on Jun 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @softmarshmallow@You-J

      Issue actions

        πŸ“Œ [Roadmap] Figma to Web - Missing features Β· Issue #27 Β· gridaco/code